如何将标签添加到KineticJS形状？

我正在使用KineticJs创建带有一些文本标签（可随形状拖动）的形状。 tutorial没有任何信息。我也没有发现this一个非常干净的方法。这样做的好方法是什么？下面的代码只创建形状。如何将标签添加到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 here

来源

2013-01-03 ajmartin

你只需要两个圆圈和文本添加到组，使组拖动。分组时，对象充当一个项目。

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

然后将该组添加到层

layer.add(group);

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

来源

2013-01-03 22:45:19 SoluableNonagon

这是唯一的办法？ – ajmartin

这几乎是唯一的出路。至少它是最干净的。如果你想想要做什么：创建一个形状，然后创建一个文本，然后将它们视为一个，然后将事件附加到它们。没有一个步骤的过程，所以你必须使用组......或者编写自己的类来扩展Kinetic.Shape或Text，这样你就可以一举做出形状和文本。 – SoluableNonagon

谢谢你的例子。一个小错误是Text对象的属性是“fill”而不是“textFill”。默认填充为白色，因此它不会显示在白色画布上。 – Phil

如何将标签添加到KineticJS形状？

回答

相关问题