我们可以通过创建一个 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 − 此参数是一个在回调初始化后调用的函数。此参数是可选的。
让我们看一个代码示例,看看如何创建一个 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中文网其它相关文章!
已抢186921个
抢已抢67425个
抢已抢353541个
抢已抢668046个
抢已抢123371个
抢已抢25115个
抢