如何解决文本的“填充”颜色在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。