KineticJS - обновление drawFunc после объекта на другой стадии был перемещен

Question

С помощью собрата StackOverflow пользователя, я в состоянии изменить положение двух линий и круг на сцене, используя следующие:

    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); 

Он отлично работает, теперь моя задача состоит в том, если я перееду линию на втором этапе, например, горизонтальную линию, я также можно перемещать Horizonal линии на первом этапе с помощью:

 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(); 
    }); 

Однако я могу» t обновите слой, чтобы переместить также вертикальную линию и круг. Я был бы благодарен за ваши предложения, спасибо заранее.

Answer 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() с некоторым смещением так, что рисунок является относительным.

Другим подходом было бы создать группу на каждом этапе и сделать группу перетаскиваемой, таким образом, вы можете перетащить все элементы в группе одновременно и синхронно на разных этапах.