Wie stelle ich mit FabricJS die Farbe der Kontrollecken eines Rechtecks ein?-js-Tutorial-php.cn

Wie stelle ich mit FabricJS die Farbe der Kontrollecken eines Rechtecks ein?

王林

Freigeben： 2023-09-11 12:01:22

nach vorne

1457 Leute haben es durchsucht

如何使用 FabricJS 设置矩形控制角的颜色？

In diesem Tutorial legen wir die Farbe der Rechtecksteuerecken mithilfe von FabricJS fest. Mit der Eigenschaft „cornerColor“ können wir die Farbe der Kontrollecken manipulieren, während das Objekt aktiv ist. Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional)
– Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften im Zusammenhang mit dem Objekt mit „cornerColor“ als Attribut ändern.

cornerColor
– Diese Eigenschaft akzeptiert einen String, der es uns ermöglicht, die Zuweisung von Farben zu den Ecken von Objekten zu steuern, wenn diese aktiv ausgewählt werden. Der Standardwert ist rgb(178.204.255).

Übergabe von

cornerColor als Schlüssel mit Farbe als Wert Sehen wir uns ein Codebeispiel zum Ändern der Farbe mithilfe der Eigenschaft „cornerColor“ an. existieren In diesem Fall weisen wir der Taste den Wert „grün“ zu Die Kontrollecken erscheinen grün.

<!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 cornerColor as key with a color name as value</h2>
   <p>Select the rectangle to see the colour of its controlling corners</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "green",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Zuweisen eines RGBA-Werts zum Attribut

cornerColor Anstatt einen einfachen Farbnamen als String

-Wert an den Schlüssel zu übergeben, können wir auch einen RGBA-Wert zuweisen. RGBA steht für Rot, Grün, Blau und Alpha, wobei Alpha für die Deckkraft steht. Schauen wir uns ein Codebeispiel an, um zu veranschaulichen, wie das geht:

<!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>Assigning an RGBA value to the cornerColor property</h2>
   <p>Select the rectangle to see the colour of its controlling corners</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "rgba(34,139,34,0.9)",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

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