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

Wie deaktiviere ich die zentrierte Skalierung eines Rechtecks mit FabricJS?

WBOY

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

nach vorne

1185 Leute haben es durchsucht

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)

Nach dem Login kopieren

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.

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>

Nach dem Login kopieren

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!