首頁 > web前端 > js教程 > 如何使用 FabricJS 使多邊形物件對傾斜事件做出反應?

如何使用 FabricJS 使多邊形物件對傾斜事件做出反應?

WBOY
發布: 2023-09-16 09:17:14
轉載
1075 人瀏覽過

如何使用 FabricJS 使多边形对象对倾斜事件做出反应?

我們可以透過建立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>

       

      // 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 方法,它是一個允許我們指定要更改的屬性的設定器。在這裡,每當我們傾斜多邊形時,填滿顏色就會變成「綠色」。

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>

       

      // 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 使多邊形物件對傾斜事件做出反應?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板