資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 在移動圓形時設定邊框不透明度？
在本教程中，我們將使用 FabricJS 設定圓形在移動時的邊框不透明度。圓形是 FabricJS 提供的各種形狀之一。為了建立圓形，我們將必須建立一個 fabric.Circle 類的例項並將其新增到畫布上。我們可以使用 borderOpacityWhenMoving 屬性在畫布上移動圓形時更改其不透明度。
語法
new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)引數
options (可選) − 此引數是一個 物件，它為我們的圓形提供了額外的自定義選項。使用此引數，可以更改與物件的許多屬性相關聯的屬性，例如顏色、游標、描邊寬度以及 borderOpacityWhenMoving 屬性。
選項鍵
borderOpacityWhenMoving − 此屬性接受一個 數字，用於指定在移動圓形時我們希望邊框的不透明度。它允許我們控制在移動圓形物件時邊框的不透明度。預設值為 0.4。
示例 1
顯示 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>Setting the border opacity of Circle while moving using FabricJS</h2>
<p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
將 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>How to set the border opacity of Circle while moving using FabricJS?</h2>
<p>Select the object and move it around. You will notice that the border opacity becomes 0 when moving the object. Here we have set <b>borderOpacityWhenMoving</b> to 0.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderOpacityWhenMoving: 0,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於： 2022年5月25日
246 次瀏覽
廣告