Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie deaktiviere ich die Kreisselektivität mit FabricJS?

WBOY
Freigeben: 2023-09-01 19:41:02
nach vorne
832 Leute haben es durchsucht

如何使用 FabricJS 禁用 Circle 的选择性?

In diesem Tutorial erfahren Sie, wie Sie die Kreisselektivität mit FabricJS deaktivieren. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. Um ein Objekt zu ändern, müssen wir es in FabricJS auswählen. Wir können dieses Verhalten jedoch ändern, indem wir das Attribut selectable verwenden.

Syntax

new fabric.Circle({ selectable: Boolean }: Object)
Nach dem Login kopieren

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie die Eigenschaften des Objekts im Zusammenhang mit dem Attribut „selectable“ ändern, z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

  • Optionsschlüssel

    • Auswählbar – Diese Eigenschaft akzeptiert einen booleschen-Wert. Wenn ihm der Wert „falsch“ zugewiesen wird, kann das Objekt nicht zur Änderung ausgewählt werden. Der Standardwert ist True< /strong>.

    • Beispiel 1

    Standardverhalten oder

    Optionale Eigenschaft auf „true“ gesetzt < /em>Sehen wir uns ein Beispiel an, um zu verstehen, wie sich ein Objekt standardmäßig verhält, wenn die auswählbare Eigenschaft auf „True“ gesetzt ist. Wenn die selectable-Eigenschaft auf true gesetzt ist, können wir ein Objekt auswählen, es auf der Leinwand verschieben und ändern.

    <!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>Disabling the selectability of circle using FabricJs</h2>
          <p>Here you can select the object (circle) and move it around freely. This is the default behavior. Here we have not used the <b>selectable</b> property but by default, it is set to True. </p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var circle = new fabric.Circle({
                left: 115,
                top: 50,
                radius: 50,
                fill: "#85bb65"
             });
             canvas.add(circle);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </script>
       </body>
    </html>
    Nach dem Login kopieren

    Beispiel 2

    Auswählbare Eigenschaft als Schlüssel übergeben

    In diesem Beispiel sind wir eine

    auswählbare

    Eigenschaft. Das bedeutet, dass wir keine kreisförmigen Objekte mehr zur Änderung auswählen können.

    <!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>Disabling the selectability of circle using FabricJs</h2>
          <p>Now you can no longer select the circle because we have set <b>selectable</b> as False. </p>
          <canvas id="canvas"></canvas>
       
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var circle = new fabric.Circle({
                left: 115,
                top: 50,
                radius: 50,
                fill: "#85bb65",
                selectable: false
             });
             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 deaktiviere ich die Kreisselektivität 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!