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.
calcOwnMatrix(): Array
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>
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>
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!