在本教程中，我们将学习如何使用 FabricJS 禁用三角形的居中缩放。三角形是 FabricJS 提供的各种形状之一。为了创建一个三角形，我们必须创建一个 Fabric.Triangle 类的实例并将其添加到画布中。
当通过控件缩放对象时，分配一个centeredScaling 属性的真实值，变换的原点是其中心。
语法
new fabric.Triangle({ centeredScaling: Boolean }: Object)
参数
选项（可选） – 此参数是一个对象 为我们的三角形提供额外的定制。使用此参数，可以更改与 centeredScaling 属性相关的对象的颜色、光标、描边宽度等属性。
选项键
centeredScaling – 该属性接受一个布尔值并允许我们控制对象是否应使用其中心作为变换原点。
示例 1
传递 centeredScaling 作为 key 并为其分配一个“true”值
百度文心百中
百度大模型语义搜索体验中心
22 查看详情 
让我们看一个代码示例，了解启用 centeredScaling 属性时三角形对象的行为。当我们放大对象时，变换的原点是三角形的中心。
Passing centeredScaling as key and assigning it a "true" value
Try scaling the triangle to see that it is using its center as the center of transformation.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: true, }); // Add it to the canvas canvas.add(triangle);
示例 2
禁用 centeredScaling 属性
我们可以通过为其指定 False 值来禁用 centeredScaling 属性。这将不再使用三角形的中心作为变换的中心。这是一个代码示例来演示
Disabling the centeredScaling property
Try scaling the triangle to see that it is using one of its corners as the center of transformation.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: false, }); // Add it to the canvas canvas.add(triangle);
以上就是如何使用 FabricJS 禁用三角形的中心缩放？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/528840.html
微信扫一扫 
支付宝扫一扫 
