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

サークルとテキストの両方をグループに追加し、グループをドラッグ可能にする必要があります。グループ化すると、オブジェクトは1つのアイテムとして機能します。

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 に答える