数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 FabricJS 的 Polygon 类创建五角星？
我们可以通过创建 fabric.Polygon 的实例来创建一个 Polygon 对象。多边形对象可以由任何由一组连接的直线段组成的闭合形状来表示。由于它是 FabricJS 的基本元素之一，因此我们也可以通过应用角度、不透明度等属性轻松地对其进行自定义。
语法
new fabric.Polygon( points: Array, options: Object )
参数
points − 此参数接受一个数组，该数组表示构成多边形对象的点的数组。
options（可选）− 此参数是一个对象，它为我们的对象提供额外的自定义功能。使用此参数，可以更改与 Polygon 对象相关的原点、笔划宽度和许多其他属性。
示例 1：Polygon 对象的默认外观
让我们来看一个代码示例，说明如何绘制任何通用多边形对象。我们需要指定一个点的数组，其中每个点都是一个包含“x”和“y”的对象。指定点的数组至关重要，否则我们的多边形对象将不会渲染到画布上。
<!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>Default appearance of polygon object</h2>
<p>You can see that a polygon object has been added to the canvas</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "black",
stroke: "blue",
strokeWidth: 2,
}
);
// Adding it to the canvas
canvas.add(polygon);
</script>
</body>
</html>
示例 2：使用 Polygon 绘制五角星
让我们来看一个代码示例，以了解如何使用 Polygon 绘制五角星。五角星或五角星由 10 个等腰三角形组成。这些等腰三角形中不等边的长度具有 1.618 的黄金比例。我们可以选择坐标，使形状形成如下所示的五角星。
<!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>Drawing a Star using Polygon</h2>
<p>You can see that a star object has been added to the canvas</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: 349.9, y: 75, },
{ x: 379, y: 160.9,},
{ x: 469, y: 160.9,},
{ x: 397, y: 214.9,},
{ x: 423, y: 300.9,},
{ x: 350, y: 249.9,},
{ x: 276.9, y: 301,},
{ x: 303, y: 215,},
{ x: 231, y: 161,},
{ x: 321, y: 161,},
];
// Initiating a polygon object
var polygon = new fabric.Polygon(points, {
left: 100,
top: 10,
fill: "#D81B60",
strokeWidth: 4,
stroke: "green",
cornerColor: "blue",
});
// Adding it to the canvas
canvas.add(polygon);
</script>
</body>
</html>
结论
在本教程中，我们使用两个简单的示例演示了如何使用 FabricJS 的 Polygon 创建五角星符号。
更新于： 2023年1月2日
503 次查看
广告