1

図形の中にテキストを追加してから、図形をドラッグできるようにしたいと考えています。

これは、テキストとドラッグ可能な形状を示すフィドルです...しかし、形状の中にテキストを追加する方法がわかりません。

http://jsfiddle.net/sJpdz/

    <script src="kinetic-v4.3.3.min.js"></script>
    <script>
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 500,
            height: 500
        });

        var layer = new Kinetic.Layer();

        var rect = new Kinetic.Rect({
            x: 239,
            y: 75,
            width: 100,
            height: 50,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        var simpleText = new Kinetic.Text({
            x: stage.getWidth() / 2,
            y: 15,
            text: 'Simple Text',
            fontSize: 30,
            fontFamily: 'Calibri',
            textFill: 'green',
            stroke: 'gray',
            fill: 'white'
        });
        layer.add(simpleText);
        // add the shape to the layer
        layer.add(rect);

        // add the layer to the stage
        stage.add(layer);
    </script>

私が考えることができる唯一の方法は、2つの別々のレイヤーを重ね合わせてグループ化することです. ただし、これはかなり面倒なプロセスのようで、よりエレガントなソリューションを望んでいました。

ありがとう、

4

1 に答える 1

4 
var stage = new Kinetic.Stage({
            container: 'container',
            width: 500,
            height: 500
        });

var layer = new Kinetic.Layer({
 draggable: true
});

        var rect = new Kinetic.Rect({
            x: 239,
            y: 75,
            width: 100,
            height: 50,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 4,

        });

        var simpleText = new Kinetic.Text({
            x: rect.getX(),
            y: rect.getY(),
            text: 'Simple Text',
            fontSize: 24,
            fontFamily: 'Calibri',
            width:rect.getWidth() ,
            align: 'center',    
            fill: 'white'
        });
     layer.add(rect);
        layer.add(simpleText);
        // add the shape to the layer


        // add the layer to the stage
        stage.add(layer);
于 2013-03-19T10:32:50.960 に答える