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>
을 호출 할 수 있습니다. 모양을 재정렬하지 않으므로 실행 취소 단추를 사용하여 원형 배열의 마지막 자식을 제거하지 않을까요? –
첫 번째 원을 만들면 circle1로 표시되고 두 번째 circle2에 대해서는 circle1 또는 circle2 중 하나를 삭제할 수 있습니다. 당신이 이해할 수없는 경우 참조 사이트를 제공한다. – chiyango
예, 참조 사이트를 환영합니다 –