資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 FabricJS 為多邊形新增影像和顏色圖案
我們可以透過建立 fabric.Polygon 的例項來建立一個多邊形物件。多邊形物件可以由任何由一組連線的直線段組成的封閉形狀來表示。由於它是 FabricJS 的基本元素之一，因此我們還可以透過應用角度、不透明度等屬性輕鬆地對其進行自定義。為了為多邊形新增影像和顏色的圖案，我們可以在 FabricJS 中使用 Pattern 類。
語法
new fabric.Pattern( options: Object, callback: function )
引數
options (可選) − 此引數是一個 Object，它為我們的物件提供了額外的自定義選項。使用此引數，可以更改與 Pattern 相關的 offsetX、cross-origin 和許多其他屬性。
callback − 此引數是一個 function，在回撥初始化後呼叫。此引數是可選的。
示例 1：建立 fabric.Pattern() 的例項並將其新增到我們的多邊形物件中
讓我們來看一個程式碼示例，瞭解如何建立 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://tutorialspoint.tw/images/logo.png");
</script>
</body>
</html>
示例 2：為我們的多邊形新增影像和顏色的圖案
讓我們來看一個程式碼示例，瞭解如何為我們的多邊形物件建立具有影像和顏色的動態圖案。在這種情況下，我們使用 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://tutorialspoint.tw/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 為多邊形新增影像和顏色的圖案。
更新於： 2022-12-28
918 次瀏覽
廣告