Konva js provide stroke lists

Question

I have checked Konva js documentation and can't find stroke lists. I want to implement like attached image to get dimension of image.

Is konva js provides to display stroke list as well as get image dimension using konva js line tool ?

I have checked konva js documentation as well as some demo but can't find any simmilar thing.

You'll probably need to do it manually with `Konva.Line` – Andy Ray May 05 '23 at 09:18 — Andy Ray, May 05 '23 at 09:18

score 0 · Answer 1 · answered May 05 '23 at 15:37

As a possible solution, you can use Konva.TextPath shape for that https://konvajs.org/docs/shapes/TextPath.html

You can add path and use repeated text such as ● ● ● ● to draw a stroke.

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const strokeShape = new Konva.TextPath({
  data: 'M 0 0 L 100 0 L 100 100 L 0 0',
  text: '-----------------'.repeat(100),
  fill: 'black'
})
layer.add(strokeShape);

document.getElementById('select').addEventListener('change', (e) => {
  strokeShape.text(e.target.value.repeat(100));
})

  <script src="https://unpkg.com/konva@^9/konva.min.js"></script>
  <select id="select">
    <option value="-">-</option>
    <option value="◆">◆</option>
    <option value="●">●</option>
    <option value="▤">▤</option>
  </select>
  <div id="container"></div>

Konva js provide stroke lists

1 Answers1