用不透明度填充手绘图

Question

我有一个简单的功能，可以在用户选择时填充绘制的图像

canvas.on('mouse:up', function() { 
                if(main.mode == 'fill') {
                  var object = main.canvas.item(main.canvas.getObjects().length-1);
                  object.fill = main.pColor();  
                  canvas.renderAll();
                }
            })

这适用于纯色（不透明度 1）。使用不透明度较低的颜色时：

似乎笔画和填充重叠产生了一条较暗的线。

我尝试了 globalCompositeOperation。我正在考虑消除笔划或将笔划不透明度设置为零。希望有更好的答案。

Answer 1

我尝试了几种方法：将描边不透明度设置为零并尝试完全摆脱描边。

最有效的是添加

object.set('strokeWidth', 0);

上面的处理程序。

set 确保 canvas 将被更新。

运行良好。

用不透明度填充手绘图

fill a freehand drawing with opacity

drawing

fabricjs

opacity

fill