canvas绘图——根据鼠标位置进行缩放的实现原理

 

 

 

 代码示例：

this.scale 是当前缩放比例，this.offsetX, this.offsetY 是当前原点位移距离，step 是每次缩放的增量

            if (wheelDelta > 0) {  // 放大
                if (this.scale < max) {  // 缩放值小于设定的最大值，则可以继续放大
                    this.scale += step;  // 累加后 this.scale 为放大后的缩放值
                    if (this.scale > max) {  // 越界处理
                        this.scale = max;
                    }
                    this.painter.scale(this.scale);  // 进行缩放
                    // 要根据鼠标位置缩放，则要在缩放后再次移动，将缩放点的位置移动到鼠标位置
                    const x = e.offsetX;
                    const y = e.offsetY;
                    offsetX = (x - this.offsetX) * this.scale / (this.scale - step) - (x - this.offsetX);
                    offsetY = (y - this.offsetY) * this.scale / (this.scale - step) - (y - this.offsetY);
                    this.move(-offsetX, -offsetY);
                }

为什么是 x – this.offsetX？因为代码中，当画布左移后，this.offsetX 是负数，所以使用减号得到的才是正确的坐标。

this.scale / (this.scale – step) 是缩放后的缩放值除以缩放前的缩放值，得到缩放率。

this.move() 对画布进行移动，并累加 this.offsetX 和 this.offsetY

posted on 2018-08-07 14:38 Tirion 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为3body原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/3body/p/9436864.html