我们已经涵盖了上一系列的许多话题;从基础对象操作到动画，事件，滤镜，组合和子类。但还有几件非常有趣和有用的事情要讨论！
让我们看看如何通过鼠标交互实现缩放和平移的基本系统。我们将使用鼠标滚轮在画布上放大20倍（2000％）并使用alt +单击动作进行拖动。
我们开始基本控制：
查看demo
这是一个基本的缩放控制，限制在1%到2000%之间。我们现在要添加画布的拖动。我们将使用ALT +拖动，但您可以更改为另一种组合。按住alt键下拉鼠标会将布尔值设为true，这样鼠标移动事件就能知道是开始拖拽了：
查看demo
好的，这是一个基本设置，可以让你控制缩放和平移。仍然有一些可能的增强。 例如，我们可以使轮缩放使画布围绕光标所在的点居中：
查看demo
最后一点，我们可以限制平移区域以避免在一个方向上无限延伸。我们描出一个1000×1000像素的矩形来表示平移区域。我们添加代码来限制边界内的移动：
查看demo
下一章：Fabric.js介绍 第六部分
我们已经涵盖了上一系列的许多话题;从基础对象操作到动画，事件，滤镜，组合和子类。但还有几件非常有趣和有用的事情要讨...
本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的橡皮擦功能。 Fabric.js ...
fabric.js是一个canvas的框架，可以快速的渲染文字，图片，线条，长方形，正方式，滤镜，动画等功能，下面...
什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Can...
我们已经在前几个系列涵盖了很多话题，从基础对象操作到动画，事件，滤镜，组合和子类。但还有几件非常有趣和有用的事情要...
新的clipPath属性 在2.4.0中，我们为所有对象引入了clipPath属性。 ClipPath将替换cli...
我们已经介绍了本系列的第一部分和第二部分的大部分基础知识。我们继续前进到更高级的技巧！ 组合（Group） 我们首...
了解转换如何在fabricJS上工作是尽可能顺利地编写应用程序的关键方面。 与转换相关的方法和属性 如果您计划理解...
本教程是为stackoveflow问题创建的，其中用户需要在fabricJS中使用位图而不是字体来执行文本对象。 ...
在本系列的第一部分，我们只开始熟悉Fabric.js。我们研究了Fabric在其对象模型和对象层次结构中使用Fab...
本文标题：Fabric.js介绍 第五部分
本文链接：https://www.haomeiwen.com/subject/cufetktx.html
网友评论