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