React Konva 自定义上下文/画布（与 canvas2svg 一起使用）

Question

我们正在使用

react-konva

，它呈现一个管理底层画布/上下文的

<Stage>

组件。

我们希望将

canvas2svg

与它一起使用，它基本上是画布上下文的包装器，用于跟踪画布上的所有绘制，并在您准备好访问它时维护 svg 表示形式。它不会修改画布 api，因此理论上，Konva 不会受到影响，因为它的画布绘制调用是相同的 - 它们只需要位于 canvas2svg 生成的上下文中，而不是 konva 自动生成的上下文中。

我们正在寻找类似的东西，但它似乎不存在。我们有什么方法可以使用 ref 或以其他方式破解 Konva 使用 C2S 上下文吗？或者也许我们缺少一个内置属性。

var c2sContext = new C2S(500,500);

<Stage context={c2sContext}>

Answer 1

canvas2svg

实际上并不与普通渲染的画布一起工作（它是一个替代方案 - 例如，

arc()

方法仅渲染为 svg，而不是 svg + canvas），因此您需要将渲染上下文替换为c2s 实例，调用 render 以便调用像

arc()

这样的方法，然后将其设置回来。

您可以在 konva

Layer

上使用 ref 并在按下按钮时运行如下代码：

setTimeout(() => {
  var oldContext = this.layerRef.canvas.context._context;

  var c2s = this.layerRef.canvas.context._context = C2S({...this.state.containerSize, ctx: oldContext});

  this.forceUpdate();

  setTimeout(() => {
    console.log(c2s.getSerializedSvg());

    this.layerRef.canvas.context._context = oldContext;

    this.forceUpdate();
  })
}, 5000);

两种可能的解决方案可以绕过