konvajs - Konva 自定义形状中的文本

Question

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

我的代码：sceneFunc(context, shape) {

    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);
}

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

文本输出

Answer 1

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

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

然后在hitFunc. 对于命中演示看看这里：https ://konvajs.org/docs/events/Custom_Hit_Region.html#1-What-is-hitFunc