Bagaimana untuk memindahkan objek ke bahagian atas timbunan objek draw dalam IText menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk memindahkan objek ke bahagian atas timbunan objek draw dalam IText menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-05 10:57:06

ke hadapan

832 orang telah melayarinya

如何使用 FabricJS 将对象移动到 IText 中绘制对象堆栈的顶部？

Dalam tutorial ini, kita akan belajar cara mengalihkan objek ke bahagian atas tindanan objek lukisan dalam IText menggunakan FabricJS. Kelas IText telah diperkenalkan dalam FabricJS versi 1.4, yang memanjangkan Fabric.Text dan digunakan untuk mencipta kejadian IText. Kejadian IText memberi kita kebebasan untuk memilih, memotong, menampal atau menambah teks baharu tanpa konfigurasi tambahan. Terdapat juga pelbagai kombinasi kekunci yang disokong dan kombinasi tetikus/sentuh untuk menjadikan teks interaktif yang tidak tersedia dalam Teks.

Namun, Textbox berdasarkan IText membolehkan kami mengubah saiz segi empat tepat teks dan membalutnya secara automatik. Ini tidak berlaku untuk IText, kerana ketinggian tidak melaras berdasarkan pemisah baris. Kita boleh memanipulasi objek IText dengan menggunakan pelbagai sifat. Begitu juga, kita boleh menggunakan kaedah BringToFront untuk mengalihkan objek ke bahagian atas tindanan objek seri.

Tatabahasa

bringToFront(): fabric.Object

Salin selepas log masuk

Contoh 1

Jangan guna kaedah bringToFront

Mari kita lihat contoh kod untuk melihat bagaimana objek IText berkelakuan tanpa menggunakan kaedah BringToFront. Dalam contoh ini, kami memulakan dua objek IText, itext1 dan itext2. Anda boleh perhatikan bahawa teks kedua meliputi teks pertama, menyembunyikannya di belakang.

<!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>Without using the bringToFront method</h2>
   <p> You can see that the first itext object is hidden behind the second itext object </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 an itext object
      var itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });

      // Add it to the canvas
      canvas.add(itext1);
      canvas.add(itext2);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Gunakan kaedah bringToFront

Mari kita lihat contoh kod untuk melihat bagaimana objek IText berkelakuan apabila menggunakan kaedah BringToFront. Dalam kes ini, objek itext1 kami kini akan berada di bahagian atas timbunan, jadi ia tidak lagi tersembunyi di sebalik itext2.

<!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 the bringToFront method</h2>
   <p> You can see that the first itext object is no longer hidden behind the second itext object </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 an itext object
      var itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });
      
      // Add it to the canvas
      canvas.add(itext1);
      canvas.add(itext2);

      // Using the bringToFront method
      itext1.bringToFront();
   </script>
</body>
</html>

Salin selepas log masuk

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