0

我在一个对象中定义了几个 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。

4

1 回答 1

1

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

如果是这样的话：

首先，为了能够graphNode从new Graph对象调用属性，您必须分配this.graphNode而不是单独分配graphNode。否则当你调用graph19.graphNode它时undefined。

然后您需要分配this给一个变量，例如：var node = this;以便您可以node在 click 函数中访问。（这是因为默认情况下，当您this在 Kinetic 事件函数中使用时，在这种情况下单击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. 有关更多信息，请参见此处：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

于 2013-09-16T16:22:59.560 回答