这次要讲的是 4个 “摆正” 元素的方法,这是我工作中遇到的场景。
我不知道 straighten 使用 “摆正” 这个词来翻译正不正确,反正我就是要这么叫!
straighten:根据距离的远近,将元素从当前角度旋转至0、90、180、270等角度。
【百度百科的定义】
straighten,英文单词,及物动词、不及物动词,作及物动词时意为“整顿;使…改正;使…挺直;使…好转”,作不及物动词时意为“变直;好转”。
英语课代表的提醒~
效果如下图所示
Fabric.js版本:4.6.0
Fabric.js 提供了几个 API 完成 摆正操作:
需要注意的是,使用 object.straighten 和 object.fxStraighten 摆正元素后,画面是不会自动更新的(但实际是已经摆正了),需要配合 canvas.renderAll() 等刷新画布的 API 一起使用。
这点官方文档上好像没有特别说明。
上面4个 API 中,带 fx 的是有过渡动画效果的。
接下来的代码里,使用到的 元素对象 我都在公共变量里定义好的。
如果需要动态获取指定元素,你可以使用 canvas.getObjects() 、getActiveObject() 等方法,这根据你业务场景来定。
这些方法都不是本文想讲解的重点,所以现在先回归到原来的目的吧。
canvas.straightenObject 这个方法允许我们传入1个参数。这个参数是你需要摆正的元素对象(fabric.Object)。
我用一个 三角形 来举例。逻辑都写在代码注释里。
复制代码
使用 object.straighten 也能达到 canvas.straightenObject 的效果。
但 object.straighten 并不会自动刷新画布,需要使用 canvas.renderAll() 等方法配合。
复制代码
前面两个方法都是没过渡效果的。
接下来就试试有过渡效果的 API:canvas.fxStraightenObject 。
和 canvas.straightenObject 一样,canvas.fxStraightenObject 也需要传入一个 对象参数(fabric.Object) 。
复制代码
canvas.fxStraightenObject 不需要使用额外的方法刷新画布。
使用 object.fxStraighten 也可以实现带过渡动画的摆正功能。
但 object.fxStraighten 有点特别,它也能传入1个参数,该参数是个对象,对象里面有2个函数字段。
用法如下所示
复制代码
上面第3点的代码
复制代码
这种写法只是想提供一种思路,真实开发需要根据你业务进行灵活调整。
页面更新:2024-05-13
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号