cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mencari matriks terjemahan objek Poligon menggunakan FabricJS?

Bagaimana untuk mencari matriks terjemahan objek Poligon menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-08-23 16:53:48965semak imbas

如何使用 FabricJS 查找 Polygon 对象的平移矩阵？

Terjemahan meluncurkan objek ke jarak tetap dalam arah tertentu. 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 terjemahan, kami menggunakan kaedah _calcTranslateMatrix(). Kaedah ini mengembalikan tatasusunan [ 1, 0, 0, 1, A, B] dengan nilai yang diberikan; dengan A ialah koordinat X dan B ialah koordinat Y.

Tatabahasa

_calcTranslateMatrix(): Array

Contoh 1: Menggunakan kaedah _calcTranslateMatrix

Mari lihat contoh kod tentang cara mencari matriks terjemahan poligon menggunakan kaedah _calcTranslateMatrix. 

<!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 _calcTranslateMatrix method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the translation 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: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 60,
            left: 140,
            fill: "red",
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using _calcTranslateMatrix method
      console.log(
         "The translation matrix of the polygon instance is: ", polygon._calcTranslateMatrix()
      );
   </script>
</body>
</html>

Contoh 2: Menggunakan kaedah _calcTranslateMatrix dan kaedah Skala

Mari kita lihat contoh kod untuk memahami cara nilai tatasusunan yang dikembalikan dipengaruhi apabila kita menggunakan penjelmaan pada objek poligon. Dalam kes ini, kami menggunakan kaedah skala, yang menskala objek secara seragam dalam arah x dan y. Penskalaan mengubah nilai matriks seperti yang ditunjukkan di bawah. 

<!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 _calcTranslateMatrix method along with scale method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the translation 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: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 60,
            left: 140,
            fill: "red",
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using scale method
      polygon.scale(2);
      
      // Using _calcTranslateMatrix method
      console.log(
         "The translation matrix of the polygon instance is: ", polygon._calcTranslateMatrix()
      );
   </script>
</body>
</html>

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara mencari matriks terjemahan objek Poligon menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk mencari matriks terjemahan objek Poligon menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menukar atribut src elemen img dalam JavaScript/jQuery?Artikel seterusnya：Bagaimana untuk menukar atribut src elemen img dalam JavaScript/jQuery?

Artikel berkaitan

Lihat lagi