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）我想改变＆＃34;示例文本的颜色＆＃34; on click事件，使用核心html5代码（上下文对象）编写。

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

但问题是，它删除了整个文本没有显示，而只是改变＆＃34;示例文本＆＃34;颜色。

请建议获取由context.fillText（）函数填充的文本或替代方式，以便我可以更改特定事件的文本颜色。

感谢您的时间和提前考虑。 -Naitik

Answer 1

以编程方式更改Kinetic.Shape中的fillStyle

将填充属性附加到形状对象，并在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";

然后您可以在点击处理程序中更改该fill属性：

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

KineticJS改变文本的颜色onclick

1 个答案: