Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 20:53:07

ke hadapan

1253 orang telah melayarinya

Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita perlu mencipta contoh kelas fabric.Rect dan menambahkannya pada kanvas. Apabila menskala melalui pengawal, tetapkan sifat centeredScaling kepada benar untuk menggunakan pusat sebagai titik permulaan untuk transformasi objek.

Syntax

new fabric.Rect({ centeredScaling: Boolean }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) − Parameter ini ialah Objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami menggunakan parameter, kursor lebar dan sifat seperti lot, kursor lebar dan warna ini sifat lain boleh diubah berkaitan dengan objek yang berpusatScaling adalah sifat

Contoh 1 didayakan Apabila kita menskalakan objek, asal transformasi ialah pusat segi empat tepat.

rreee

. Lumpuhkan sifat centeredScalingKami boleh melumpuhkan sifat
centeredScaling

<!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>Passing centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the rectangle to see that centered scaling has been enabled</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredScaling: true,
      });

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!