Question

我正在使用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

Answer 1

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

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

然后将组添加到图层

 layer.add(group);

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

如何为KineticJS形状添加标签？

1 个答案: