1

我正在使用 KineticJs 创建带有一些文本标签的形状（可与形状一起拖动）。教程上没有任何信息。我也没有发现这是一种非常干净的方法。这样做的好方法是什么？下面的代码只创建形状。

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在这里

4

1 回答 1

4

您只需将圆圈和文本都添加到组中，并使组可拖动。分组时，这些对象充当一个项目。

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

然后将组添加到图层

 layer.add(group);

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

于 2013-01-03T22:45:19.830 回答