Wie stelle ich die Farbe einer Kreiskontrollecke mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich die Farbe einer Kreiskontrollecke mit FabricJS ein?

WBOY

Freigeben： 2023-08-23 10:13:14

nach vorne

977 Leute haben es durchsucht

Wie stelle ich die Farbe einer Kreiskontrollecke mit FabricJS ein?

In diesem Tutorial verwenden wir FabricJS, um die Farbe der Kontrollecke eines Kreises festzulegen. Mit der Eigenschaft „cornerColor“ können wir die Farbe der Kontrollecken manipulieren, wenn das Objekt aktiv ist. Syntax

new fabric.Circle({ cornerColor: String }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das Optionen für zusätzliche Anpassungen des Kreises bereitstellt. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des Objekts ändern, die mit der Eigenschaft cornerColor zusammenhängen.

cornerColor – Diese Eigenschaft akzeptiert einen string, der es uns ermöglicht, den Kontrollecken des ausgewählten Objekts eine Farbe zuzuweisen.

CornerColor als Schlüssel übergeben und Farbname als Wert verwenden

Lassen Sie uns ein Beispiel für die Farbänderung mithilfe des Attributs

cornerColor

erhalten. In diesem Fall weisen wir der Taste den Wert „schwarz“ zu, wodurch die Bedienecke schwarz erscheint.

<!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>Setting the colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "black"
         });
         
         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Zuweisen eines RGBA-Werts zur CornerColor-Eigenschaft

Wir können dem

string

Wert des Schlüssels einen RGBA-Wert zuweisen, anstatt nur einen einfachen Farbnamen zu übergeben. RGBA steht für Rot, Grün, Blau und Transparenz (Alpha). Schauen wir uns ein Beispiel an, wie man dies erreichen kann –

<!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>Setting the colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)"
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie stelle ich die Farbe einer Kreiskontrollecke mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!