0

仲間のstackoverflowユーザーの助けを借りて、次の方法を使用して、ステージ上の2本の線と1つの円の位置を変更できます。

                   var circle2 = new Kinetic.Circle({
                    drawFunc: function(canvas) {
                        var context2 = canvas.getContext();
                        var centerX2 = blueLine2.getPosition().x;
                        centerY2 = greenLine2.getPosition().y;
                        context2.drawImage(gArrow2, -156, -23 + centerY2, 11, 23);
                        context2.drawImage(gArrow2, 156, -23 + centerY2, 11, 23);
                        context2.drawImage(bArrow2, centerX2, 156, 23, 11);
                        context2.drawImage(bArrow2, centerX2, -156, 23, 11);  
                        context2.beginPath();
                        context2.arc(centerX2, centerY2, this.getRadius(), 0, 2 * Math.PI, false);
                        context2.lineWidth = this.getStrokeWidth();
                        context2.strokeStyle = this.getStroke();
                        context2.stroke();
                    },
                    x: cx + gx,
                    y: cy + gy,
                    radius: 70,
                    stroke: '#00ffff',
                    strokeWidth: 3,
                    opacity: 0.5
                });
                layer2.add(circle2);

これはうまく機能します。今の私の課題は、水平線などの2番目のステージで線を移動する場合、次を使用して1番目のステージで水平線を移動することもできます。

        greenLine2.on('dragend', function (event) {
        var y1 = greenLine2.getPosition().y;
        greenLine3.setPoints([0, 256 + y1, 512, 256 + y1]);
        centerY3 = 256 + y1;
        layer3.draw();
        layer2.draw();
    });

ただし、レイヤーを更新して、垂直線と円も移動することはできません。よろしくお願いします。

4

1 に答える 1

1

移動しているのが greenLine2 で、別のステージの同じ位置に greenLine3 を移動するとします。ステージは同じサイズであると仮定しますが、これらの変更を考慮してコードを変更できます。

 greenLine2.on('dragmove', function (event) {
    var userPos = stage.getUserPosition();  //if this doesnt work the way you need, try a different approach, such as below:
    //var userPos = greenLine.getPosition(); //other possibility
    greenLine3.setPosition(userPos);
    layer3.draw();
    layer2.draw();
 });

他のものも移動させたい場合は、.setPosition() を使用して同じ種類のコードを実行し、オフセットを指定して描画が相対的になるようにすることができます。

別のアプローチは、各ステージでグループを作成し、グループをドラッグ可能にすることです。これにより、グループ内のすべてのアイテムを同時に、ステージ間で同期してドラッグできます。

于 2013-03-21T15:07:57.310 に答える