Pattern Repeat on object in KonvaJS

Question

Is there any way to repeat a pattern in KonvaJS through a user input? I have this (DEMO). However,I am having difficulties wrapping my head around this next step. Is it possible?

Edit: I would like to programmatically clone/repeat the arc's peaks per span based on the user input and tile it along the x axis.

Please review [how to ask a good question](https://stackoverflow.com/help/how-to-ask) and consider adding more information or rewording your question. — Vanquished Wombat, Dec 21 '21 at 17:19

score 1 · Accepted Answer · answered Dec 22 '21 at 16:15

You can just do this:

const lines = [];
  for (var i = 0; i < numArchPeaks; i++) {
    const single = [0, 0, 90, -50, 180, 0];
    const perSpan = single.map((x) => x / numArchPeaks);
    lines.push(
      <Line x={x + i * 180 / numArchPeaks} y={y} points={perSpan} tension={1} stroke="black" />
    );
  }

// then in render:
<Layer>{lines}</Layer>

https://codesandbox.io/s/stupefied-fermi-vz9z7?file=/src/KonvaExample.js

Pattern Repeat on object in KonvaJS

1 Answers1