如何使用FabricJS禁用矩形的居中缩放？

在本教程中，我们将学习如何使用fabricjs禁用矩形的居中缩放。矩形是fabricjs提供的各种形状之一。为了创建一个矩形，我们需要创建一个fabric.rect类的实例，并将其添加到画布上。当通过控制器进行缩放时，将centeredscaling属性赋值为true，使用中心作为对象的变换起点。
语法new fabric.rect({ centeredscaling: boolean }: object)
parametersoptions (optional) − this parameter is an object which provides additional customizations to our rectangle. using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which centeredscaling is a property.
options keyscenteredscaling − this property accepts a boolean value. when this property is true, the object uses the center as its origin of transformation.
example 1passing centeredscaling as key and assigning a “true” value to it
let’s see a code example to see how a rectangle object behaves when centeredscaling property is enabled. when we scale the object up the origin of transformation is the center of the rectangle.
<!doctype html><html><head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>passing centeredscaling as key and assigning a "true" value to it</h2> <p>try scaling the rectangle to see that centered scaling has been enabled</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a rectangle object var rect = new fabric.rect({ left: 125, top: 90, width: 170, height: 70, fill: "#cf1020", bordercolor: "black", borderscalefactor: 3, centeredscaling: true, }); // add it to the canvas canvas.add(rect); </script></body></html>
示例2禁用centeredscaling属性
我们可以通过将其赋值为false来禁用centeredscaling属性。这将不再使用矩形的中心作为变换的中心。下面是一个代码示例来演示这一点 -
<!doctype html><html><head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>disabling the centeredscaling property</h2> <p>try scaling the rectangle to see that centered scaling has been disabled</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a rectangle object var rect = new fabric.rect({ left: 125, top: 90, width: 170, height: 70, fill: "#cf1020", bordercolor: "black", borderscalefactor: 3, centeredscaling: false, }); // add it to the canvas canvas.add(rect); </script></body></html>
以上就是如何使用fabricjs禁用矩形的居中缩放？的详细内容。

如何使用FabricJS禁用矩形的居中缩放？

VIP推荐