我們可以透過建立fabric.Polygon的實例來建立一個Polygon物件。多邊形物件的特徵可以是由一組連接的直線段組成的任何閉合形狀。由於它是 FabricJS 的基本元素之一,我們也可以透過套用角度、不透明度等屬性來輕鬆自訂它。我們使用 skewing 事件來示範多邊形物件在被操作時如何對使用者做出反應。透過控制傾斜。
文法
1 | polygon.on( "skewing" , callbackFunction);
|
登入後複製
範例 1:顯示物件如何回應傾斜事件
讓我們看一個程式碼範例,了解多邊形物件在使用傾斜事件時如何反應。透過按 shift 鍵,然後沿著水平或垂直方向拖曳中間控件,可以在水平和垂直方向上傾斜物件。當物件傾斜時,傾斜事件會持續觸發。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!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>
var canvas = new fabric.Canvas( "canvas" );
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
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 ,
}
);
canvas.add(polygon);
polygon.on( "skewing" , () => {
canvas.renderAll();
console.log( "The polygon object is being skewed" );
});
</script>
</body>
</html>
|
登入後複製
範例 2:發生傾斜時更改填滿顏色
讓我們看一個程式碼範例,以了解如何在發生傾斜事件時更改填滿顏色。我們使用了 set 方法,它是一個允許我們指定要更改的屬性的設定器。在這裡,每當我們傾斜多邊形時,填滿顏色就會變成「綠色」。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!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>
var canvas = new fabric.Canvas( "canvas" );
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
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
}
);
canvas.add(polygon);
polygon.on( "skewing" , () => {
polygon.set( "fill" , "green" )
canvas.renderAll();
});
</script>
</body>
</html>
|
登入後複製
結論
在本教學中,我們使用兩個簡單的範例來示範如何使用 FabricJS 來讓多邊形物件對傾斜事件做出反應。
以上是如何使用 FabricJS 使多邊形物件對傾斜事件做出反應?的詳細內容。更多資訊請關注PHP中文網其他相關文章!