Wie deaktiviere ich die zentrierte Skalierung eines Kreises mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die zentrierte Skalierung eines Kreises mit FabricJS?

WBOY

Freigeben： 2023-09-07 17:13:02

nach vorne

1453 Leute haben es durchsucht

如何使用 FabricJS 禁用 Circle 的居中缩放？

In diesem Tutorial erfahren Sie, wie Sie die zentrierte Skalierung eines Kreises mithilfe von FabricJS deaktivieren. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. Wenn Sie durch ein Steuerelement skalieren, weisen Sie der Eigenschaft „centeredScaling“ einen wahren Wert zu und verwenden Sie dabei die Mitte als Transformationsursprung des Objekts. Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Kreis zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Objekts ändern, die sich auf die Eigenschaft centeredScaling beziehen Wert. Wenn diese Eigenschaft True ist, verwendet das Objekt den Mittelpunkt als Transformationsursprung.
? em > Eigenschaft ist aktiviert. Wenn wir ein Objekt vergrößern, ist der Ursprung der Transformation der Mittelpunkt des Kreises.

<!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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: true
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Wir können die Eigenschaft „centeredScaling“ deaktivieren, indem wir einen falschen Wert dafür angeben. Dadurch wird der Kreis gezwungen, den Mittelpunkt des Kreises nicht mehr als Mittelpunkt der Transformation zu verwenden. Hier ist ein Code, um es zu beweisen

<!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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die zentrierte Skalierung eines Kreises mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!