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对象中提取xmls。

Answer 1

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

如果是这样的话：

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

然后，您需要将this分配给变量，例如：var node = this;，以便您可以在点击功能中访问node。（这是因为默认情况下，当您在Kinetic事件函数中使用this时，点击，在这种情况下，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时定义的

另外，作为建议我建议您每次调用Kinetic.Layer函数时，不要创建新的stage并将其添加到Graph，您可能希望创建新的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 + ">";
    });

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

KineticJS在事件上设置变量值

1 个答案: