Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?

王林
Freigeben: 2023-09-01 08:29:05
nach vorne
624 Leute haben es durchsucht

如何使用 FabricJS 隐藏三角形的控制边框?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Kontrollrahmen eines Dreiecks ausblenden. 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.

Wir können den Kontrollrahmen auf viele Arten anpassen, z. B. durch Hinzufügen einer bestimmten Farbe, eines gepunkteten Musters usw. Mithilfe des Attributs hasBorders können wir Ränder auch vollständig entfernen.

Syntax

new fabric.Triangle({ hasBorders: 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 Eigenschaften ändern, die sich auf das Objekt beziehen, für das hasBorders ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

  • < /ul>

    Optionsschlüssel

    • hasBorders – Diese Eigenschaft akzeptiert einen booleschen-Wert, der beim Rendern von Kontrollrändern hilft. Bei der Einstellung „False“ wird der Kontrollrahmen nicht gerendert. Der Standardwert ist wahr.

    Beispiel 1

    Das Dreiecksobjekt steuert das Standarderscheinungsbild des Rahmens

    Sehen wir uns ein Codebeispiel an, das das Standarderscheinungsbild des Dreiecksrahmens zeigt. Da der Standardwert der hasBorders-Eigenschaft True ist, werden Rahmen gerendert, wenn das Dreiecksobjekt ausgewählt wird.

    <!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>Default appearance of the controlling borders of a triangle object</h2>
       <p>Select the triangle to see its controlling borders</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: 75,
             width: 90,
             height: 80,
             fill: "#ff878d",
             stroke: "#674846",
             strokeWidth: 5,
          });
    
          // Add it to the canvas
          canvas.add(triangle);
       </script>
    </body>
    </html>
    Nach dem Login kopieren

    Beispiel 2

    HasBorders als Schlüssel übergeben und ihm einen „falschen“ Wert zuweisen

    Wenn die Eigenschaft hasBorders mit dem Wert „False“ angegeben ist, werden Rahmen nicht mehr gerendert. Das bedeutet, dass der Kontrollrahmen ausgeblendet wird, wenn wir das Dreiecksobjekt auswählen.

    <!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 hasBorders as key and assigning it "false"</h2>
       <p>Select the triangle and observe that its controlling borders have not been rendered.</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: 75,
             width: 90,
             height: 80,
             fill: "#ff878d",
             stroke: "#674846",
             strokeWidth: 5,
             hasBorders: false,
          });
    
          // Add it to the canvas
          canvas.add(triangle);
       </script>
    </body>
    </html>
    Nach dem Login kopieren

    Das obige ist der detaillierte Inhalt vonWie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage