javascript - 如何在kinetic js层中设置文本的背景颜色？

Question

如何设置 writeMessage() 函数中显示的文本背景颜色？ 下面是我的脚本的一部分。

 function initStage() {  
    var stage = new Kinetic.Stage({
      container: 'somediv',
      width: 565,
      height: 570
    });

    var messageLayer = new Kinetic.Layer(); 
    stage.add(messageLayer);

    writeMessage(messageLayer, 'somemessage',300,300); 
  }
  ...
 function writeMessage(messageLayer, message, xp,yp) {
    var context = messageLayer.getContext();
    messageLayer.clear();
    context.setAttr('font', '20pt Calibri');
    //how can i set background color of text here?
    context.fillStyle = 'black';
    context.fillText(message, xp, yp);
  }

Answer 1

没有像Text.setBackground()这样的函数。

但是您可以绘制一个具有相同 x 和 y 且大小与文本相同的 Kinetic.Rect (使用 text.width() 和 text .height() )与所需的颜色。

首先将 Kinetic.Rect 添加到您的图层，然后添加 Kinetic.Text。

有关示例，请参阅:http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/