我們可以通過創建fabric.Polygon的實例來創建一個Polygon對象。多邊形對象的特征可以是由一組連接的直線段組成的任何閉合形狀。由于它是 FabricJS 的基本元素之一，我們還可以通過應用角度、不透明度等屬性來輕松自定義它。我們使用 skewing 事件來演示多邊形對象在被操作時如何對用戶做出反應。通過控制傾斜。
語法
polygon.on("skewing", callbackFunction);
登錄后復制
示例 1：顯示對象如何響應傾斜事件
讓我們看一個代碼示例，了解多邊形對象在使用傾斜事件時如何反應。通過按 shift 鍵，然后沿水平或垂直方向拖動中間控件，可以在水平和垂直方向上傾斜對象。當對象傾斜時，傾斜事件會連續觸發。
<!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>Displaying how the object reacts to the skewing event</h2>
<p>
You can keep skewing the object while the console from dev tools is open to see the logged output
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "red",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the skewing event
polygon.on("skewing", () => {
canvas.renderAll();
console.log("The polygon object is being skewed");
});
</script>
</body>
</html>
登錄后復制
示例 2：發生傾斜時更改填充顏色
讓我們看一個代碼示例，以了解如何在發生傾斜事件時更改填充顏色。我們使用了 set 方法，它是一個允許我們指定要更改的屬性的設置器。在這里，每當我們傾斜多邊形時，填充顏色就會變為“綠色”。
<!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>Changing the fill colour when skew happens</h2>
<p>
You can see that the fill colour changes when the polygon is skewed
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "red",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
top: 50,
left: 30,
scaleX: 0.5,
scaleY: 0.5
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the skewing event
polygon.on("skewing", () => {
polygon.set("fill", "green")
canvas.renderAll();
});
</script>
</body>
</html>
登錄后復制
結論
在本教程中，我們使用兩個簡單的示例來演示如何使用 FabricJS 使多邊形對象對傾斜事件做出反應。
以上就是如何使用 FabricJS 使多邊形對象對傾斜事件做出反應？的詳細內容，更多請關注www.92cms.cn其它相關文章！
