将自由绘制路径的轮廓转换为多边形

编程问答 2022-05-03

问题描述

我想使用 fabric.js javascript 库分割图像中的多个对象。

在这个例子中，我想分割冲浪板。然后我想将绘制的形状转换为多边形，其外部区域的坐标与图像的像素坐标相对应。

使用fabric.js 内置的免费绘图画笔绘制分割本身非常简单。

enter image description here

然后我可以使用这段代码将绘制路径的坐标转换为多边形：

canvas.on('path:created',function(el){
    var path = el.path.path
  var points = []
  for (var i = 0; i < path.length; i++){
    point = {
      x: Math.round(path[i][1]),y: Math.round(path[i][2])
    }
    points.push(point)
  }

  shape = new fabric.polygon(points,{
      stroke: 'red',opacity: 0.5,strokeWidth: 1,description: 'aaa',fill: 'transparent',});
  canvas.add(shape)
})

红色/黑色链接是我使用鼠标绘制的方式。

enter image description here

关闭绘图模式并将它们拖走后，2个创建的对象（绘图路径和多边形）如下所示。

enter image description here

但是，由于画笔有一定的宽度，并且由于路径区域重叠，我将其转换为多边形的方法效果不佳。

所以我不想要我输出的当前多边形（红色的），而是绿色部分的轮廓。我怎样才能做到这一点？

工作小提琴：https://jsfiddle.net/haw54v9L/3/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fabricjshtml5-canvasjavascriptpolygonsvgsvgsvg