如何为KineticJS形状添加标签?

时间:2013-01-03 20:11:08

标签: html5 canvas kineticjs

我正在使用KineticJs创建带有一些文本标签的形状(可拖动以及形状)。 tutorial没有任何信息。我也没有发现this非常干净的方法。这样做的好方法是什么?以下代码仅创建形状。

HTML:

<html>
    <body>
        <div id="container"> </div>
        <button id="new_state">New State</button>
    </body>
</html>

JS:

$(document).bind("ready", function () {
    stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 500
    });

    layer = new Kinetic.Layer();

    $('#new_state').click(function() {
        newState();
    });

});

newState = function() {
    var circle = new Kinetic.Circle({
        x: stage.getWidth()/2,
        y: stage.getHeight()/2,
        radius: 20,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 2,
        text: 'tet',
        draggable: true
    });
    circle.on('mouseover', function() {
        $('body').css('cursor', 'pointer');
    });

    circle.on('mouseout', function() {
        $('body').css('cursor', 'default');
    });


    layer.add(circle);
    stage.add(layer);
};

JsFiddle here

1 个答案:

答案 0 :(得分:4)

您只需将圆圈和文字添加到群组中,并使群组可以拖动。 分组时,对象作为一个项目。

var group = new Kinetic.Group({
    draggable: true
});
group.add(circle);
group.add(text);

然后将组添加到图层

 layer.add(group);

http://jsfiddle.net/e8KwC/1/