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) 无法将图案应用于线条对象的笔画。下面的代码片段使用带有图像填充图案的闭合线，但我认为这不是您想要的，但我创建它是为了看看有什么可能，所以 post 它会在这里以备将来有用.

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

正如另一个答案中提到的，Konva@4.0.12 不支持笔画模式。但是可以用 2d native canvas 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 可能会影响线条周围的所有形状。要解决这个问题，我们可以将行和 "fill" 矩形添加到组中并缓存它。

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

Konva js中的线宽

Line width in Konva js

javascript

canvas

konvajs