###
使用 Fabric.js 在 Vue3 中
实现自由绘制多边形
#### 初始化
Fabric.js 画布
为了在 Vue3 项目中
使用 Fabric.js 绘制多边形，首先需要初始化
Fabric.js 的画布。这一步骤涉及创建一个 HTML canvas 元素并将其与
Fabric.js 关联起来。
```html
<template>
<div id="app">
<canvas ref="drawingCanvas"></canvas>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import
fabric from '
fabric'
const drawingCanvas = ref(null)
onMounted(() => {
const canvasElement = drawingCanvas
.value;
var canvasInstance = new
fabric.Canvas(canvasElement);
})
</script>
```
这段代码展示了如何定义模板中的 `<canvas>` 标签，并利用 `ref` 属性获取该 DOM 节点以便后续操作[^1]。
#### 绑定绘图事件
为了让用户能够
自由地
绘制多边形，需监听鼠标的按下、移动和抬起事件来记录顶点位置，并动态更新路径上的线条连接这些点位形成闭合区域。
```
javascript
let isDrawingModeActive = false; // 控制是否处于绘画模式
let polygonPoints = []; // 存储当前正在构建的多边形各顶点坐标
// 开始
绘制时触发此函数
function onMouseDown(option) {
if (!isDrawingModeActive || option
.e
.buttons !== 1) return;
let pointer = canvasInstance
.getPointer(option
.e);
polygonPoints
.push({
x: pointer
.x,
y: pointer
.y
});
drawPolygon();
}
// 移动鼠标过程中持续调用以实时预览即将形成的线段
function onMouseMove(option){
if (polygonPoints
.length === 0 || !isDrawingModeActive) return;
let lastPoint = polygonPoints[polygonPoints
.length - 1];
// 更新最后一个点的位置跟随光标变化
let currentPos = canvasInstance
.getPointer(option
.e);
polygonPoints[polygonPoints
.length - 1]
.x = currentPos
.x;
polygonPoints[polygonPoints
.length - 1]
.y = currentPos
.y;
drawPolygon();
}
// 完成一次完整的多边形
绘制后执行的操作
function onMouseUp(){
if(polygonPoints
.length >= 3 && isDrawingModeActive){
// 添加新的终点作为起点完成封闭图形
polygonPoints
.push({
...polygonPoints[0]});
// 渲染最终版本的多边形对象到画板上
renderFinalPolygon();
resetState(); // 结束本次
绘制流程重置状态变量准备下一轮输入
}
}
```
上述逻辑
实现了基于用户的交互行为捕捉各个阶段的数据流转换过程[^2]。
#### 处理多边形渲染
当收集到了足够的顶点数据之后，则可以通过
Fabric 提供的对象接口将它们组合成为一个可视化的几何形状显示出来：
```
javascript
function drawPolygon() {
if (polygonPoints
.length < 2) return;
// 构建临时性的视觉反馈用于指导用户继续添加更多节点直到满意为止
let tempPolyline = new
fabric.Polyline(
[
...polygonPoints],
{
fill:'',
stroke:'black',
strokeWidth:2
}
);
canvasInstance
.add(tempPolyline)
.renderAll();
}
function renderFinalPolygon() {
let finalShape = new
fabric.Polygon(
polygonPoints
.map(({x,y})=>({x,y})),
{
fill:'#f55',
opacity:
.7,
selectable:false
}
);
canvasInstance
.remove(
...canvasInstance
._objects); // 清除之前所有的中间态表示
canvasInstance
.add(finalShape)
.setActiveObject(finalShape)
.requestRenderAll();
}
```
这里分别给出了两种不同类型的多边形实例化方式——一种是在
绘制期间提供即时可见的效果；另一种则是确认后的持久存储形式[^3]。
#### 保存
绘制的结果
对于已经存在于画布上的所有元素（包括但不限于本教程讨论过的多边形），都可以很方便地导出为
JSON 字符串或者图像文件等形式加以存档或分享。
```
javascript
// 将整个场景序列化为
JSON字符串便于后期恢复
function saveAs
Json() {
console
.log(
JSON
.stringify(canvasInstance
.to
JSON()));
}
// 导出为PNG格式图片链接下载
async function exportImage() {
await canvasInstance
.setDimensions({width:800,height:600});
window
.open(canvasInstance
.toDataURL('png'));
}
```
以上就是关于怎样借助于
Fabric.js 库配合 Vue3 框架达成自定义手绘不规则多边形目标的具体实施方案介绍[^4]。
本文介绍了如何使用Fabric.js在HTML5 Canvas上实现前端自由绘制椭圆。通过引入Fabric.js库，创建Canvas实例，添加鼠标事件监听器，可以轻松地在Canvas上绘制、编辑椭圆，为前端开发带来更多的交互可能性。
订阅专栏 解锁全文
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
