fix(image): Fixed issue 2266 (#2266)

[l123wx]

English Template / 英文模板

• 我已阅读并遵循了贡献文档中的PR指南.

PR类型 (请至少选择一个)

• Bugfix
• Feature
• Code style update
• Refactor
• Test Case
• TypeScript definition update
• Document improve
• CI/CD improve
• Branch sync
• Other, please describe:

PR 描述

Fixes #2266

将 semi-foundation/image > handleMoveImage 方法内部分逻辑抽出来在 changeZoom 中复用

calcCanDragDirection 和 calcExtremeBounds 等方法中涉及到的 widht、height、containerWidth、containerHeight 改为参数传入，便于在不同时机复用。

更新日志

🇨🇳 Chinese

• Fix: 修复鼠标滚轮缩放图片后，拖动了图片，再次缩放后会重置回中心位置的问题

---

🇺🇸 English

• Fix: Fixed an issue where after the mouse wheel zoomed the picture, dragging the picture would reset to the center position after zooming again.

检查清单

• 已增加测试用例或无须增加
• 已补充文档或无须补充
• Changelog已提供或无须提供

其他要求

• 本条 PR 不需要纳入 Changelog

附加信息

Before

2024-06-12.17-35-33.mp4

After

2024-06-12.17-38-25.mp4

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ee5425b:

Sandbox	Source
pr-story	Configuration

[YyumeiZhang]

尝试了修改后的效果。
由于在 #1890 开始允许鼠标不在图片上也可以进行缩放操作，导致在修改后，如果鼠标不在图片上，开始放大图片，则一开始的缩放中心是页面中心，后面当图片逐渐放大，鼠标将出现在图片区域，缩放中心变成鼠标位置，视觉效果上有点问题。

缩放的时候同样如此，如果鼠标在图片上，一开始的缩小中心时鼠标位置，后面图片缩小，即使鼠标还在图片上，视觉上看看，缩放中心也变成了页面中心。

对于中心切换的问题，是否有更好的处理方式呢？🤔

[l123wx]

尝试了修改后的效果。 由于在 #1890 开始允许鼠标不在图片上也可以进行缩放操作，导致在修改后，如果鼠标不在图片上，开始放大图片，则一开始的缩放中心是页面中心，后面当图片逐渐放大，鼠标将出现在图片区域，缩放中心变成鼠标位置，视觉效果上有点问题。

缩放的时候同样如此，如果鼠标在图片上，一开始的缩小中心时鼠标位置，后面图片缩小，即使鼠标还在图片上，视觉上看看，缩放中心也变成了页面中心。

对于中心切换的问题，是否有更好的处理方式呢？🤔

这个效果是在我的预期内的，个人感觉这样的方式也符合用户习惯，windows 的照片和微信的图片预览也是一样的缩放逻辑：

windows.mp4

default.mp4

[YyumeiZhang]

在旋转 180度和270时候，缩放会发生抖动，待处理

[l123wx]

@YyumeiZhang Hello，请问一下这个地方为什么要在 currZoom === _zoom 的时候才执行更新 zoom 的操作呢

https://github.com/DouyinFE/semi-design/blob/bca3ec6cacab37e257a46ea9165416d1d82728e9/packages/semi-foundation/image/previewImageFoundation.ts#L122C13-L124C21

[l123wx]

使用 rotation 旋转之后，使用 left 和 top 定位还是按原来未旋转的 DOM 来定位的，当同样设置 left 为零时，是下图的这种情况：

为了减少计算的复杂度，将图片定位的方式改为了：父元素使用 flex 让 image 居中，image 使用 translate 进行偏移

[l123wx]

由于低版本的浏览器不支持 CSS 的 translate 属性，所以将 translate 写到了 transform 里面，而 transition 没办法单独作用于 transform 的某个变换中，这会导致一些问题，所以暂时把过渡效果移除了

[YyumeiZhang]

@YyumeiZhang Hello，请问一下这个地方为什么要在 currZoom === _zoom 的时候才执行更新 zoom 的操作呢

https://github.com/DouyinFE/semi-design/blob/bca3ec6cacab37e257a46ea9165416d1d82728e9/packages/semi-foundation/image/previewImageFoundation.ts#L122C13-L124C21

原来的逻辑中，https://github.com/DouyinFE/semi-design/blob/v2.63.1/packages/semi-ui/image/previewImage.tsx#L93 在 previewImage 的 componentDidUpdate 中根据缩放比例 zoom 变化去调用重新计算。但是 resize 之后，预览图片的容器变化，即使缩放比例 zoom 没有变化，也需要重新计算 left 和 width。
另外，切换图片的时候（handleLoad调用），由于没有对 zoom 做清除，即使两张图片 zoom 一致，也需要重新计算新图片的 width，height，left，top。