我們可以透過建立一個 fabric.Polygon 的實例來建立一個多邊形物件。多邊形物件可以由一組相連的直線段組成的任何封閉形狀來描述。由於它是FabricJS的基本元素之一，我們也可以透過套用屬性如角度、不透明度等來輕鬆地自訂它。為了讓多邊形添加圖案和顏色，我們可以使用FabricJS中的Pattern類別。
new fabric.Pattern( options: Object, callback: function )
options (optional) − This parameter is an which provides additional customizations to our object. Using this parameter offsetX, cross-origin and a lot of other properties can be changed related to the Pattern.
callback − 此參數是一個在回呼初始化後呼叫的函數。此參數是可選的。
讓我們看一個程式碼範例，看看如何建立一個 fabric.Pattern 的實例並將其新增到畫布中。在這裡，我們建立了一個多邊形對象，它的形狀是一個矩形（一個不規則的多邊形）。我們初始化了 createPattern 函數，該函數將把圖案加到我們的矩形中。最後，我們呼叫了 createPattern 函數，並將所需的 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>
讓我們來看一個程式碼範例，看看如何為我們的多邊形物件建立一個帶有圖像和顏色的動態模式。在這種情況下，我們使用了fromURL方法來載入圖像，並初始化了一個fabric.StaticCanvas()對象，這是FabricJS的主要渲染表面之一，對於創建動態模式至關重要。
我們使用了 setBackgroundColor 方法來為多邊形設定背景顏色。最後，我們將多邊形物件加入畫布。
<!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>
在本教學中，我們使用了兩個簡單的範例來示範如何使用FabricJS為多邊形新增影像和顏色的模式。
以上是使用FabricJS向多邊形添加帶有圖像和顏色的圖案的詳細內容。更多資訊請關注PHP中文網其他相關文章！
