KineticJS 在事件上设置变量值

Question

我在一个对象中定义了几个 kineticJS 圆圈，并创建并显示了其中几个对象。我想要的是根据用户从显示的圆圈中选择的对象生成一个 XML 对象。

为此，我尝试在单击特定圆圈时设置对象中定义的变量值，并以object.property 的方式调用它。但是，这不起作用。

以下是我在工作中使用的一些代码：

    function Graph(i, j, refRel, refRelTxt) {

        subNodes = seventeen + eighteen + nineteen;
        graphNode = "<" + refRelTxt + ">" + subNodes + "<" + refRelTxt + ">";


        var layer = new Kinetic.Layer({
            width: 200,
            height: 100,
            x: (stage.getWidth() / 2.5) + i,
            y: (stage.getHeight() / 2.5) + j

        });


        var circle19 = new Kinetic.Circle({
            x: 10,
            y: layer.getHeight() / 2,
            radius: cradius,
            fill: '#CCCCCC'
        });

        //++++++++++++++++++++++++++++++++++++++++++++++++++     

        var circle18 = new Kinetic.Circle({
            x: 10 + n,
            y: (layer.getHeight() / 2) - m,
            radius: cradius,
            fill: '#CCCCCC'
        });

        var circle17 = new Kinetic.Circle({
            x: 10 + n,
            y: (layer.getHeight() / 2) + m,
            radius: cradius,
            fill: '#CCCCCC'
        });


        //============Mouse in/out operations


        circle17.on('click', function (evt) {
            this.setFill('#00FF00');
            layer.draw();
            seventeen = "<node>seventeen<node>";
        });

        circle18.on('click', function (evt) {
            this.setFill('#00FF00');
            layer.draw();
            eighteen = "<node>eighteen<node>";
        });

        circle19.on('click', function (evt) {
            this.setFill('#00FF00');
            layer.draw();
            nineteen = "<node>nineteen<node>";;
        });


        // add the shape to the layer
        layer.add(circle19);
        layer.add(circle18);
        layer.add(circle17);

        stage.add(layer);
    }

创建一些图形对象，如下所示：

    var graph19 = new Graph(-(4*hdist), (0*vdist),"circle19","nineteen");

然后根据用户点击的圈子调用graph19.graphNode 值来获取xml。但是，graph19.graphNode 不会动态设置这些值。我知道我在这里做错了我无法弄清楚的事情。当我设置全局变量并执行此操作时，它会起作用。我想要的是从创建的各种 Graph 对象中提取 xml。

Answer 1

如果我理解正确...您希望能够调用 graph19.graphNode，它会输出一些预定义的 xml 字符串，该字符串是动态填充的，具体取决于用户单击的圆圈。

如果是这样：

首先，为了能够从new Graph 对象调用属性graphNode，您必须指定this.graphNode 而不仅仅是graphNode。否则，当您调用 graph19.graphNode 时，它将是 undefined。

然后您需要将this 分配给一个变量，例如：var node = this;，以便您可以在点击函数中访问node。 （这是因为默认情况下，当您在 Kinetic 事件函数中使用 this 时，click 在这种情况下，this 将分配给您将事件绑定到的 Kinetic.Shape）

最后，您需要在每次单击圆圈时更新node (this.graphNode)，使用数组来跟踪选定的元素：

    this.graphNode = '';
    var node = this;
    var nodeText = '';

    circle17.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        seventeen = "<node>seventeen<node>";
        nodeText += seventeen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

    circle18.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        eighteen = "<node>eighteen<node>";
        nodeText += eighteen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

    circle19.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        nineteen = "<node>nineteen<node>";
        nodeText += nineteen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

你的代码不工作的原因是因为你已经定义了

subNodes = seventeen + eighteen + nineteen;

在seventeen eighteen 和nineteen 之前甚至已经被定义（因为它们是在用户点击各自的Kinetic.Circle 时定义的

另外，作为一个建议，我建议不要在每次调用 Graph 函数时创建一个新的 Kinetic.Layer 并将其添加到 stage，而是创建一个新的Kinetic.Group 并将其添加到layer。更多信息请看这里：What are the differences between group and layer in KineticJs

更新

好的，如果您还需要取消选择对象，我们需要跟踪数组中选择了哪些对象。然后我们可以使用该数组来确定如何填充this.graphNode。

类似这样的东西（注意我没有测试过这段代码..）：

    this.graphNode = '';
    this.selectedNodes = [];
    this.nodeText = '';
    var node = this;

    circle17.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        seventeen = "<node>seventeen<node>";
        selectedNodes.push(seventeen);
        node.nodeText = '';
        for (var i=0; i<selectedNodes.length; i++) {
          node.nodeText += selectedNodes[i];
        }
        node.graphNode = "<" + refRelTxt + ">" + node.nodeText + "<" + refRelTxt + ">";
    });

    circle18.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        eighteen = "<node>eighteen<node>";
        selectedNodes.push(eighteen);
        node.nodeText = '';
        for (var i=0; i<selectedNodes.length; i++) {
          node.nodeText += selectedNodes[i];
        }
        node.graphNode = "<" + refRelTxt + ">" + node.nodeText + "<" + refRelTxt + ">";
    });

    circle19.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        nineteen = "<node>nineteen<node>";
        selectedNodes.push(nineteen);
        node.nodeText = '';
        for (var i=0; i<selectedNodes.length; i++) {
          node.nodeText += selectedNodes[i];
        }
        node.graphNode = "<" + refRelTxt + ">" + node.nodeText + "<" + refRelTxt + ">";
    });

在此之后，您可以执行类似的操作，在 dblclick 事件中从 selectedNodes 数组中删除对象。