1

我有一些 Konva Text 节点，其fill属性设置为黑色并stroke设置为其他颜色。在我的画布中，它看起来符合预期。当我将画布转换为 base64 图像以将其作为图像文件下载时，就会出现问题 - 在这种情况下，下载的图像如下面的屏幕截图所示：

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

文本

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

我创建了一个 Codesandbox示例，其中的 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,0,0,1)",
      strokeWidth: 3.75
    });

如您所见，它具有相同（不正确）的外观 - 没有内联颜色。我fontSize在 Codesandbox 中玩过，当我将其设置为非常大的值（如100）时，文本的内联颜色变得可见。我认为这可能是一些ratio问题，但正如我们在屏幕截图中看到的那样，画布和下载图像中的文本大小相似。

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

konva：7.1.4

react-konva：16.12.0-0

4

1 回答 1

2

更新：

您可以使用text.fillAfterStrokeEnabled(true);在描边上绘制填充。

老答案：

默认情况下Konva是先绘制填充然后描边。所以它本身就是一个文本，然后在它周围描边（即溢出部分）。

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

作为一种解决方法，只需使用两个Konva.Text实例。第一个用于描边，第二个用于填充。

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

于 2020-10-28T15:38:41.993 回答