資料結構
網路
關係資料庫管理系統 (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 the selected 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 another Polyline object
var polyLine1 = 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 polyLine2 = new fabric.Polyline([
{ x: 400, y: 200 },
{ x: 250, y: 160 },
{ x: 150, y: 200 },
], {
stroke: "blue",
fill: "white",
strokeWidth: 5,
});
// Group two objects and add to canvas
var group1 = new fabric.Group([polyLine1, polyLine2]);
canvas.add(group1);
// Initiate another Polyline object
var polyLine4 = new fabric.Polyline([
{ x: 400, y: 10 },
{ x: 350, y: 60 },
{ x: 450, y: 10 },
], {
stroke: "pink",
fill: "white",
strokeWidth: 5,
});
// Initiate a Polyline object
var polyLine3 = new fabric.Polyline([
{ x: 500, y: 200 },
{ x: 550, y: 60 },
{ x: 350, y: 100 },
], {
stroke: "red",
fill: "white",
strokeWidth: 5,
});
// Group two objects and add to canvas
var group2 = new fabric.Group([polyLine3, polyLine4]);
canvas.add(group2);
// Function to ungroup the selected grouped polyline objects
function ungroup() {
canvas.getActiveObject().toActiveSelection();
}
</script>
</body>
</html>
更新於：2023年2月16日
147 次檢視
廣告