ポインタダウンイベントでダイナミックリンクを作成する-JointJS

Question

JointJSでポートから描画するかハローを使用するのではなく、参照点（x、y）から対話的なダイナミックリンクを作成できますか？

よろしく Achyut

Answer 1

これを解決するのに役立つかもしれないJointJSでいくつかのドキュメント化されていない方法があります。より多くのインライン。

paper.on('blank:pointerdown', function(evt, x, y) { 

    var linkView = this.getDefaultLink() 
      .set({ 
       'source': { x: x, y: y }, 
       'target': { x: x, y: y } 
      }) 
      .addTo(this.model) 
      .findView(this); 

    // initiate the linkView arrowhead movement 
    linkView.startArrowheadMove('target'); 

    $(document).on({ 
     'mousemove.example': onDrag, 
     'mouseup.example': onDragEnd 
    }, { 
     // shared data between listeners 
     view: linkView, 
     paper: this 
    }); 


    function onDrag(evt) { 
     // transform client to paper coordinates 
     var p = evt.data.paper.snapToGrid({ 
      x: evt.clientX, 
      y: evt.clientY 
     }); 
     // manually execute the linkView mousemove handler 
     evt.data.view.pointermove(evt, p.x, p.y); 
    } 

    function onDragEnd(evt) { 
     // manually execute the linkView mouseup handler 
     evt.data.view.pointerup(evt); 
     $(document).off('.example'); 
    } 

});