KonvaJS - 可拖动的无限网格舞台答案

【问题标题】：KonvaJS - Draggable infinite grid stageKonvaJS - 可拖动的无限网格舞台
【发布时间】：2021-06-22 13:59:32
【问题描述】：

我有一个关于 KonvaJS 的问题。

我目前正在使用 ng2-konva 开发 Angular CLI，它与所有 KonvaJS 组件相对应。现在我想创建一个可以无限拖动的舞台。这可以通过在配置中设置drag: true 来实现。但是现在我想在舞台上添加一个网格背景，无论是虚线还是线。

我尝试自行排除故障，但找不到使用 Angular TypeScript 语法的方法来编写代码。

我的主舞台配置：

public configBackground: Observable<any> = of ({
    width: window.innerWidth,
    height: window.innerHeight,
    fill: "#EBEEF3",
  })

提前感谢您的回答。如果有重复，那么抱歉；随时与我分享链接。 :-)

【问题讨论】：

那么你有什么问题？你看过stackoverflow.com/questions/58445131/…吗？
我看到了那个 codepen，但该代码是为 React 设计的。我正在尝试找出如何在 Angular 中对其进行编码。 - 我正在尝试创建一个无限可平移和可扩展的网格，并将画布的大小限制为定义的坐标。

标签： angular konvajs

【解决方案1】：

我建议为您的网格创建一个图层并在其上绘制线条。如果您想查看示例，请查看我的 this 实现。
最大的问题是使其具有高性能。因此，请确保使用线条而不是矩形，并使用我的 konvajs 等其他一些很酷的性能功能，例如 listening: false 标签。
我花了很长时间，但据我所知，额外的一层是完成这项工作的最佳方法。
如果您对我的实施有任何疑问，请随时通过电子邮件与我联系。

【讨论】：