두 개의 라파엘 오브젝트 사이에 드래그 한 선 그리기

두 개의 라파엘 오브젝트 사이에 선 커넥터를 그리려고했지만이 작업을 수행 할 수 없습니다.두 개의 라파엘 오브젝트 사이에 드래그 한 선 그리기

jsPlumb을 시도했지만 div 태그에서만 작동합니다. 나는 graphafect 사각형 객체에 끝점을 그려야한다. 나는 이미 이것을 시도했다. 나는 라파엘 객체 jsplumb 사용되는 아래

내 코드 :

$("#btnAI, #btnDI").live("click", function() { 

     if(this.id == "btnAI") 
      text = "AI"; 
     else 
      text = "DI"; 

     var Execount = "#" + (++ecount); 
     var SetAI = paper.set().draggable.enable(); 
     // create a set to store AI 

     var outerRect = getRectangle(paper, 30, 40, 120, 120, "white", "Gray", 5); 
     // outer Rectangle 
     SetAI.push(outerRect); 

     var InnerRect = getRectangle(paper, 40, 50, 100, 100, "#5a5a5a", "Gray", 5); 
     // inner Rectangle 
     SetAI.push(InnerRect); 

     SetAI.push(GetText(paper, 90, 70, text + uniqueId("AI"))); 
     // text to display which contact 

     SetAI.push(GetText(paper, 110, 130, Execount)); 
     // text for unique id 

     SetAI.push(GetLine(paper, 40, 80, 100, 0)); 
     //upper line 

     SetAI.push(GetLine(paper, 40, 120, 100, 0)); 
     //lower line 

     SetAI.push(getRectangle(paper, 99, 90, 41, 20, null, "#FFF", 0)); 
     //rect to display o/p value 

     SetAI.push(getRectangle(paper, 40, 85, 48, 30, null, "#FFF", 0)); 
     //rect to display o/p value 

     jsPlumb.setMouseEventsEnabled(true); 
       jsPlumb.setRenderMode(); 
       jsPlumb.Defaults.Container = 'canvasdiv'; 
       jsPlumb.Defaults.Overlays = [["Arrow", { 
          location : 0.9 
         }], ["Label", { 
          location : 0.1, 
          label : function(label) { 
           return label.connection.labelText || ""; 
          }, 
          cssClass : "aLabel" 
         }]]; 
       outerRect.node.setAttribute("class","jsclass"); 
       var sourceEndpoint = { 
         endpoint : "Rectangle", 
         paintStyle : { 
          fillStyle : "red", 
          width:20, 
          height:15 
         }, 
         isSource : true, 
         connector : ["Flowchart", { 
          stub : 40 
         }], 
         connectorStyle : { 
         lineWidth : 3, 
         joinstyle : "round", 
         strokeStyle :"Green", 
        }, 
         connectorHoverStyle :{ 
         lineWidth : 3, 
         strokeStyle : "#2e2aF8" 
        }, 
         dropOptions : { 
          hoverClass : "hover", 
          activeClass : "active", 
          zIndex:1000 
         }, 
       } 

       var targetEndpoint = { 
         endpoint : "Rectangle", 
         paintStyle : { 
          fillStyle : "green", 
          width:20, 
          height:15 
         }, 
         isTarget : true, 
         connector : ["Flowchart", { 
          stub : 40 
         }], 
         connectorStyle : { 
         strokeStyle : "#FF3333", 
         lineWidth : 2 
        }, 
        dropOptions : { 
          hoverClass : "hover", 
          activeClass : "active" 
         }, 
       } 

       jsPlumb.addEndpoint(outerRect.node, {anchor : "BottomCenter"}, sourceEndpoint); 
       //jsPlumb.addEndpoint(outerRect.node, {anchor : "RightMiddle"}, targetEndpoint); 
       jsPlumb.draggable($(".jsclass"));

이 밖으로 도와주세요.

출처

2012-06-19 Harshal Chauhari

설명 Harshal, 당신이 설명하는 것은 성취하기 쉽습니다. 그러나 누구든지 코드를 모험하기 전에, 당신이 염두에두고있는 것의 예나 일러스트레이션을 지적하는 것이 좋습니다. 어떤 종류의 래퍼 객체입니까? 어떤 종류의 커넥터와 어떤 기능이 있습니까? 제발 좀 더 자세하게. –

우리는 당신을 위해 당신의 코드를 쓰지 않을 것이고, 이것이 왜 당신이 downvotes를 얻고 있는지입니다. 직접 해보십시오. 그런 다음 효과가 없다면 어떻게했는지 보여주십시오. – SomeKittens

좋은 jQuery 선 그리기 프로그램은 jsPlumb입니다.

출처

2012-06-19 20:59:29 SomeKittens

jsPlumb을 시도했지만 div 태그에서만 작동합니다. 나는 graphafect 사각형 객체에 끝점을 그려야한다. 어떻게해야합니까? 나는 이미 이것을 시도했다. –

두 개의 라파엘 오브젝트 사이에 드래그 한 선 그리기

답변

관련 문제