使用FabricJS向多邊形添加帶有圖像和顏色的圖案
我們可以透過建立一個 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 − 此參數是一個在回呼初始化後呼叫的函數。此參數是可選的。
範例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://www.tutorialspoint.com/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 id="Adding-a-pattern-with-Image-and-Colour-to-our-Polygon">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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
