Fabric.js 自由绘制圆形

程序员 · 2024-9-17 07:23:10

本文简介

这次要讲的是 自由绘制圆形 。
在《Fabric.js 自由绘制矩形》里讲到的思绪，放在圆形里不太实用。
这次要做到的结果如下图所示。

思绪

Fabric.js 默认的框选操纵是矩形，如果必要做到上图的结果，必要做以下3步：

点击画布时 canvas.on('mouse:down', fn)，创建一个圆形。
鼠标移动时 canvas.on('mouse:move', fn)，圆形的巨细跟随鼠标地点的位置举行缩放。
松开鼠标时 canvas.on('mouse:up', fn)，确定圆形巨细。

交互操纵方面，我按照 PhotoShop 椭圆工具的操纵逻辑。
圆形的直径是矩形的短边。

如果 “移动鼠标的坐标点” 在 点击时的坐标点 左侧大概上方，必要将圆形的左上角移到 “移动鼠标的坐标点” 。

动手实现

我在这里贴出用 原生方式 实现的代码和解释。
如果你想知道在 Vue3 情况下怎样实现 Fabric.js 自由绘制矩形，可以在 代码堆栈 里查找。

Fabric.js 自由绘制圆形

所属分类: 问答交流

新帖推荐: 30日

推荐作品