文本的“填充”颜色在Konva中被“描边”覆盖

问题描述

我有一个Konva Text节点，其fill属性设置为黑色，而stroke属性设置为其他颜色。 在我的画布上，它看起来像预期的那样。当我将画布转换为base64图像以将其下载为图像文件时会发生问题，在这种情况下，下载的图像如下图所示：

（画布在左侧，右边是下载的图像）

如您所见，笔触颜色也将应用于文本自身的颜色。

我创建了一个CodesandBox example，其Text节点具有与环境中相同的属性，以下是该节点的创建方式：

const text = new Konva.Text({
      x: 26.330053300533024,y: 128,text: "Add a body text",defaultText: "Add a body text",fontSize: 22,fontFamily: "Montserrat",draggable: true,name: "text",fontStyle: "300",id: "textkgrsl68w",is_settings: true,wrap: "word",padding: 5,fill: "black",opacity: 1,isPremium: false,width: 183.5,visible: true,rotation: 0,scaleX: 1,scaleY: 1,offsetX: 0,offsetY: 0,skewX: 0,skewY: 0,stroke: "rgba(255,1)",strokeWidth: 3.75
    });

如您所见，它具有相同（不正确）的外观-没有内联颜色。我在CodesandBox中使用fontSize，并将其设置为非常大的值（例如100）时，文本的内联颜色变得可见。 我以为可能是某个ratio问题，但是正如我们在屏幕截图中看到的那样，画布和下载的图像中的文本大小都差不多。

如何解决此问题，也许还应该设置一些额外的属性？

konva：7.1.4

react-konva：16.12.0-0

解决方法

默认情况下，Konva先绘制填充，然后再绘制。因此，它将是文本本身，然后在文本周围进行描边（溢出部分）。

一天（一天）的Konva将支持不同的订单，但是目前konva@7.1.4无法做到这一点。

作为解决方法，仅使用两个Konva.Text实例。首先是中风，其次是填充。

https://codesandbox.io/s/download-konva-text-node-with-stroke-as-base-64-image-forked-w0z4v