如何將標籤添加到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形狀？

回答

相關問題