我正在使用KineticJs创建带有一些文本标签的形状(可拖动以及形状)。 tutorial没有任何信息。我也没有发现this非常干净的方法。这样做的好方法是什么?以下代码仅创建形状。
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);
};
答案 0 :(得分:4)
您只需将圆圈和文字添加到群组中,并使群组可以拖动。 分组时,对象作为一个项目。
var group = new Kinetic.Group({
draggable: true
});
group.add(circle);
group.add(text);
然后将组添加到图层
layer.add(group);