kineticjs - kineticjs 将文本添加到形状

Question

我想在形状内添加文本，然后让形状可拖动。

这是一个显示文本的小提琴，以及可拖动的形状......但我不知道如何在形状内添加文本。

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>

我能想到的唯一方法就是让两个单独的图层重叠并将它们组合在一起。然而，这似乎是一个相当繁琐的过程，我希望有一个更优雅的解决方案。

谢谢，

Answer 1

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);