在本教程中,我们将学习如何使用FabricJS禁用矩形的居中缩放。矩形是FabricJS提供的各种形状之一。为了创建一个矩形,我们需要创建一个fabric.Rect类的实例,并将其添加到画布上。当通过控制器进行缩放时,将centeredScaling属性赋值为true,使用中心作为对象的变换起点。
new fabric.Rect({ centeredScaling: Boolean }: Object)
Options (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.
centeredScaling − This property accepts a Boolean value. When this property is true, the object uses the center as its origin of transformation.
Passing 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> <!-- Adding the Fabric JS Library--> <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>
禁用centeredScaling属性
我们可以通过将其赋值为False来禁用centeredScaling属性。这将不再使用矩形的中心作为变换的中心。下面是一个代码示例来演示这一点 -
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <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禁用矩形的居中缩放?的详细内容,更多请关注php中文网其它相关文章!
已抢26913个
抢已抢14296个
抢已抢7179个
抢已抢8639个
抢已抢17629个
抢已抢7103个
抢