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動的に値を設定することはできません。私はここで私が理解できない何か間違ったことをしていることを知っています。グローバル変数を設定してこれを行うと、機能します。私が望むのは、作成されたさまざまなグラフ オブジェクトから xml を抽出することです。

4

1 に答える 1

1

私が正しく理解している場合...呼び出すことができるようにしたい場合、ユーザーがクリックした円に応じて動的にgraph19.graphNode入力される事前定義されたxml文字列を出力します。

もしそうなら：

graphNodeまず、オブジェクトからプロパティを呼び出せるようにするには、それ自体ではなくnew Graph代入する必要があります。それ以外の場合は、呼び出すと になります。this.graphNodegraphNodegraph19.graphNodeundefined

次に、クリック関数内でアクセスできるように、次thisのような変数に割り当てる必要があります。(これは、デフォルトで、キネティック イベント関数内で使用すると、この場合クリックが、イベントをバインドしているに割り当てられるためです)var node = this;nodethisthisKinetic.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

また、提案として、関数を呼び出すたびに new を作成しKinetic.Layerて に追加するのではなく、代わりに new を作成して に追加することをお勧めします。詳細については、こちらを参照してください: KineticJs のグループとレイヤーの違いは何ですかstageGraphKinetic.Grouplayer

アップデート

オブジェクトの選択も解除する必要がある場合は、配列内でどのオブジェクトが選択されているかを追跡する必要があります。次に、その配列を使用して、どの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 に答える