Wie deaktiviere ich die Mittenskalierung von Dreiecken mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die Mittenskalierung von Dreiecken mit FabricJS?

WBOY

Freigeben： 2023-09-15 15:33:08

nach vorne

1104 Leute haben es durchsucht

如何使用 FabricJS 禁用三角形的中心缩放？

In diesem Tutorial erfahren Sie, wie Sie die zentrierte Skalierung eines Dreiecks mit FabricJS deaktivieren. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Wenn Sie ein Objekt über ein Steuerelement skalieren, weisen Sie der Eigenschaft „centeredScaling“ einen wahren Wert zu, und der Ursprung der Transformation ist sein Mittelpunkt.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut centeredScaling ändern.

< /ul>
Optionsschlüssel
centeredScaling – Diese Eigenschaft akzeptiert einen booleschen-Wert und ermöglicht uns zu steuern, ob das Objekt seinen Mittelpunkt als Transformationsursprung verwenden soll.
Beispiel 1
Übergeben Sie centeredScaling als Schlüssel und weisen Sie ihm einen „wahren“ Wert zu
Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich ein Dreiecksobjekt verhält, wenn die Eigenschaft „centeredScaling“ aktiviert ist. Wenn wir ein Objekt vergrößern, ist der Ursprung der Transformation der Mittelpunkt des Dreiecks.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing centeredScaling as key and assigning it a "true" value</h2> <p>Try scaling the triangle to see that it is using its center as the center of transformation.</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: true, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Beispiel 2
Deaktivieren des Attributs „centeredScaling“
Wir können das Attribut centeredScaling deaktivieren, indem wir ihm einen False-Wert zuweisen. Dadurch wird der Mittelpunkt des Dreiecks nicht mehr als Mittelpunkt der Transformation verwendet. Hier ist ein Codebeispiel zur Demonstration von
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Disabling the centeredScaling property</h2> <p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: false, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Mittenskalierung von Dreiecken mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!