Wie kann ich das Ansichtsfenster der Leinwand mit FabricJS anpassen?-js-Tutorial-php.cn

Wie kann ich das Ansichtsfenster der Leinwand mit FabricJS anpassen?

王林

Freigeben： 2023-09-03 10:13:05

nach vorne

689 Leute haben es durchsucht

Wie kann ich das Ansichtsfenster der Leinwand mit FabricJS anpassen?

In diesem Artikel erfahren Sie, wie Sie den Ansichtsbereich einer Leinwand mit FabricJS anpassen. Das Ansichtsfenster ist der für den Benutzer sichtbare Bereich der Leinwand. Wir können das Ansichtsfenster mithilfe der Eigenschaft „viewportTransform“ anpassen, wodurch wir die Transformation des Ansichtsfensters steuern können Document.getElementById () oder

abgeleitet von der ID des Elements selbst. Der FabricJS-Canvas wird auf diesem Element initialisiert.

Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Attribute im Zusammenhang mit der Leinwand ändern, darunter auch viewportTransform ein Attribut. Es akzeptiert ein Array von 6 Werten, die zur Bestimmung der Transformation auf der Ebene verwendet werden. Der Standardwert ist canvas.viewportTransform = [1, 0, 0, 1, 0, 0].
Sehen wir uns ein Codebeispiel an, um zu sehen, wie das Ansichtsfenster der Leinwand angepasst wird. In diesem Beispiel haben wir die Werte [0,7, 0,1, 0,5, 0,9, 20, 50] verwendet, um ScaleX, SkewY, SkewX, ScaleY, Translation
bzw. TranslationY darzustellen.
```
new fabric.Canvas(element: HTMLElement|String, { viewportTransform: Array }: Object)
```
Nach dem Login kopieren
Beispiel 2

Übergeben Sie die viewportTransform-Eigenschaft als Schlüssel mit einem benutzerdefinierten Wert, um das Objekt zu verkleinern

Sehen wir uns ein weiteres Codebeispiel an, das eine Transformation zeigt, die auf 80 % skaliert und ohne Neigung in die untere rechte Ecke schwenkt.

<!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>Customizing the viewport of the canvas using FabricJS </h2>
   <p>Select an area around the object to see the viewports.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         viewportTransform: [0.7, 0.1, 0.5, 0.9, 20, 50]
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red",
      });
      // 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 kann ich das Ansichtsfenster der Leinwand mit FabricJS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!