在本教學中，我們將在移動時設定矩形的邊框不透明度 FabricJS。矩形是 FabricJS 提供的各種形狀之一。為了 建立一個矩形，我們必須建立一個 Fabric.Rect 類別的實例並將其新增到 畫布。
我們可以使用 borderOpacityWhenMoving 屬性在畫布中移動矩形時更改矩形的不透明度。
new fabric.Rect({ borderOpacityWhenMoving: Number }: Object)#選項（可選） - 此參數是一個對象，它為我們的矩形提供額外的自訂。使用此參數，可以變更與 borderOpacityWhenMoving 為屬性的物件相關的顏色、遊標、描邊寬度和許多其他屬性等屬性。
borderOpacityWhenMoving - 此屬性接受一個數字，指定不透明程度我們希望在移動矩形時邊框保持不變。它允許我們在移動矩形物件時控制邊框的不透明度。預設值為 0.4。
顯示borderOpacityWhenMoving 屬性的預設行為
讓我們來看一個程式碼範例，它顯示了boderOpacityWhenMoving 屬性的預設行為。當我們選擇矩形物件並移動它時 在畫布周圍，選區邊框的不透明度從 1（完全不透明）更改為 0.4 這使它看起來有點半透明。
<!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>Displaying the default behaviour of borderOpacityWhenMoving property</h2>
<p>Move the rectangle to see the default behaviour of <b>borderOpacityWhenMoving</b></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",
padding: 9,
borderColor: "black",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>將 borderOpacityWhenMoving 作為鍵傳遞
讓我們來看一個為 borderOpacityWhenMoving 屬性賦值的程式碼範例。在本例中，我們將值指定為 0。它告訴我們，當我們移動矩形時，邊框不透明度將更改為 0 並且不可見。
<!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 borderOpacityWhenMoving as key</h2>
<p>Move the rectangle to see the change in value of <b>borderOpacityWhenMoving</b></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",
padding: 9,
borderColor: "black",
borderOpacityWhenMoving: 0,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>以上是如何使用FabricJS設定矩形移動時的邊框不透明度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
