KineticJS改變文本的顏色onclick

Question

我正在KineticJS（最新版本）上工作，我有關於通過drawFunc（）形狀對象繪製的改變文本顏色的問題。

1）以下是Shpae對象的代碼。

var sampleText = new Kinetic.Shape({ 
    x:380, 
    y:700, 
    drawFunc: function(context) { 
    context.beginPath();   
     var x = 0; 
     var y = 0; 
     var text = 'Sample Text'; 
     context.setAttr("font", '15pt Calibri'); 
     context.setAttr('fillStyle','black');   
     context.fillText(text, x, y) 
     context.closePath(); 
     // KineticJS specific context method 
     context.fillStrokeShape(this); 
    }, 
    id:"sampleText" 
}); 

2）我想在使用核心html5代碼（上下文對象）編寫的click事件上更改「示例文本」的顏色。

colorTabViews.on('click', function (e) { 
    sampleText.sceneFunc(function(context) { 
     context.beginPath(); 
     //how can i get text which already displayed in shape object("Sample text")? 
     //or to change color of "sample text" 
     context.setAttr('fillStyle','green'); 

     context.closePath(); 
     context.fillStrokeShape(this); 
    }); 
    verticalText.draw(); 
}); 

但問題是，它將全文刪除而不是僅僅改變「示例文本」顏色。

請指教得到文本由context.fillText（）函數填充或替代方式，我可以更改特定事件的文本顏色。

感謝您的時間和提前考慮。 -Naitik

Answer 1

通過編程修改填充樣式一Kinetic.Shape

裏面的填充屬性附加到你的形狀對象，並引用您的填充屬性Kinetic.Shape內：

var sampleText = new Kinetic.Shape({ 
    x:10, 
    y:15, 
    sceneFunc: function(context) { 
     context.beginPath();   
     var x = 0; 
     var y = 0; 
     var text = 'Sample Text'; 
     context.setAttr("font", '15pt Calibri'); 
     context.setAttr('fillStyle',this.myFillStyle);   
     context.fillText(text, x, y) 
     context.closePath(); 
     // KineticJS specific context method 
     context.fillStrokeShape(this); 
    }, 
    id:"sampleText", 
    fill:"blue" 
}); 

// add a property to sampleText that's used in its sceneFunc 
sampleText.myFillStyle="black"; 

然後你可以更改您的點擊處理程序中的填充屬性：

colorTabViews.on('click', function (e) { 
    sampleText.myFillStyle="red"; 
    verticalText.draw(); 
});