我是来提问的。
我想完成一个对图片移动、旋转、缩放的功能。因为要打开多个图片，并且不挡住图片后的内容，所以没使用canvas和svg。
<div>
<img>
<img>
……
<img>
</div>
事件都委托到了div上，之前的功能都是靠着改变top、left、width、height四个参数达到目的，后来发现打开图片太多的时候，资源占用太大，就改用了transform。
但通过搜索，发现目前基于鼠标位置的图片缩放都是靠改变top、left、width、height来完成的。
是以左上角的点进行的缩放。
算法基本上是：
（鼠标e.clientX-图片偏移量）/原宽=（鼠标e.clientX-要求得的偏移量）/变化后的宽。
但是上面的方法会过多的消耗资源和对版面的重排重绘，所以选择了css的translate和scale来完成功能。
但是上面的算法却无法套用到translate和scale上。scale是以图片的中心点进行缩放，缩放后translate不会变，top、left、width、height也不会变。
难点在于，已经缩放过的图片，在基于鼠标位置的缩放，这个鼠标在的图片的位置坐标和这个偏移量复杂好难计算，我算了2天都是错误的，所以不得不求助大家，希望大家能帮帮忙。
之所以不使用transform-origin设置旋转点，是因为我旋转的功能是靠transform的rotate完成的。如果每次都要改变了旋转点，那么图片的位置也会因为rotate而改变。
至于为什么不用zoom，这个好像不是标准吧，不太懂。如果zoom能更好的节省资源，我会选择，主要是要经常对图片缩放。
神不在的星期二
相关分类