資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 FabricJS 中僅當物件完全包含在選擇區域內時才啟用物件的選中？
在本文中，我們將學習如何使用 FabricJS 僅當物件完全包含在選擇區域內時才啟用物件的選中。我們可以使用 selectionFullyContained 屬性來實現這一點。
語法
new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)引數
元素 − 此引數是<canvas> 元素本身，可以使用 Document.getElementById() 或<canvas> 元素本身的 id 獲取。FabricJS 畫布將在此元素上初始化。
選項（可選） − 此引數是一個物件，它為我們的畫布提供了額外的自定義功能。使用此引數，可以更改與畫布相關的屬性，例如顏色、游標、邊框寬度以及許多其他屬性，其中 selectionFullyContained 是一個屬性。它接受一個布林值，用於確定物件是否僅在完全包含在選擇區域內時才被選中。其預設值為 False。
示例 1
將 selectionFullyContained 鍵的值設定為 False
讓我們看一個 FabricJS 中預設行為的程式碼示例，即即使物件未完全包含在選擇區域內，它也會被選中。在此示例中，我們將 selectionFullyContained 的值設定為 False。
<!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>Enabling selection of an object only when it is fully contained in a selection area</h2>
<p>Select a partial area around the object. The entire object would be selected even if you select a partial area containing the object.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionFullyContained: false
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
將 selectionFullyContained 鍵的值設定為 True 傳遞給類
讓我們看一個程式碼示例，其中 selectionFullyContained 屬性的值已設定為 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>Enabling selection of an object only when it is fully contained in a selection area</h2>
<p>Here you cannot select the object by selecting a partial area around the object. The object must be fully contained inside the selection area.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionFullyContained: true
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於： 2022年5月20日
678 次瀏覽
廣告