Heim > Artikel > Web-Frontend > Wie kann ich das Ansichtsfenster der Leinwand mit FabricJS anpassen?

Wie kann ich das Ansichtsfenster der Leinwand mit FabricJS anpassen?

王林nach vorne: 2023-09-03 10:13:05680Durchsuche

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)
```
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>

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!

对象 canvas

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie überprüfe ich den Typ einer Variablen oder eines Objekts in JavaScript?Nächster Artikel：Wie überprüfe ich den Typ einer Variablen oder eines Objekts in JavaScript?

In Verbindung stehende Artikel

Mehr sehen