本文简介

这次要讲的是 自在绘制圆形 。

在 《Fabric.js 自在绘制矩形》 里讲到的思路，放在圆形里不太实用。

这次要做到的成果如下图所示。



思路

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

  1. 点击画布时 canvas.on('mouse:down', fn)，创立一个圆形。
  2. 鼠标挪动时 canvas.on('mouse:move', fn)，圆形的大小追随鼠标所在的地位进行缩放。
  3. 松开鼠标时 canvas.on('mouse:up', fn)，确定圆形大小。


交互操作方面，我依照 PhotoShop 椭圆工具的操作逻辑。

圆形的直径是矩形的短边。


如果 “挪动鼠标的坐标点” 在 点击时的坐标点 左侧或者上方，须要将圆形的左上角移到 “挪动鼠标的坐标点” 。



入手实现

我在这里贴出用 原生形式 实现的代码和正文。

如果你想晓得在 Vue3 环境下如何实现 Fabric.js 自在绘制矩形，能够在 代码仓库 里查找。

<!-- 工具栏 --><div class="toolbar">  <select onchange="typeChange(this.options[this.options.selectedIndex].value)">    <option value="default">默认（框选）</option>    <option value="circle">圆形</option>  </select></div><!-- 画布 --><canvas id="canvas" width="800" height="800"></canvas><!-- 引入fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script><script>let canvas = null // 画布对象let currentType = 'default' // 以后操作模式（默认 || 创立圆形）let downPoint = null // 按下鼠标时的坐标let upPoint = null // 松开鼠标时的坐标let currentCircle = null // 长期圆，创立圆的时候应用// 初始化画板function initCanvas() {  canvas = new fabric.Canvas('canvas')  canvas.on('mouse:down', canvasMouseDown)   // 鼠标在画布上按下  canvas.on('mouse:move', canvasMouseMove)   // 鼠标在画布上挪动  canvas.on('mouse:up', canvasMouseUp)       // 鼠标在画布上松开}// 画布操作类型切换function typeChange(opt) {  currentType = opt  switch(opt) {    case 'default': // 默认框选模式      canvas.selection = true // 容许框选      canvas.selectionColor = 'rgba(100, 100, 255, 0.3)' // 选框填充色：半透明的蓝色      canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)' // 选框边框色彩：半透明灰色      canvas.skipTargetFind = false // 容许选中      break    case 'circle': // 创立矩形模式      canvas.selectionColor = 'transparent' // 选框填充色：通明      canvas.selectionBorderColor = 'transparent' // 选框边框色彩：透明度很低的彩色（看上去是灰色）      canvas.skipTargetFind = true // 禁止选中      break  }}// 鼠标在画布上按下function canvasMouseDown(e) {  downPoint = e.absolutePointer  if (currentType === 'circle') {    // 应用 Fabric.js 提供的api创立圆形，此时圆形的半径是0    currentCircle = new fabric.Circle({      top: downPoint.y,      left: downPoint.x,      radius: 0,      fill: 'transparent',      stroke: 'rgba(0, 0, 0, 0.2)'    })    canvas.add(currentCircle)  }}// 鼠标在画布上挪动function canvasMouseMove(e) {  if (currentType === 'circle' && currentCircle) {    const currentPoint = e.absolutePointer    // 半径：用短边来计算圆形的直径，最初除以2，失去圆形的半径    let radius = Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2    // 计算圆形的top和left坐标地位    let top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2    let left = currentPoint.x > downPoint.x ? downPoint.x :  downPoint.x - radius * 2    // 别离设置圆形的半径、top和left    currentCircle.set('radius', radius)    currentCircle.set('top', top)    currentCircle.set('left', left)    canvas.requestRenderAll()  }}// 鼠标在画布上松开function canvasMouseUp(e) {  upPoint = e.absolutePointer  if (currentType === 'circle') {    // 如果鼠标点击和松开是在同一个坐标，那就不会创立圆形（其实是把刚创立半径为0的圆形删掉）    if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {      canvas.remove(currentCircle)    } else {      if (currentCircle) {        // 创立圆形（其实是把圆形边框的色彩改成 #000        currentCircle.set('stroke', '#000')      }    }    // 实现以上操作后，长期的圆形清空掉。    currentCircle = null  }}// 页面加载的生命周期，在此执行 初始化画布 的操作window.onload = function() {  initCanvas()}</script>



代码仓库

  • ⭐原生版本的代码
  • ⭐Vue3版本的代码



举荐浏览

  • 《Fabric.js 自在绘制矩形》
  • 《Fabric.js 自定义右键菜单》
  • 《Fabric.js 从入门到收缩》

点赞 + 关注 + 珍藏 = 学会了