FabricJS - Bagaimana untuk menetapkan kedudukan objek Line berbanding dengan asal?-tutorial js-php.cn

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

王林

Lepaskan： 2023-08-25 12:13:08

ke hadapan

1515 orang telah melayarinya

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

Salin selepas log masuk

Parameter

pos - Hartanah ini menerima nilai fabrik.Point yang membolehkan kita menetapkan kedudukan baharu objek. < /p>
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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!