2013-06-04 2 views
0

paperJS를 사용하여 간단한 이미지 마커를 만들었습니다. 이제는 실행 취소 옵션을 추가하여 모든 좌표 위치와 실행 취소 단추를 저장해야합니다. 나는 이것을 어떻게 할 수있는 사람이 나를 도울 수 있습니다. 이것은 내 스크립트입니다.모양의 좌표를 가져 오는 PaperJS (원, 사각형 등)

function onMouseDrag(event) { 
      if(set == 1){ 
        path = new Path.Circle({ 
         center: event.point, 
         radius: (event.downPoint - event.point).length, 
         fillColor: null, 
         strokeColor: '#e9e9ff', 
         strokeWidth: 1 
        }); 
      }else if(set == 2){ 
       var rectangle = new Rectangle(event.point, event.downPoint); 
       var path = new Path.Rectangle(rectangle); 
       path.fillColor = null; 
       path.strokeColor = '#e9e9ff'; 
       path.strokeWidth = 1; 
      }else if(set == 3){ 
       var path = new Path.Line({ 
         from: event.point, 
         to : event.downPoint, 
         strokeColor: 'black' 
        }); 
      }else if(set == 4){ 
         var path = new PointText({ 
         point: event.point, 
         content: 'The contents of the point text', 
         fillColor: 'black', 
         fontSize: 25 
        }); 
      } 
        path.removeOnDrag(); 
     }; 

     function onMouseUp(event) { 
       circles.push(path); 
     }; 

그리고 내 html입니다.

<div class="menu-list"> 
    <input type="button" value="Circle" onClick="return set=1;"> 
    <input type="button" value="Rectangle" onClick="return set=2;"> 
    <input type="button" value="Line" onClick="return set=3;"> 
    <input type="button" value="Text" onClick="return set=4;"> 
</div> 
<div class="img-mark"> 
    <canvas id="canvas" resize></canvas> 
</div> 
<div class="mark-list"> 

</div> 
+0

을 호출 할 수 있습니다. 모양을 재정렬하지 않으므로 실행 취소 단추를 사용하여 원형 배열의 마지막 자식을 제거하지 않을까요? –

+0

첫 번째 원을 만들면 circle1로 표시되고 두 번째 circle2에 대해서는 circle1 또는 circle2 중 하나를 삭제할 수 있습니다. 당신이 이해할 수없는 경우 참조 사이트를 제공한다. – chiyango

+0

예, 참조 사이트를 환영합니다 –

답변

0

내가 당신이 원하는 것을 이해한다면, 확실히 모르겠지만,이 시도 : 당신은 특정 경로를 선택하거나 hitResult의 도움으로 형성 할 수

var hitResult = project.hitTest(event.point, hitOptions); 
if (!hitResult) { 
    return; 
} else { 
    path = hitResult.item; 
} 

이 예제를 참조 대신 set == x를 사용하는 당신이해야합니다 : 사용자 안타

PS를 삭제 http://paperjs.org/examples/hit-testing/
다음은 path.remove()를 호출 할 수 있습니다 (http://paperjs.org/reference/path) 봐 http://paperjs.org/reference/tool. circleTool = new Tool();으로 다른 도구를 정의하고 circleTool.activate()circleTool.onMouseDown = function() {...}