如何在動態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()這樣的功能。

但是，您可以繪製Kinetic.Rect，其x和y的大小與您的文本相同（使用text.width()和text.height()）並且具有所需的顏色。

首先將Kinetic.Rect添加到您的圖層，然後再添加Kinetic.Text。

例如，請參閱：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/