FabricJS - Melaksanakan penyalinan objek secara pemrograman pada poligon?-tutorial js-php.cn

FabricJS - Melaksanakan penyalinan objek secara pemrograman pada poligon?

WBOY

Lepaskan： 2023-08-24 11:05:07

ke hadapan

1305 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 melaksanakan penyalinan objek secara pemrograman, kita perlu menggunakan kaedah klon untuk melaksanakan kawalan pendua

Tatabahasa

clone( callback: Object, propertiesToInclude: Array)

Salin selepas log masuk

Parameter

Panggil balik(pilihan) - Parameter ini ialah fungsi panggil balik yang dipanggil melalui klon.
propertiesToInclude (pilihan) - Parameter ini termasuk sebarang sifat tambahan yang ingin kami sertakan dalam contoh kanvas klon. Ini mestilah dalam bentuk tatasusunan.

Contoh 1: Penyalinan objek terprogram pada Poligon

Mari kita lihat contoh kod untuk memahami cara melaksanakan penyalinan objek pada poligon. Mula-mula, kita memulakan objek poligon dan tatasusunan titik masing-masing dan menambahnya pada papan keratan. Kami juga mempunyai butang yang apabila diklik mencetuskan fungsi duplikat(). duplicate() akan mendapatkan objek daripada papan keratan dan mengklon objek yang disalin menggunakan offset dan menambahnya pada kanvas menggunakan canvas.add.

<!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>Implementing object duplication programmatically on Polygon</h2>
   <p>
      You can click on Duplicate button to see object duplication in action
   </p>
   <button onclick="duplicate()" style="padding: 3px">Duplicate</button>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating duplicate() function which pastes
      
      // the object to canvas, adds offset and
      
      // makes the object active
      function duplicate() {
         _clipboard.clone(function (clonedObj) {
            canvas.discardActiveObject();
            clonedObj.set({
               left: clonedObj.left + 10,
               top: clonedObj.top + 10,
               evented: true,
            });
            canvas.add(clonedObj);
            _clipboard.top += 10;
            _clipboard.left += 10;
            canvas.setActiveObject(clonedObj);
            canvas.requestRenderAll();
         });
      }
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 70, y: 50 },
         { x: 0, y: 0 },
         { x: 70, y: 0 },
      ];
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         scaleX: 2,
         scaleY: 2,
      });
      
      // Clone the object to clipboard
      polygon.clone(function (cloned) {
         _clipboard = cloned;
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Laksanakan salinan objek secara pemrograman pada Bulatan

Mari kita lihat contoh kod untuk melihat cara melaksanakan penyalinan objek secara pemrograman pada bulatan menggunakan FabricJS. Dalam kes ini kita bermula dengan bulatan dan bukannya objek poligon dan mengikuti proses yang sama. Oleh itu, salinan bulatan akan dibuat.

<!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>Implementing object duplication programmatically on Circle</h2>
   <p>
      You can click on Duplicate button to see object duplication in action
   </p>
   <button onclick="duplicate()" style="padding: 3px">Duplicate</button>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating duplicate() function which pastes
      // the object to canvas, adds offset and
      // makes the object active
      function duplicate() {
         _clipboard.clone(function (clonedObj) {
            canvas.discardActiveObject();
            clonedObj.set({
               left: clonedObj.left + 10,
               top: clonedObj.top + 10,
               evented: true,
            });
            canvas.add(clonedObj);
            _clipboard.top += 10;
            _clipboard.left += 10;
            canvas.setActiveObject(clonedObj);
            canvas.requestRenderAll();
         });
      }
      
      // Initiating a circle object
      var circle = new fabric.Circle({
         left: 100,
         top: 40, 
         fill: "#1e90ff",
         radius: 40,
         strokeWidth: 4,
         stroke: "green",
         scaleX: 2,
         scaleY: 2,
      });
      
      // Clone the object to clipboard
      circle.clone(function (cloned) {
         _clipboard = cloned;
      });
      
      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara melaksanakan penyalinan objek secara pemrograman menggunakan FabricJS.

Atas ialah kandungan terperinci FabricJS - Melaksanakan penyalinan objek secara pemrograman pada poligon?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!