suchen

Heim >Web-Frontend >js-Tutorial >Wie deaktiviere ich die zentrierte Skalierung eines Rechtecks ​​mit FabricJS?

Wie deaktiviere ich die zentrierte Skalierung eines Rechtecks ​​mit FabricJS?

WBOY
WBOYnach vorne
2023-08-24 20:53:071246Durchsuche

Wie deaktiviere ich die zentrierte Skalierung eines Rechtecks ​​mit FabricJS?

In diesem Tutorial erfahren Sie, wie Sie die zentrierte Skalierung eines Rechtecks ​​mithilfe von FabricJS deaktivieren. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Klasse fabric.Rect erstellen und sie der Leinwand hinzufügen. Wenn Sie über einen Controller skalieren, setzen Sie die Eigenschaft „centeredScaling“ auf „true“, um die Mitte als Ausgangspunkt für die Transformation des Objekts zu verwenden. Syntax

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

Parameter

  • Optionen (optional)

    − Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für unser Rechteck bereitstellt, z. B. Eigenschaften wie Farbe, Cursor, Strichstärke und vieles mehr Andere Eigenschaften können in Bezug auf das Objekt geändert werden, dessen Eigenschaft „centeredScaling“ ist.

    • Beispiel 1 ist aktiviert. Wenn wir das Objekt vergrößern, ist der Ursprung der Transformation die Mitte des Rechtecks Deaktivieren Sie die Eigenschaft „centeredScaling“

Wir können die Eigenschaft „centeredScaling“ deaktivieren, indem Sie ihr „False“ zuweisen. Dadurch wird der Mittelpunkt des Rechtecks ​​nicht mehr als Mittelpunkt der Transformation verwendet. Hier ist ein Codebeispiel, um dies zu demonstrieren – 
    <!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>

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

Boolean Object using Property 对象 this fabric
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie zeige ich die Ladeanzeige in React Native an?Nächster Artikel：Wie zeige ich die Ladeanzeige in React Native an?

In Verbindung stehende Artikel

Mehr sehen