ExtJS 實現圖片放大鏡效果的最佳實踐

方案對比

推薦方案：基於 Ext.ux.ImageZoom 的輕量封裝

Ext.define('MyApp.view.ImageMagnifier', {
    extend: 'Ext.container.Container',
    alias: 'widget.imagemagnifier',
    config: {
        src: '',
        zoomFactor: 2
    },
    initComponent: function() {
        this.items = [{
            xtype: 'image',
            src: this.getSrc(),
            listeners: {
                render: function(img) {
                    new Ext.ux.ImageZoom(img.getEl(), {
                        zoom: this.getZoomFactor()
                    });
                },
                scope: this
            }
        }];
        this.callParent();
    }
});

// 使用
{
    xtype: 'imagemagnifier',
    src: 'resources/images/product.jpg',
    zoomFactor: 3
}

若無現成擴展，原生實現核心步驟

1. 容器 position: relative; overflow: hidden;
2. 原圖 mousemove 事件中計算鼠標相對位置。
3. 動態創建/移動一個 div.lens（半透明矩形）跟隨鼠標。
4. 大圖容器 background-image: url(...); background-position: -x*zoom -y*zoom; 同步更新。

性能優化提示

• 大圖按需加載：lens 首次顯示時才 new Image() 載入大圖。
• 使用 requestAnimationFrame 節流 mousemove 回調。
• 銷毀組件時務必 removeListener 避免內存洩漏。

ExtJS 6.2+ 官方示例 examples/kitchensink/view/image-zoom.js 已包含完整實現，可直接複製適配。