Heim >Web-Frontend >js-Tutorial >Fügen Sie mit FabricJS Muster mit Bildern und Farben zu Polygonen hinzu

Fügen Sie mit FabricJS Muster mit Bildern und Farben zu Polygonen hinzu

WBOYnach vorne: 2023-08-22 20:49:021270Durchsuche

Wir können ein Polygonobjekt erstellen, indem wir eine Instanz von fabric.Polygon erstellen. Ein polygonales Objekt kann durch jede geschlossene Form beschrieben werden, die aus einer Menge verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um Muster und Farben zu Polygonen hinzuzufügen, können wir die Klasse Pattern in FabricJS verwenden.

Grammatik

new fabric.Pattern( options: Object, callback: function )

Parameter

Optionen (optional) − Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für unser Objekt bereitstellt. Mit diesem Parameter können OffsetX, Cross-Origin und viele andere Eigenschaften im Zusammenhang mit dem Muster geändert werden.
Rückruf − Dieser Parameter ist eine Funktion, die nach der Initialisierung des Rückrufs aufgerufen wird. Dieser Parameter ist optional.

Beispiel 1: Erstellen Sie eine Instanz von fabric.Pattern() und fügen Sie sie unserem Polygonobjekt hinzu

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man eine Instanz von fabric.Pattern erstellt und zur Leinwand hinzufügt. Hier erstellen wir ein Polygonobjekt, dessen Form ein Rechteck (ein unregelmäßiges Polygon) ist. Wir initialisieren die Funktion createPattern, die das Muster zu unserem Rechteck hinzufügt. Abschließend rufen wir die Funktion createPattern auf und übergeben ihr die erforderliche URL.

<!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>
      Creating an instance of fabric.Pattern() and adding it to our Polygon object
   </h2>
   <p>You can see that a pattern has been created</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the createPattern function which loads image

      // and adds the image as pattern to the rect object
      function createPattern(url) {
         fabric.util.loadImage(url, function (img) {
            rect.set(
               "fill",
               new fabric.Pattern({
                  source: img,
               })
            );
            canvas.renderAll();
         });
      }
      
      // Initiating a Polygon object
      var rect = new fabric.Polygon(
         [
            { x: 0, y: 0 },
            { x: 500, y: 0 },
            { x: 500, y: 200 },
            { x: 0, y: 200 },
         ],
         {
            left: 50, 
            top: 20,
            stroke: "black",
         }
      );
      
      // Adding it to the canvas
      canvas.add(rect);

      // Calling the createPattern function
      createPattern("https://www.tutorialspoint.com/images/logo.png");
   </script>
</body>
</html>

Beispiel 2: Hinzufügen eines Musters aus Bildern und Farben zu unseren Polygonen

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man ein dynamisches Muster mit Bildern und Farben für unser Polygonobjekt erstellt. In diesem Fall haben wir die Methode fromURL verwendet, um das Bild zu laden und ein fabric.StaticCanvas()-Objekt zu initialisieren, das eine der Hauptrenderingoberflächen von FabricJS ist und für die Erstellung dynamischer Muster von entscheidender Bedeutung ist.

Wir haben die Methode setBackgroundColor verwendet, um die Hintergrundfarbe für das Polygon festzulegen. Zum Schluss fügen wir das Polygonobjekt zur Leinwand hinzu.

<!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>Adding a pattern with Image and Colour to our Polygon</h2>
   <p>You can see that a pattern with image and colour has been created and further use the number field to change the pattern density</p>
   <label>Add a width value(50-500): </label>
   <input type="number" id="changeWidth" value="50"/>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the colour that we want to fill the pattern with
      var imgColor = "rgba(216,228,188,0.5)";
 
      // Using fromURL method to load image and add to canvas
 
      // further setting the dimensions and background colour
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function (img) {
            img.scaleToWidth(100);
            img.scaleToHeight(90);
            var patternSourceCanvas = new fabric.StaticCanvas();
            patternSourceCanvas.add(img);
            patternSourceCanvas.renderAll();
            patternSourceCanvas.setBackgroundColor(
               imgColor,
               patternSourceCanvas.renderAll.bind(patternSourceCanvas)
            );
            
            // Initiating a Pattern object
            var pattern = new fabric.Pattern({
               source: patternSourceCanvas.getElement(),
               repeat: "repeat",
            });
            
            // Adding a polygon object to the canvas
            canvas.add(
               
               // Initiate a polygon object
               new fabric.Polygon(
                  [
                     { x: -100, y: -175 },
                     { x: 100, y: -175 },
                     { x: 200, y: 0 },
                     { x: 100, y: 175 },
                     { x: -100, y: 175 },
                     { x: -200, y: 0 },
                  ],
                  {
                     top: 30,
                     left: 10,
                     strokeWidth: 3,
                     stroke: "#96c8a2",
                     fill: pattern,
                     objectCaching: false,
                     scaleX: 0.5,
                     scaleY: 0.5,
                  }
               )
            );
            
            // Using getElementById and targeting the input tag with the id as "changeWidth"
            document.getElementById("changeWidth").oninput = function () {
               img.scaleToWidth(parseInt(this.value, 10));
               patternSourceCanvas.setDimensions({
                  width: img.getScaledWidth(),
                  height: img.getScaledHeight(),
               });
               canvas.requestRenderAll();
            };
         }
      );
   </script>
 </body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mit FabricJS Bilder und Farben zu Polygonen hinzufügt.

Das obige ist der detaillierte Inhalt vonFügen Sie mit FabricJS Muster mit Bildern und Farben zu Polygonen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich Typescript mit nativem ES6 Promise?Nächster Artikel：Wie verwende ich Typescript mit nativem ES6 Promise?

In Verbindung stehende Artikel

Mehr sehen