kineticjs 矩形填充文本

Question

我有 KineticJS 矩形已经填充了“蓝色”颜色，我想在这个矩形框上显示文本。但我下面的代码没有显示任何内容。我还需要在按钮单击时分配此标签文本，相同的代码也在下面。

drawShape = new Kinetic.Rect({
            id: shapeId,
            name: shapeName,
            x: 0,
            y: 0,
            width: 150,
            height: 40,
            fill: "#00D2FF",
            stroke: "black",
            strokeWidth: 3,
            fillText: "Step" + stepNumber            
        });

function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);  
}

对此有任何帮助吗？请。

谢谢 比鲁

Answer 1

我认为您不能将文本添加到矩形对象，只能使用以下填充类型：

[颜色、线性渐变、径向渐变或图案]

为了解决这个问题，我创建了一个组，然后向其中添加了一个矩形和文本对象，当我想创建一个带有文本的矩形时：

var group = new Kinetic.Group({

});

var rectangle = new Kinetic.Rect({

    x: 5,
    y: 5,
    width: 80,
    height: 35,
    fill: "green",
    stroke: "black",
    strokeWidth: 2

});

var rectangleText = new Kinetic.Text({

    x: 15,
    y: 10,
    text: 'test',
    fontSize: 20,
    fontFamily: 'Calibri',
    textFill: 'black'

});

group.add(rectangle);
group.add(rectangleText);
layer.add(group);

您应该能够调整您的侦听器，然后将其应用于此。

我做了一个 jsfiddle 来说明我的意思：

http://jsfiddle.net/B85Ff/

Answer 2

您是否已将 drawShape 添加到任何图层？不会出现在您发布的 sn-p 中。 此外，您需要在 OnApplyPropertiesClick() 函数的末尾绘制图层（如刷新）。