数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 FabricJS 将多边形对象转换为 HTMLCanvasElement
我们可以通过创建 fabric.Polygon 的实例来创建一个多边形对象。多边形对象可以由任何由一组连接的直线段组成的封闭形状来表征。由于它是 FabricJS 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松自定义它。
为了将多边形对象转换为 HTMLCanvasElement，我们使用 toCanvasElement 方法。它返回 HTMLCanvasElement 类型的 DOM 元素，这是一个接口，它继承了 HTMLElement 接口的属性和方法。
语法
toCanvasElement( options: Object ): HTMLCanvasElement
参数
options（可选） - 此参数接受一个 Object，它为我们的 HTMLCanvasElement 提供额外的自定义。使用此参数，可以更改与 HTMLCanvasElement 相关的宽度、高度和许多其他属性。
示例 1：不使用 toCanvasElement 方法时的默认值
让我们看一个代码示例，了解当不使用 toCanvasElement 方法时多边形对象的外观。使用 toCanvasElement 方法时，将返回 HTMLCanvasElement 类型的 DOM 元素。HTMLCanvasElement 接口提供了各种用于更改画布显示的方法和属性。它继承了 HTMLElement 接口的属性和方法。这里，我们已将多边形对象记录到控制台，因此我们只能在控制台中看到多边形对象的默认值。
<!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 value without using toCanvasElement method</h2>
<p>You can open console from dev tools to see that the logged output contains the default value of the polygon object </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 object
var polygon = new fabric.Polygon(
[
{ x: 600, y: 310 },
{ x: 650, y: 450 },
{ x: 600, y: 480 },
{ x: 550, y: 480 },
{ x: 450, y: 460 },
{ x: 300, y: 210 },
],
{
fill: "#778899",
stroke: "blue",
strokeWidth: 5,
top: 50,
left: 100,
scaleX: 0.5,
scaleY: 0.5,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Console logging the polygon object
console.log("The polygon object is as follows:", polygon);
</script>
</body>
</html>
示例 2：使用 toCanvasElement 方法
让我们看一个代码示例，了解使用 toCanvasElement 方法时记录的输出。您可以从开发者工具中打开控制台，查看正在返回 HTMLCanvasElement 类型的 DOM 元素。
<!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>Using the toCanvasElement method</h2>
<p>You can open console from dev tools to see the logged output</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 object
var polygon = new fabric.Polygon(
[
{ x: 600, y: 310 },
{ x: 650, y: 450 },
{ x: 600, y: 480 },
{ x: 550, y: 480 },
{ x: 450, y: 460 },
{ x: 300, y: 210 },
],
{
fill: "#778899",
stroke: "blue",
strokeWidth: 5,
top: 50,
left: 100,
scaleX: 0.5,
scaleY: 0.5,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using toCanvasElement method
console.log(
"The output on using toCanvasElement method is:",
polygon.toCanvasElement()
);
</script>
</body>
</html>
结论
在本教程中，我们使用两个简单的示例演示了如何使用 FabricJS 将多边形对象转换为 HTMLCanvasElement。
更新于： 2022-12-28
131 次浏览
广告