キャンバスに2本以上の矢印線を移動

Question

これはkinetic.jsを使用したコードです マウスを使用して3行を描いて移動します。

$(document).ready(function(){ 

var y1=50; 
var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 578, 
      height: 200 
    }); 

var layer = new Kinetic.Layer(); 

var group=new Kinetic.Group({ 
      draggable: true, 
      dragConstraint : 'horizontal' 
    }); 


var lineme =function(pts){ 
var line1 = new Kinetic.Line({ 
     points: pts, 
     stroke: "black", 
     strokeWidth: 4, 
     lineCap: 'round', 
     lineJoin: 'round', 
    }); 
    group.add(line1); 
    } 
for(a=0;a<=2;a++) 
{ 
    var points1 = [{ 
      x: 73, 
      y: y1 
     }, { 
      x: 300, 
      y: y1 
     }]; 

     lineme(points1); 
     y1=y1+50; 
    } 

    group.on("mouseover", function(){ 
      document.body.style.cursor = "pointer"; 
     }); 
    group.on("mouseout", function() { 
     document.body.style.cursor = "default"; 
    }); 

    // add the shape to the layer  
    layer.add(group); 
    // add the layer to the stage 
    stage.add(layer); 

}); 

私は矢印線を描きたいもっと時間をかけましたが、適切な解決策を見つけることができません。彼らの矢印はキネティックスの機能で誰でも助けることができます

Answer 1

グループを作成し、両方の行をグループに追加する必要があります。

次の例を確認してください： http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/

はそれが役に立てば幸い！

Answer 2

var line2 = ..... 
// add another line to the layer before adding it to the stage 
layer.add(line2); 

確かにですか？