如何为 KineticJS 形状添加标签？答案

【问题标题】：How to add labels to KineticJS shapes?如何为 KineticJS 形状添加标签？
【发布时间】：2012-12-18 06:15:03
【问题描述】：

我正在使用 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);
};

JsFiddle here

【问题讨论】：

标签： html canvas kineticjs

【解决方案1】：

您只需将圆圈和文本都添加到组中，并使组可拖动。分组后，对象将作为一个项目。

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

然后将组添加到图层

 layer.add(group);

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

【讨论】：

这几乎是唯一的方法。至少是最干净的。如果您考虑您正在尝试做的事情：创建一个形状，然后是一个文本，然后将它们视为一个，然后将事件附加到它们。没有一步的过程，所以你必须使用组......或者编写你自己的扩展 Kinetic.Shape 或 Text 的类，这样你就可以一举完成形状和文本。
感谢您的示例。一个小错误是 Text 对象的属性是“fill”而不是“textFill”。默认填充为白色，因此它不会显示在白色画布上。
现在有一个用于动力学JS的标签插件