資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究如何使用 FabricJS 停用圓形的可選擇性？
在本教程中，我們將學習如何使用 FabricJS 停用圓形的可選擇性。圓形是 FabricJS 提供的各種形狀之一。為了建立一個圓形，我們必須建立一個 *fabric.Circle* 類的例項並將其新增到畫布中。為了修改物件，我們必須在 FabricJS 中選擇它。但是，我們可以使用 *selectable* 屬性更改此行為。
語法
new fabric.Circle({ selectable: Boolean }: Object)引數
options (可選) − 此引數是一個 *Object*，它為我們的圓形提供了額外的自定義。使用此引數，可以更改與物件的屬性相關的屬性，例如顏色、游標、筆劃寬度以及許多其他屬性，其中 *selectable* 是一個屬性。
選項鍵
selectable − 此屬性接受一個布林值。當為其賦值 'false' 時，該物件將無法被選中進行修改。其預設值為True。
示例 1
預設行為或當 *selectable 屬性* 設定為 'true' 時
讓我們來看一個示例，瞭解當 selectable 屬性預設設定為 True 時物件的行為。當 selectable 屬性設定為 true 時，我們可以選擇物件、在畫布周圍移動它並對其進行修改。
<!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 selectability of circle using FabricJs</h2>
<p>Here you can select the object (circle) and move it around freely. This is the default behavior. Here we have not used the <b>selectable</b> property but by default, it is set to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#85bb65"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
將 selectable 屬性作為鍵傳遞
在此示例中，我們將一個 False 值賦給selectable 屬性。這意味著我們再也無法選擇圓形物件進行修改了。
<!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 selectability of circle using FabricJs</h2>
<p>Now you can no longer select the circle because we have set <b>selectable</b> as False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#85bb65",
selectable: false
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於：2022年5月25日
瀏覽量：183
廣告