Fabric.js 修改画布交互方式作用详解
脚本之家 / 编程助手：解决程序员“几乎”所有问题！
脚本之家官方知识库 → 点击立即使用
本文简介
fabric.js 为我们提供了很多厉害的方法。今天要搞明白的一个东西是 canvas.interactive 。
官方文档对 canvas.interactive 的解释是：
Indicates that canvas is interactive. This property should not be changed.
canvas.interactive 默认值是 true ，官方建议我们不要修改该值，但我偏不。
动手试试
先来看看将 interactive 设为 false 之后有什么效果。
创建一个画布，并在上面添加一个矩形。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { interactive: false // 隐藏交互模式 }) let rect = new fabric.Rect({ top: 60, left: 60, width: 60, height: 60, fill: '#08d9d6' }) canvas.add(rect)</script> |
从上面的效果可以看到，选中元素后并没有出现默认的控制点，但还是可以操作元素的缩放和旋转的（旋转的那个操作，我是猜了大概的操作点在那个位置）。
难怪官方劝大家不要修改 interactive ，确实有他的道理。
和 hasControls 、hasBorders 的区别
hasControls 和 hasBorders 需要在图形元素上设置。
将 hasControls 设置成 false 就会取消元素选中时的控制角。
将 hasBorders 设置成 false 就会取消元素被选中时的控制边。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas><script> let canvas = new fabric.Canvas('canvasBox') let rect = new fabric.Rect({ top: 60, left: 60, width: 60, height: 60, fill: '#08d9d6', hasControls: false, // 取消控制角 hasBorders: false // 取消控制边 }) canvas.add(rect)</script> |
从上图的效果可以看出，将 hasControls 和 hasBorders 设置成 false 后，元素可以移动，但不能缩放和旋转。
和 StaticCanvas 的区别
如果不希望画布可交互，可以使用 StaticCanvas 创建一个静态的画布。
只要将 new fabric.Canvas 改成 new fabric.StaticCanvas 就行了。
1 2 3 4 5 6 7 8 9 10 11 12 | <canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas><script> let canvas = new fabric.StaticCanvas('canvasBox') let rect = new fabric.Rect({ top: 60, left: 60, width: 60, height: 60, fill: '#08d9d6' }) canvas.add(rect)</script> |
瞧，使用了 StaticCanvas 创建的画布，里面的元素选不中也拉不动。
而只是将 interactive 设置成 false 的话，是可以进行操作的。
总结
- 将
interactive设置为false：可操作（移动、旋转、缩放等），但看不见控制角和控制边。 - 将元素的
hasControls和hasBorders设置成false：可移动，但不能旋转和缩放，同时看不见控制角和控制边。 - 使用
StaticCanvas创建画布：元素无法被选中，也无法移动、选中、缩放等操作。
综上所述，在日常开发中，canvas.interactive 真的好像没啥用耶（我还没想到有什么应用场景）。
代码仓库
以上就是Fabric.js 修改画布交互方式作用详解的详细内容，更多关于Fabric.js 修改画布交互的资料请关注脚本之家其它相关文章！
微信公众号搜索 “ 脚本之家 ” ，选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！
相关文章
今天小编就为大家分享一篇关于Javascript中绑定click事件的四种方式介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
这篇文章主要介绍了微信小程序之蓝牙的链接的相关资料,希望通过本文大家能够掌握小程序蓝牙的开发方法，需要的朋友可以参考下2017-09-09
这篇文章主要为大家介绍了JS前端使用canvas实现物体的点选示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
微信小程序之MaterialDesign--input组件详解
本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
lodash内部方法getFuncName及setToString剖析详解
本篇章我们主要是通过了解lodash里的两个内部方法getFuncName方法和setToString方法，在实际开发中我们也可以借鉴方法的实现思路，在需要的时候简单封装一下，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序 判断手机号的实现代码的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了微信小程序 modal组件详细介绍的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要为大家介绍了commander脚手架工具使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了JS前端面试手写apply和bind实例的轻松实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了为输入框加入数字js校验代码分享，还是比较不错的，这里分享给大家，供需要的朋友参考。2017-11-11
最新评论