canvas图像缩小放大,canvas 放大

　　本文主要介绍了一种通过设置画布的变换矩阵来实现画布缩放的方法。

　　第一步是监视鼠标滚轮事件。在wheel事件中，根据鼠标的滚动和之前的变换，重置上下文的缩放和平移。核心代码如下：

　　设delta=this.deltaInstdelta.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]；let offsetY=data.y - delta。_ transform . translate[1]；德尔塔。_ transform . translate[0]=-(data . delta 0？1:-1/2)* offsetX；德尔塔。_ transform . translate[1]-=(data . delta 0？1:-1/2)* offsetY；delta . refresh all()；});这里，假设每次变焦是2倍，或者可以是其他变焦比。

　　第一步，根据滚动方向，在当前缩放比例的基础上乘以2或除以2；

　　第二步，计算平移。基本思想是，当画布上的点到中心位置根据新的鼠标位置缩放时，计算画布可以平移到哪里以实现相同的效果。

　　看看下面refreshAll的代码：

　　设ctx=this.contextlet matrix=this . gettransformmatrix()；CTX . save()；ctx.transform.矩阵)；//ctx.translate(.这个。_ transform . translate)；//ctx.scale(.这个。_ transform . scale)；如果(！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.

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。