Konva 自定义形状中的文本

【问题标题】：Text in Konva Custom ShapeKonva 自定义形状中的文本
【发布时间】：2021-05-07 17:50:45
【问题描述】：

我需要自定义形状的文本输出。

我的代码：场景函数（上下文，形状）{

    context.strokeStyle = "black";
    context.font = (15 / shape.parent.scale().x).toFixed(0) + "px arial";
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    context.fillStyle = 'red';
  
    context.beginPath();
    context.strokeText("AAABBBCCC", shape.attrs.centerPoint.x, shape.attrs.centerPoint.y);
    context.closePath();
    context.fillStrokeShape(shape);
}

文本已正确呈现，但未填充。如何填写文本？

Text output

【问题讨论】：

标签： konvajs konva

【解决方案1】：

Konva 无法自动填充/描边文本，因为文本使用的绘图方法略有不同。

如果您想以自定义形状绘制文本，则无需使用context.fillStrokeShape(shape);。只需在sceneFunc 中画出你想要的东西。使用context.strokeText() 和context.fillText()。

然后在hitFunc 中手动创建命中图（使用矩形）。热门演示请看这里：https://konvajs.org/docs/events/Custom_Hit_Region.html#1-What-is-hitFunc

【讨论】：