本文主要介绍一种通过设置画布的变换矩阵实现画布缩放的方法。第一步是监听鼠标滚轮事件。在滚轮事件中，根据鼠标滚动和之前的变换，重新设置上下文的缩放和平移。核心代码如下：letdelta=this.deltaInst;delta.bind('zoom',(data)=>{delta._transform.scale.forEach((s,i)=>{delta._transform.scale[i]*=data.delta>0?2:1/2;});让offsetX=data.x-delta._transform.translate[0];让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；第二步计算平移，基本思路是计算当画布上的点根据新的鼠标位置缩放到心脏位置时，到画布位置的平移多少可以达到同样的效果。我们来看看refreshAll代码：letctx=this.context;让矩阵=this.getTransformMatrix();ctx.save();ctx.transform(...矩阵);//ctx.translate(...this._transform.translate);//ctx.scale(...this._transform.scale);如果(!Array.isArray(shapes)){shapes=[shapes];}shapes.forEach((shape)=>{shape.render(ctx);});ctx.restore();代码首先获取之前计算出的缩放值scale和平移值translate，获取一个变化矩阵，然后将矩阵中对应的值传递给context的transform方法，在canvas上进行给定的变换，然后进行绘图和前面的缩放一模一样的操作，得到了缩放的效果~~上面代码中ctx.transform()也可以完全使用ctx.translate()和ctx.scale()方法，如图代码注释部分，参数为前面计算的值。完整代码请参考github地址：https://github.com/helloweile...
