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

如另一个答案中所述，WHERE tttaad510100.t_edte >= DATEADD(DAY, -1, GETDATE()) AND tttaad510100.t_edte < DATEADD(HOUR, 5, CONVERT(datetime,CONVERT(date, GETDATE()))) 不支持笔划模式。但是可以使用2d原生canvas API

所以您必须：

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

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

Konva@4.0.12

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

演示：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 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>