FabricJS - Bagaimana untuk memindahkan objek garis ke kedudukan indeks tertentu dalam timbunan objek draw?-tutorial js-php.cn

FabricJS - Bagaimana untuk memindahkan objek garis ke kedudukan indeks tertentu dalam timbunan objek draw?

王林

Lepaskan： 2023-08-23 14:06:20

ke hadapan

1315 orang telah melayarinya

FabricJS - 如何将线对象移动到绘制对象堆栈中的特定索引位置？

Dalam tutorial ini, kita akan belajar cara mengalihkan objek Line ke kedudukan indeks yang ditentukan dalam tindanan objek draw menggunakan FabricJS. Elemen Line ialah salah satu elemen asas yang disediakan oleh 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 Garis ke kedudukan indeks yang ditentukan dalam tindanan objek lukisan, kami menggunakan kaedah moveTo.

Tatabahasa

moveTo(index: Number): fabric.Object

Salin selepas log masuk

Parameter

indeks − Parameter ini menerima nilai Number yang menentukan ke tahap mana dalam tindanan objek cabutan yang ingin kita alihkan objek.

Gunakan kaedah moveTo

Contoh

Mari lihat contoh kod untuk melihat output apabila menggunakan kaedah moveTo. Kaedah moveTo mengalihkan objek ke tahap yang ditentukan dalam tindanan objek seri. Dalam kes ini, gunakan kaedah moveTo untuk menghantar line2 ke indeks ke-0.

<!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 moveTo method</h2>
   <p>
      You can see that line2 (red) has been moved to the 0th index 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 moveTo method
      line2.moveTo(0);
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah moveTo dengan tiga objek

Contoh

Dalam contoh ini, kita menggunakan tiga objek garisan, iaitu line1, line2 dan line3. Walaupun ia ditambahkan pada kanvas dalam susunan berangka, line3 jelas berada di belakang line2 pada kedudukan indeks pertama. Ini kerana kami menggunakan kaedah moveTo, yang mengalihkan line3 ke kedudukan indeks pertama, manakala line1 dan line2 masing-masing menduduki kedudukan indeks ke-0 dan ke-2 dalam tindanan objek lukisan .

<!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 moveTo method with three objects</h2>
   <p>
      You can see that line3 (green) lies in the 1st index which is middle position in stack
   </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,
      });

      // 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 moveTo method
      line3.moveTo(1);
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memindahkan objek garis ke kedudukan indeks tertentu dalam timbunan objek draw?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!