KonvaJS 中对象的模式重复

Question

有什么方法可以通过用户输入在 KonvaJS 中重复一个模式吗？我有这个 (DEMO)。但是，我很难理解下一步。可能吗？

编辑：我想根据用户输入以编程方式 clone/repeat 圆弧每个跨度的峰值并沿 x 轴平铺它。

Answer 1

你可以这样做：

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

KonvaJS 中对象的模式重复

Pattern Repeat on object in KonvaJS

konvajs

react-konva