javascript - Konva js中的线宽

只需要创建与图像背景线。我在这里的官方文档（https://konvajs.org/api/Konva.Line.html）中找到了这个机会。首先，我只需要创建带有张力，颜色填充和宽度的线，但是width属性不起作用（或者我不知道该怎么做）。
我的代码和输出：

let line2 = new Konva.Line({
  x: 100,
  y: 50,
  points: [75, 75, 100, 200, 300, 140],
  fill: "red",
  tension: 0.5,
  width: 50,
  strokeWidth: 1,
  stroke: 'green'
});

最佳答案

如另一个答案中所述，Konva@4.0.12不支持笔划模式。但是可以使用2d本机画布API

因此，您必须：

1-绘制a custom shape并手动描边

2-或者您可以使用Blend mode混合线条和图像：

  const group = new Konva.Group();
  layer.add(group);

  // draw line
  const line = new Konva.Line({
   x: 100,
   y: 50,
   points: [75, 75, 100, 200, 300, 140],
   fill: "red",
   tension: 0.5,
   strokeWidth: 1,
   stroke: 'green'
  });
  group.add(line);

  // "fill" line with globalCompositeOperation: 'source-in' rectangle
  var lineClientRect = line.getClientRect();
  var fillRect = new Konva.Rect({
    x: lineClientRect.x,
    y: lineClientRect.y,
    width: lineClientRect.width,
    height: lineClientRect.height,
    fillPatternImage: img,
    globalCompositeOperation: 'source-in'
  });
  layer.add(fillRect);

  group.cache();
  layer.draw();

这可能有点棘手，因为globalCompositeOperation可能会影响线周围的所有形状。要解决此问题，我们可以将线和“填充”矩形添加到组中并对其进行缓存。

演示：https://jsbin.com/zodojezuma/2/edit?html,js,output