資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 在分組後取消對多個折線的組合？
我們可以透過建立fabric.Polyline的例項來建立一個折線物件。折線物件可以由一組連線的直線段來表示。由於它是 FabricJS 的基本元素之一，因此我們也可以透過應用角度、不透明度等屬性輕鬆地自定義它。對於取消組合多個折線物件，我們可以使用toActiveSelection()方法。
語法
toActiveSelection(): fabric.ActiveSelection
示例 1：一鍵組合所有折線
在瞭解如何取消組合之前，讓我們先看看如何組合物件。在本例中，我們將有一個按鈕，點選它所有折線將被組合成一個物件。因此，移動該物件將移動所有折線，並且在調整大小或傾斜時，它也將表現為一個物件。
我們將建立一個函式，該函式獲取畫布中的所有物件並將它們組合成一個物件。
<!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>Grouping all the Polyline objects using one click</h2>
<p> Click on the `Group` Button to group all the Polyline objects in the canvas </p>
<canvas id="canvas"></canvas>
<button type="button" onclick="group()">Group</button>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Polyline object
var polyLine1 = new fabric.Polyline([
{ x: 500, y: 200 },
{ x: 550, y: 60 },
{ x: 350, y: 100 },
], {
stroke: "green",
fill: "white",
strokeWidth: 5,
});
// Initiate another Polyline object
var polyLine2 = new fabric.Polyline([
{ x: 300, y: 200 },
{ x: 150, y: 60 },
{ x: 250, y: 100 },
], {
stroke: "green",
fill: "white",
strokeWidth: 5,
});
// Add them to the canvas instance
canvas.add(polyLine1);
canvas.add(polyLine2);
// Function to group all the polyline objects into single object
function group() {
// Get all the objects as selection
var sel = new fabric.ActiveSelection(canvas.getObjects(), {
canvas: canvas,
});
// Make the objects active
canvas.setActiveObject(sel);
// Group the objects
canvas.getActiveObject().toGroup();
}
</script>
</body>
</html>
示例 2：一鍵取消組合所有已組合的折線
在本例中，我們將有一個按鈕，點選它已組合的折線將被取消組合。因此，該物件將表現為單獨的物件。首先，我們將所有物件組合成一個物件。此外，當按下取消組合按鈕時，我們將使用toActiveSelection()來取消組合物件。
<!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>Ungrouping all the grouped Polylines using one click</h2>
<p> Click on the grouped object and click on `Ungroup` button to ungroup the objects, further click in empty space to discard the selection </p>
<canvas id="canvas"></canvas>
<button type="button" onclick="ungroup()">Ungroup</button>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Polyline object
var polyLine1 = new fabric.Polyline([
{ x: 500, y: 200 },
{ x: 550, y: 60 },
{ x: 350, y: 100 },
], {
stroke: "green",
fill: "white",
strokeWidth: 5,
});
// Initiate another Polyline object
var polyLine2 = new fabric.Polyline([
{ x: 300, y: 100 },
{ x: 150, y: 60 },
{ x: 250, y: 10 },
], {
stroke: "green",
fill: "white",
strokeWidth: 5,
});
// Initiate another Polyline object
var polyLine3 = new fabric.Polyline([
{ x: 400, y: 200 },
{ x: 250, y: 160 },
{ x: 150, y: 200 },
], {
stroke: "green",
fill: "white",
strokeWidth: 5,
});
// Add them to the canvas instance
canvas.add(polyLine1);
canvas.add(polyLine2);
canvas.add(polyLine3);
// Get all the objects as selection
var sel = new fabric.ActiveSelection(canvas.getObjects(), {
canvas: canvas,
});
// Make the objects active
canvas.setActiveObject(sel);
// Group the objects
canvas.getActiveObject().toGroup();
// Function to ungroup the grouped polyline objects
function ungroup() {
canvas.getActiveObject().toActiveSelection();
}
</script>
</body>
</html>
更新於： 2023年2月16日
327 次瀏覽
廣告