Image组件Bug about vexip-ui HOT 17 CLOSED

再次放大的时候你的鼠标是否停留在比较远的地方呢？缩放是会以当前鼠标所在位置为中心点进行放大的。

from vexip-ui.

再次放大的时候你的鼠标是否停留在比较远的地方呢？缩放是会以当前鼠标所在位置为中心点进行放大的。

我并没有放到很远的地方，我甚至都不移动鼠标

from vexip-ui.

那你是否可以录制一下你操作时的表现，以及提供一下 System Info，我按照你文字描述的步骤，无法在文档中复现你所说的问题。

from vexip-ui.

那你是否可以录制一下你操作时的表现，以及提供一下 System Info，我按照你文字描述的步骤，无法在文档中复现你所说的问题。

from vexip-ui.

感觉有点像是这里的问题

from vexip-ui.

from vexip-ui.

还有就算是我点击拖拽黑色遮盖层的区域，也会拖动图片呢

from vexip-ui.

这个就是鼠标移到了外边的地方，在最小的时候，鼠标距离图片可能只有10px，但是随着放大，这个距离也会跟着放大，随意图片就越走越远了。

from vexip-ui.

    [
      
    
        ![动画1](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)
      ](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)
    
    
      
        
          
        
        
          
          
        
      
      [
        
          
        
      ](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)
    
   [ ![动画1](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY) ](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)
  
    [
      
    
        ![动画1](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)
      ](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)
    
    
      
        
          
        
        
          
          
        
      
      [
        
          
        
      ](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)
    
   [ ](https://private-user-images.githubusercontent.com/30688843/299934840-94119e71-2780-45cc-8d69-8180ae80d2cb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYyNjIxNjAsIm5iZiI6MTcwNjI2MTg2MCwicGF0aCI6Ii8zMDY4ODg0My8yOTk5MzQ4NDAtOTQxMTllNzEtMjc4MC00NWNjLThkNjktODE4MGFlODBkMmNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTI2VDA5Mzc0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQzZTI3ZmY5MGQ3MmM4YmEyNDIyYmY1NjdmYjczOTVhOTk2MmFjZDg4YzgwNDhlNjljYTM2YTY4N2RjODkyMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FTyLZ1KDKuZp1ENHwBHgsotcH2qCgBcS68QRtF7XROY)

这个就是鼠标移到了外边的地方，在最小的时候，鼠标距离图片可能只有10px，但是随着放大，这个距离也会跟着放大，随意图片就越走越远了。

我看到这个逻辑了，但是现在我这边测试提单了，你有什么好办法让这个情况不出现吗？

from vexip-ui.

我注释了这段就符合我的预期，

from vexip-ui.

其实我觉得在useMoving,拿到拖拽后的left和top,如果是zoomOut

from vexip-ui.

我注释了这段就符合我的预期，

这代码是处理让缩放中心在鼠标停留的位置的。

from vexip-ui.

可以优化成当图片未超出视窗时，仅能局限在视窗内，然后添加一个属性，控制是否将鼠标位置作为缩放中心。

from vexip-ui.

我注释了这段就符合我的预期，

这代码是处理让缩放中心在鼠标停留的位置的。

其实我觉得在useMoving,拿到拖拽后的left和top,如果是zoomOut
1.先定义了scale为1
2.如果是 zoomOut 的时候 scale .value = scale / zoomDelta ，然后在contentStyle中left = currentLeft/ scale
3.如果是 zoomIn 的时候 scale .value = scale * zoomDelta ，然后在contentStyle中left = currentLeft/ scale
这样也可以保留在中间的位置

from vexip-ui.

可以优化成当图片未超出视窗时，仅能局限在视窗内，然后添加一个属性，控制是否将鼠标位置作为缩放中心。

我觉得还是太麻烦了，主要是为了left 和top在中心位置就可以了

from vexip-ui.

可以优化成当图片未超出视窗时，仅能局限在视窗内，然后添加一个属性，控制是否将鼠标位置作为缩放中心。

我觉得还是太麻烦了，主要是为了left 和top在中心位置就可以了

我到时候提交一下代码 你看下可以不

from vexip-ui.

Completed by 1458e41.

from vexip-ui.