多边形总是将第一个点连接到最后一个点以形成一个封闭区域,而折线则不然。这可以通过下面给出的例子来证明。
语法new fabric.polyline(points: array, options: object)
参数points - 此参数接受一个array,它表示组成折线对象的点数组。
选项(可选) - 此参数是一个对象,它为我们的对象提供额外的自定义。使用此参数可以更改与 polyline 对象相关的原点、笔划宽度和许多其他属性。
示例 1创建 fabric.polyline() 实例并将其添加到画布让我们看一个代码示例,了解如何将折线对象添加到画布中。唯一必需的参数是 points 数组,而第二个参数是可选的 options 对象。此外,我们还将在 polygon 中使用相同的 points 数组来证明差异。
<!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.polyline() and adding it to our canvas</h2> <p>you can see that the polyline object doesn’t connects start to end</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 a points array var points = [ { x: 200, y: 150 }, { x: 0, y: 100 }, { x: 100, y: 0 }, { x: 200, y: 100 }, ]; // initiating a polyline object var polyline = new fabric.polyline(points, { left: 100, top: 40, fill: white, strokewidth: 4, stroke: green, }); // adding it to the canvas canvas.add(polyline); </script></body></html>
示例 2创建fabric.polygon()的实例并将其添加到我们的画布让我们看一个代码示例,了解如何将多边形对象添加到画布中。唯一必需的参数是 points 数组,而第二个参数是可选的选项对象,我们将提供与折线示例中相同的选项对象。
<!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.polygon() and adding it to our canva</h2> <p>you can see that the polygon object connects start to end to make a closed area</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 a points array var points = [ { x: 200, y: 150 }, { x: 0, y: 100 }, { x: 100, y: 0 }, { x: 200, y: 100 }, ]; // initiating a polyline object var polygon = new fabric.polygon(points, { left: 100, top: 40, fill: white, strokewidth: 4, stroke: green, }); // adding it to the canvas canvas.add(polygon); </script></body></html>
以上就是fabricjs 中的多边形与折线有何不同?的详细内容。
