Wie mache ich die Kontrollecken einer Ellipse mit FabricJS transparent?-js-Tutorial-php.cn

Wie mache ich die Kontrollecken einer Ellipse mit FabricJS transparent?

WBOY

Freigeben： 2023-08-24 18:33:02

nach vorne

569 Leute haben es durchsucht

如何使用 FabricJS 使椭圆的控制角透明？

In diesem Tutorial erfahren Sie, wie Sie die Kontrollecken von Ellipse mithilfe von FabricJS transparent machen. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, erstellen wir eine Instanz der Fabric.Ellipse-Klasse und fügen sie der Leinwand hinzu. Mit der Eigenschaft „transparentCorners“ können wir die Kontrollecken der Ellipse transparent machen. Syntax

new fabric.Ellipse( { transparentCorners: Boolean }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft transparentCorners< /em> ist.

Optionsschlüssel

transparentCorners – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, die Kontrollecken des Objekts transparent darzustellen. Der Standardwert ist True.

Beispiel 1

Übergabe der Eigenschaft
transparentCorners als Schlüssel mit dem Wert „false“ Sehen wir uns den Code an, der ein Ellipsenobjekt mit undurchsichtigen Kontrollecken erstellt. Um dies zu erreichen, müssen wir einen „falschen“ Wert an die Eigenschaft
transparentCorners
übergeben.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to make controlling corners of Ellipse transparent using FabricJS?</h2> <p>Select the object and you will notice that the controlling corners are not transparent. Here we have set the <b>transparentCorners</b> property to False. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, rx: 100, ry: 70, fill: "red", transparentCorners: false, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Nach dem Login kopieren
Beispiel 2
Übergabe von
transparentCorners als Schlüssel mit einem „wahren“ Wert In diesem Beispiel übergeben wir das Attribut
transparentCorners
mit einem „wahren“ Wert. Dadurch wird sichergestellt, dass die Kontrollecken transparent gemacht werden. Beachten Sie, dass dies auch das Standardverhalten ist.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Making the controlling corners of an Ellipse transparent using FabricJS</h2> <p>Select the object and you will notice that its controlling coners are now transparent as we have applied the <b>transparentCorners</b> property. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, rx: 100, ry: 70, fill: "red", transparentCorners: true, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie mache ich die Kontrollecken einer Ellipse mit FabricJS transparent?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!