Konva js中的线宽

Question

只需创建具有图像背景的行。我在这里的官方文档（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'
});

Answer 1

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 stage
stage.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();
   
   
 // make an image out of layer2 
 // Note - be sure to include width & height when using toImage() otherwise uses size of stage and fillpatternrepeat will seem to fail.  
 var image = layer2.toImage({
    width: 10, height: 10,   
  callback(img) {
    // do stuff with img
      var blob = new Konva.Line({
        points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93],
        fill: '#00D2FF',
        fillPriority: 'pattern',
        stroke: 'black',
        strokeWidth: 5,
        closed: true,
        tension: 0.3
      });

	// add the shape to the layer
	layer.add(blob);
      
	stage.draw();

	var imageObj = new Image();
	imageObj.onload = function() {
	  blob.fillPatternImage(imageObj);

	  layer2.remove(); // no longer needed.
	  
	  blob.fillPatternImage(imageObj)
	  layer.draw();

	  stage.draw();
	};

	imageObj.src = img.src;

  }
});

<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>

Answer 2

如另一个答案中所述，[email protected]不支持笔划模式。但可以使用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