Question

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

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

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

kineticjs添加文字形状

1 个答案: