详解通过变换矩阵实现canvas的缩放功能

这篇文章首要先容一种通过配置canvas的调动矩阵来实现canvas的缩放。

第一步就是监听鼠标的滚轮变乱，在滚轮变乱中按照鼠标的转动以及基于前一次的调动，从头配置context的缩放僻静移，焦点代码如下：

let delta = this.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0? 2 : 1/2; }); let offsetX = data.x - delta._transform.translate[0]; let offsetY = data.y - delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1 : -1/2)*offsetX; delta._transform.translate[1] -= (data.delta > 0? 1 : -1/2)*offsetY; delta.refreshAll(); });

这里假设每次缩放都都放2倍，也可所以其他缩放比例。

第一步按照转动的偏向在当前缩放比的基本上乘以2可能除以2；

第二步计较平移，根基思绪是计较基于新鼠标位置缩放canvas上的点到心位置时，对canvas平移到什么位置是可以到达沟通的结果。

下面看一下refreshAll的代码：

let ctx = this.context; let matrix = this.getTransformMatrix(); ctx.save(); ctx.transform(...matrix); //ctx.translate(...this._transform.translate); //ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { shapes = [shapes]; } shapes.forEach( (shape) => { shape.render(ctx); }); ctx.restore();

代码中起首获取到基于之前计较的缩放值scale僻静移值translate，获得一个变革矩阵 ，然后将矩阵中对应的值转达给context的transform要领，对画布举办给定的调动，之后举办前一次缩放完全同等的画图操纵，就和已获得缩放后的结果了~~

在上面的代码中，ctx.transform() 也可以完全用ctx.translate()和ctx.scale()要领取代，如代码中的注释部门所示，参数即为前面计较获得的值。

完备代码可参考github地点: https://github.com/helloweilei/delta

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!