在本教學中，我們將學習如何使用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 properedScaling#. ##Options Keys
value. When this property is true, the object uses the center as its origin of transformation.Example 1
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 we scale the
範例2停用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>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>以上是如何使用FabricJS禁用矩形的居中縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
