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

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

王林

Lepaskan： 2023-08-24 14:37:08

ke hadapan

876 orang telah melayarinya

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

Dalam tutorial ini, kita akan belajar cara menggerakkan objek Garisan satu langkah ke atas timbunan 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 menggerakkan objek Garisan satu langkah ke atas timbunan objek lukis, kami menggunakan kaedah bringForward.

Tatabahasa

bringForward(intersecting: Boolean): fabric.Object

Salin selepas log masuk

Parameter

Bersilang - Parameter ini menerima nilai Boolean yang, apabila diberikan nilai "benar", menghantar objek ke objek bersilang atas seterusnya di hadapan. Jika nilai adalah "palsu", ia biasanya akan menghantar objek ke objek seterusnya pada tindanan. Parameter ini adalah pilihan.

Gunakan bawa Majukaedah

Contoh

Mari lihat contoh kod untuk melihat output apabila menggunakan kaedah bringForward. Kaedah bringForward menggerakkan objek satu langkah ke atas timbunan objek lukis. Dalam contoh ini, baris1 dihantar di atas baris2 menggunakan kaedah bringForward.

<!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 bringForward method</h2>
   <p>
      You can see that line1 (blue) has been moved up 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 bringForward method
      line1.bringForward();
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah bringForward

dengan tiga objek dan kekunci persimpangan didayakan

Contoh

Dalam contoh ini, kita menggunakan tiga objek garisan, iaitu line1, line2 dan line3. Walaupun mereka telah ditambahkan pada kanvas dalam susunan berangka, baris1 jelas di atas line3. Ini kerana kami menggunakan kaedah bringForward dengan kekunci persimpangan didayakan, yang menghantar baris1 di atas objek persilangan atas seterusnya (iaitu line3).

<!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 bringForward method with three objects and intersection key enabled</h2>
   <p>
      You can see that the blue line now lies above the green line which is line number 3
   </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([500, 70, 400, 40], {
         stroke: "red",
         strokeWidth: 20,
      });

      // Initiate another Line object
      var line3 = new fabric.Line([200, 30, 30, 90], {
         stroke: "green",
         strokeWidth: 20,
      });

      // Add them all to the canvas
      canvas.add(line1);
      canvas.add(line2);
      canvas.add(line3);

      // Using bringForward method
      line1.bringForward(true);
   </script>
</body>
</html>

Salin selepas log masuk

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