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