使用FabricJS向多边形添加带有图像和颜色的图案

我们可以通过创建一个 fabric.Polygon 的实例来创建一个多边形对象。多边形对象可以由一组相连的直线段组成的任何封闭形状来描述。由于它是FabricJS的基本元素之一，我们还可以通过应用属性如角度、不透明度等来轻松地自定义它。为了给多边形添加图案和颜色，我们可以使用FabricJS中的Pattern类。

语法

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

参数

• options (optional) − This parameter is an Object 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 传递给它。

   
   
 

   

      Creating an instance of fabric.Pattern() and adding it to our Polygon object
   
   
You can see that a pattern has been created

							

								
								

									ImagetoCartoon
									
一款在线AI漫画家，可以将人脸转换成卡通或动漫风格的图像。
								
								下载 
							
						
   
   

示例2：在我们的多边形中添加图像和颜色的模式

让我们看一个代码示例，看看如何为我们的多边形对象创建一个带有图像和颜色的动态模式。在这种情况下，我们使用了fromURL方法来加载图像，并初始化了一个fabric.StaticCanvas()对象，这是FabricJS的主要渲染表面之一，对于创建动态模式至关重要。

我们使用了 setBackgroundColor 方法来为多边形设置背景颜色。最后，我们将多边形对象添加到画布中。

   
   


   
Adding a pattern with Image and Colour to our Polygon
   
You can see that a pattern with image and colour has been created and further use the number field to change the pattern density
   Add a width value(50-500): 
   
   
   
 
 

结论

在本教程中，我们使用了两个简单的示例来演示如何使用FabricJS向多边形添加图像和颜色的模式。