Bagaimana untuk melaksanakan salin-tampal secara pemrograman menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melaksanakan salin-tampal secara pemrograman menggunakan FabricJS?

王林

Lepaskan： 2023-09-17 17:37:06

ke hadapan

1240 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 salin-tampal secara pemrograman, kita perlu menggunakan kaedah klon.

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. Ia mestilah dalam bentuk tatasusunan.

Contoh 1: Salin-tampal program pada poligon

Mari lihat contoh kod untuk memahami cara melaksanakan salin-tampal pada poligon secara pengaturcaraan. Kita perlu mengklonkan apa yang kita salin dan menambahkannya pada papan keratan supaya kita boleh menampalnya kemudian. Untuk melakukan ini, kami menggunakan kaedah klon dalam fungsi Salin(), yang akan mengklon objek yang dipilih secara aktif dan menyimpannya ke papan keratan. Selain itu, kami mencipta fungsi Paste() yang akan menambah objek klon pada kanvas kami, dalam kes ini poligon, 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 copy paste programmatically on Polygon</h2>
   <p>
      You can select the object, click on copy and then click on paste button to see object duplication in action
   </p>
   <button onclick="Copy()" style="padding: 3px">copy</button>
   <button onclick="Paste()" style="padding: 3px">paste</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 Copy function which copies
      
      // the object to clipboard
      function Copy() {
         canvas.getActiveObject().clone(function (cloned) {
            _clipboard = cloned;
         });
      }
      
      // Initiating Paste function which pastes
      // the object to canvas, adds offset and 
      // makes the object active
      function Paste() {
         _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,
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Laksanakan salin-tampal secara atur cara pada Bulatan

Mari lihat contoh kod untuk memahami cara melaksanakan salin-tampal secara pemrograman pada bulatan menggunakan FabricJS. Dalam kes ini, bukannya objek poligon, kami memulakan bulatan dengan jejari 40 dan menambahnya pada kanvas. Begitu juga, fungsi Copy() dan Paste() boleh digunakan dengan pelbagai objek selain Poligon.

<!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 copy paste programmatically on Circle</h2>
   <p>
      You can select the object, click on copy and then click on paste button to see object duplication in action
   </p>
   <button onclick="Copy()" style="padding: 3px">copy</button>
   <button onclick="Paste()" style="padding: 3px">paste</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 Copy function which copies
      
      // the object to clipboard
      function Copy() {
         canvas.getActiveObject().clone(function (cloned) {
            _clipboard = cloned;
         });
      }
      
      // Initiating Paste function which pastes
      // the object to canvas, adds offset and
      // makes the object active
      function Paste() {
         _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,
      });
      
      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara melaksanakan salin-tampal secara pemrograman menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan salin-tampal secara pemrograman menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!