FabricJS - Cari matriks transformasi yang mewakili perubahan semasa objek poligon?-tutorial js-php.cn

FabricJS - Cari matriks transformasi yang mewakili perubahan semasa objek poligon?

PHPz

Lepaskan： 2023-08-29 12:17:10

ke hadapan

1289 orang telah melayarinya

FabricJS – 找到表示多边形对象当前变换的变换矩阵？

Kita boleh mencipta objek Poligon dengan mencipta contoh fabric.Polygon. Objek poligon boleh dicirikan sebagai sebarang bentuk tertutup yang terdiri daripada satu set segmen garis lurus yang bersambung. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mencari matriks transformasi yang mewakili transformasi semasa, kami menggunakan kaedah calcOwnMatrix.

Tatabahasa

calcOwnMatrix(): Array

Salin selepas log masuk

Contoh 1: Menggunakan kaedah calcOwnMatrix

Mari kita lihat contoh kod tentang cara menggunakan kaedah calcOwnMatrix untuk mencari matriks transformasi yang mewakili perubahan semasa poligon. Anda boleh membuka konsol daripada alat pembangunan untuk melihat nilai tatasusunan yang dipaparkan.

<!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>Using the calcOwnMatrix method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the transform matrix of the polygon instance
   </p>
   <canvas id="canvas"></canvas>
   <script> 
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            skewX: 15,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using calcOwnMatrix method
      console.log(
         "The transform matrix which represents current transformation of the polygon instance is: ",
         polygon.calcOwnMatrix()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Menggunakan kaedah calcOwnMatrix dan sifat ScaleX

Mari kita lihat contoh kod untuk memahami cara nilai tatasusunan yang dikembalikan dipengaruhi apabila kita menggunakan penskalaan mendatar pada objek poligon. Di sini, kami menghantar nilai 2 kepada sifat scaleX. Ini memastikan objek poligon kami berskala 2x secara mendatar. Kita juga boleh melihat dalam konsol bahawa nilai indeks ke-0 tatasusunan yang dikembalikan telah berubah. Ini kerana indeks ke-0 mewakili nilai scaleX.

<!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>Using the calcOwnMatrix method along with scaleX property</h2>
   <p>
      You can open console from dev tools and see that the logged output has changed
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            skewX: 15,
            scaleX: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using calcOwnMatrix method
      console.log(
         "The transform matrix which represents current transformation of the polygon instance is: ",
         polygon.calcOwnMatrix()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara menggunakan FabricJS untuk mencari matriks transformasi yang mewakili perubahan semasa objek Poligon.

Atas ialah kandungan terperinci FabricJS - Cari matriks transformasi yang mewakili perubahan semasa objek poligon?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!