cari

Rumah >hujung hadapan web >tutorial js >FabricJS - Bagaimana untuk menetapkan kedudukan objek Line berbanding dengan asal?

FabricJS - Bagaimana untuk menetapkan kedudukan objek Line berbanding dengan asal?

王林
王林ke hadapan
2023-08-25 12:13:081445semak imbas

FabricJS – 如何设置 Line 对象相对于原点的位置？

Dalam tutorial ini, kita akan belajar cara menetapkan kedudukan objek Line berbanding dengan asal 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 menetapkan kedudukan objek Garis berbanding dengan asal, kami menggunakan kaedah setPositionByOrigin.

Tatabahasa

setPositionByOrigin(pos: fabric.Point, originX: String, originY: String): void

Parameter

  • pos - Hartanah ini menerima nilai fabrik.Point yang membolehkan kita menetapkan kedudukan baharu objek.

  • originX - Hartanah ini menerima nilai String yang membolehkan kita menetapkan asal mendatar. Nilai yang mungkin adalah "kiri", "tengah", atau "kanan".

  • originY - Hartanah ini menerima nilai String yang membolehkan kita menetapkan asal menegak. Nilai yang mungkin adalah "Atas", "Pusat", atau "Bawah".

Jangan gunakan kedudukan lalai kaedah setPositionByOrigin

Contoh

Mari kita lihat contoh kod untuk melihat kedudukan lalai objek Line tanpa menggunakan kaedah setPositionByOrigin. 

<!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>Default position without using the setPositionByOrigin method </h2>
   <p>You can see the default position of the line 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 a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

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

Gunakan setPositionByOriginkaedah

Contoh

Mari lihat contoh kod untuk melihat rupa objek Line apabila menggunakan kaedah setPositionByOrigin. Dalam contoh ini, kami menentukan kedudukan baharu objek dengan memulakan objek Titik dengan koordinat x dan y masing-masing 500 dan 100. Kami akan menetapkan kedudukan baharu objek garis, memikirkan asal mendatarnya sebagai "pusat" dan asal menegaknya sebagai "atas." 

<!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 setPositionByOrigin method</h2>
   <p>You can see the new position of the line 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 a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Initiate a Point object
      var pos = new fabric.Point(500, 100);

      // Using setPositionByOrigin method
      line.setPositionByOrigin(pos, "center", "top");

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

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk menetapkan kedudukan objek Line berbanding dengan asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Program JavaScript untuk mencari nilai maksimum Sum( i*arr), membenarkan hanya putaran tatasusunan yang diberikanArtikel seterusnya：Program JavaScript untuk mencari nilai maksimum Sum( i*arr), membenarkan hanya putaran tatasusunan yang diberikan

Artikel berkaitan

Lihat lagi