Konva js中的线宽

Question

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

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'

});

Answer 1

如另一个答案中所述，Konva@4.0.12不支持笔画模式。但是可以使用 2d 本机画布 API所以你必须：1 - 绘制自定义形状并手动进行描边2 - 或者您可以使用混合模式来混合线条和图像：  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

Answer 2

Konva 当前版本 (4.0.12) 无法将图案应用于线条对象的笔划。下面的代码段使用带有图像填充图案的闭合线，但我认为这不是您所追求的区域，但我创建它是为了查看可能的内容，因此将在此处发布以备将来使用。var width = window.innerWidth;var height = window.innerHeight;var stage = new Konva.Stage({container: 'container',width: width,height: height});var layer = new Konva.Layer();// add the layer to the stagestage.add(layer);var layer2 = new Konva.Layer();var rect1 = new Konva.Rect({width:10, height:10, fill: 'magenta'})var rect2 = new Konva.Rect({width:5, height:5, fill: 'cyan'})var rect3 = new Konva.Rect({x: 5, y:5, width:5, height:5, fill: 'cyan'})stage.add(layer2);layer2.add(rect1);layer2.add(rect2);layer2.add(rect3);stage.draw();&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;// make an image out of layer2&nbsp;&nbsp;// Note - be sure to include width & height when using toImage() otherwise uses size of stage and fillpatternrepeat will seem to fail.&nbsp;&nbsp;&nbsp;var image = layer2.toImage({&nbsp; &nbsp; width: 10, height: 10,&nbsp; &nbsp;&nbsp; callback(img) {&nbsp; &nbsp; // do stuff with img&nbsp; &nbsp; &nbsp; var blob = new Konva.Line({&nbsp; &nbsp; &nbsp; &nbsp; points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93],&nbsp; &nbsp; &nbsp; &nbsp; fill: '#00D2FF',&nbsp; &nbsp; &nbsp; &nbsp; fillPriority: 'pattern',&nbsp; &nbsp; &nbsp; &nbsp; stroke: 'black',&nbsp; &nbsp; &nbsp; &nbsp; strokeWidth: 5,&nbsp; &nbsp; &nbsp; &nbsp; closed: true,&nbsp; &nbsp; &nbsp; &nbsp; tension: 0.3&nbsp; &nbsp; &nbsp; });&nbsp; // add the shape to the layer&nbsp; layer.add(blob);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; stage.draw();&nbsp; var imageObj = new Image();&nbsp; imageObj.onload = function() {&nbsp; &nbsp; blob.fillPatternImage(imageObj);&nbsp; &nbsp; layer2.remove(); // no longer needed.&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; blob.fillPatternImage(imageObj)&nbsp; &nbsp; layer.draw();&nbsp; &nbsp; stage.draw();&nbsp; };&nbsp; imageObj.src = img.src;&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.12/konva.min.js"></script><div id="container"></div><img id='theImg' style='width:100px; height: 100px; border:"2px solid lime"; z-index: 10 '></img>