Ширина линии в Конве

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 не поддерживает шаблон для штрихов. Но это возможно сделать с 2d native canvas 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>