Heim > Artikel > Web-Frontend > 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:021163Durchsuche
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!