在本教程中，我们将学习如何使用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中文网其他相关文章！
