FabricJS - Bagaimana untuk memindahkan objek Line satu langkah ke bawah dalam timbunan objek draw?-tutorial js-php.cn

FabricJS - Bagaimana untuk memindahkan objek Line satu langkah ke bawah dalam timbunan objek draw?

WBOY

Lepaskan： 2023-09-10 14:01:11

ke hadapan

1263 orang telah melayarinya

FabricJS – 如何将 Line 对象在绘制对象堆栈中向下移动一步？

Dalam tutorial ini, kita akan belajar cara menggerakkan objek Garisan satu langkah ke bawah tindanan objek lukis menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk mengalihkan objek Garisan satu langkah ke bawah tindanan objek lukis, kami menggunakan kaedah sendBackwards. . Jika nilai adalah "palsu", ia biasanya menghantar objek selepas objek seterusnya pada timbunan. Parameter ini adalah pilihan.

Menggunakan kaedah

sendBackwards

Contoh Mari kita lihat contoh kod untuk melihat output apabila menggunakan kaedah sendBackwards. Kaedah sendBackwards menggerakkan objek satu langkah ke bawah dalam tindanan objek lukisan. Dalam contoh ini, baris2 dihantar selepas baris1 menggunakan kaedah
sendBackwards

 sendBackwards(intersecting: Boolean): fabric.Object

Salin selepas log masuk

Gunakan kaedah sendBackwards dan dayakan tiga objek serta dayakan kekunci persimpangan

Contoh

Dalam contoh ini, kita menggunakan tiga objek garisan, iaitu line1, line2 dan line3. Walaupun ia telah ditambahkan pada kanvas dalam susunan berangka, line3 jelas berada di belakang

line1

. Ini kerana kami menggunakan kaedah sendBackwards dengan kekunci persimpangan didayakan, yang menghantar

line3

di belakang objek persimpangan bawah seterusnya (iaitu

line1

). p>

<!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 sendBackwards method</h2>
   <p>
      You can see that line2 (red) has been moved down in the stack of drawn objects
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Initiate another Line object
      var line2 = new fabric.Line([200, 70, 70, 40], {
         stroke: "red",
         strokeWidth: 20,
      });
      
      // Add both to the canvas
      canvas.add(line1);
      canvas.add(line2);
      
      // Using sendBackwards method
      line2.sendBackwards();
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memindahkan objek Line satu langkah ke bawah dalam timbunan objek draw?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!