SVG Editor 분석-3 Path 포인트 정의하기
SVG Editor 에서는 SVG 에디터 답게 SVG의 패스포인트를 직접 수정할 수 있다. path 의 경우 객체에 마우스를 두번 클릭하면 자동적으로 path 포인트를 따낸다. 하지만 rect나 polyline , ellipse같은 경우 상단 메뉴에서 convert to path 로 변경하면 type 을 path로 변경하면서 중요 포인트 (각) 를 path 포인트로 짚어낸다.
태그 자체를 path 로 변경하고 d 를 attribute 로 추가하여 d의 path 포인트를 따내니 정말 훌륭하다.
새삼 이세상에는 진짜 외계인을 옆에 두고 고문하면서 개발하는 개발자들이 많다는걸 느낀다.
각설하고, path 로 변경되면서 각 path 포인트를 직접 수정할 수 있도록 하는데 그 과정의 로직을 정리해본다.
convert to path 버튼을 눌러 path로 변경된 이후 다시 클릭하면 mousedown 이벤트가 발생한다.
var mouseUp = function(evt) { if (evt.button === 2) {return;} var tempJustSelected = justSelected; justSelected = null; if (!started) {return;} var pt = svgedit.math.transformPoint(evt.pageX, evt.pageY, root_sctm), mouse_x = pt.x * current_zoom, mouse_y = pt.y * current_zoom, x = mouse_x / current_zoom, y = mouse_y / current_zoom, element = svgedit.utilities.getElem(getId()), keep = false; var real_x = x; var real_y = y; // TODO: Make true when in multi-unit mode var useUnit = false; // (curConfig.baseUnit !== 'px'); started = false; var attrs, t; switch (current_mode) { // intentionally fall-through to select here case "resize": case "multiselect": if (rubberBox != null) { rubberBox.setAttribute("display", "none"); curBBoxes = []; } current_mode = "select"; case "select": if (selectedElements[0] != null) { // if we only have one selected element if (selectedElements[1] == null) { // set our current stroke/fill properties to the element's var selected = selectedElements[0]; switch ( selected.tagName ) { case "g": case "use": case "image": case "foreignObject": break; default: cur_properties.fill = selected.getAttribute("fill"); cur_properties.fill_opacity = selected.getAttribute("fill-opacity"); cur_properties.stroke = selected.getAttribute("stroke"); cur_properties.stroke_opacity = selected.getAttribute("stroke-opacity"); cur_properties.stroke_width = selected.getAttribute("stroke-width"); cur_properties.stroke_dasharray = selected.getAttribute("stroke-dasharray"); cur_properties.stroke_linejoin = selected.getAttribute("stroke-linejoin"); cur_properties.stroke_linecap = selected.getAttribute("stroke-linecap"); } if (selected.tagName == "text") { cur_text.font_size = selected.getAttribute("font-size"); cur_text.font_family = selected.getAttribute("font-family"); } selectorManager.requestSelector(selected).showGrips(true); // This shouldn't be necessary as it was done on mouseDown... // call("selected", [selected]); } // always recalculate dimensions to strip off stray identity transforms recalculateAllSelectedDimensions(); // if it was being dragged/resized if (real_x != r_start_x || real_y != r_start_y) { var i, len = selectedElements.length; for (i = 0; i < len; ++i) { if (selectedElements[i] == null) {break;} if (!selectedElements[i].firstChild) { // Not needed for groups (incorrectly resizes elems), possibly not needed at all? selectorManager.requestSelector(selectedElements[i]).resize(); } } } // no change in position/size, so maybe we should move to pathedit else { t = evt.target; if (selectedElements[0].nodeName === "path" && selectedElements[1] == null) { // 아래 pathActions.select로 넘어간다. pathActions.select(selectedElements[0]); } // if it was a path // else, if it was selected and this is a shift-click, remove it from selection else if (evt.shiftKey) { if (tempJustSelected != t) { canvas.removeFromSelection([t]); } } } // no change in mouse position // Remove non-scaling stroke if (svgedit.browser.supportsNonScalingStroke()) { var elem = selectedElements[0]; if (elem) { elem.removeAttribute('style'); svgedit.utilities.walkTree(elem, function(elem) { elem.removeAttribute('style'); }); } } } return;
selectedElements 가 사용자가 미리 selete 해놓았던 path 객체가 된다.
해당 path 객체를 가지고 select 를 거친 후 toEditMode 로 target을 가지고 들어간다.
select: function(target) {
if (current_path === target) {
pathActions.toEditMode(target);
current_mode = "pathedit";
} // going into pathedit mode
else {
current_path = target;
}
},그다음 current_path 가 target 즉 최근에 선택한 path 가 가져온 target 과 맞는 요소인지 검사한다. 즉, 미리 선택된 요소가 path 이고 그 path 요소가 지금 선택해서 가지고 들어온 target과 동일한 요소라는게 판명되면 pathActions.toEditMode로 간다.
toEditMode: function(element) {
svgedit.path.path = svgedit.path.getPath_(element);
current_mode = "pathedit";
clearSelection();
svgedit.path.path.show(true).update();
svgedit.path.path.oldbbox = svgedit.utilities.getBBox(svgedit.path.path.elem);
subpath = false;
},처음 path값을 가져오므로 path를 init(초기화) 해야한다. getPath_ 메소드로 이동하는데 element 파라미터는 아직 target 이다.
path.js 에서 path를 init 한다.
파라미터 elem은 넘겨받은 target이다
svgedit.path.getPath_ = function(elem) {
var p = pathData[elem.id];
if (!p) {
p = pathData[elem.id] = new svgedit.path.Path(elem);
}
return p;
};svgedit.path.Path = function(elem) {
if (!elem || elem.tagName !== 'path') {
throw 'svgedit.path.Path constructed without a element';
}
this.elem = elem;
this.segs = [];
this.selected_pts = [];
svgedit.path.path = this;
this.init();
};
// Reset path data
svgedit.path.Path.prototype.init = function() {
// Hide all grips, etc
$(svgedit.path.getGripContainer()).find('*').attr('display', 'none');
var segList = this.elem.pathSegList;
var len = segList.numberOfItems;
this.segs = [];
this.selected_pts = [];
this.first_seg = null;
// Set up segs array
var i;
for (i = 0; i < len; i++) {
var item = segList.getItem(i);
var segment = new svgedit.path.Segment(i, item);
segment.path = this;
this.segs.push(segment);
}
var segs = this.segs;
var start_i = null;
for (i = 0; i < len; i++) {
var seg = segs[i];
var next_seg = (i+1) >= len ? null : segs[i+1];
var prev_seg = (i-1) < 0 ? null : segs[i-1];
var start_seg;
if (seg.type === 2) {
if (prev_seg && prev_seg.type !== 1) {
// New sub-path, last one is open,
// so add a grip to last sub-path's first point
start_seg = segs[start_i];
start_seg.next = segs[start_i+1];
start_seg.next.prev = start_seg;
start_seg.addGrip();
}
// Remember that this is a starter seg
start_i = i;
} else if (next_seg && next_seg.type === 1) {
// This is the last real segment of a closed sub-path
// Next is first seg after "M"
seg.next = segs[start_i+1];
// First seg after "M"'s prev is this
seg.next.prev = seg;
seg.mate = segs[start_i];
seg.addGrip();
if (this.first_seg == null) {
this.first_seg = seg;
}
} else if (!next_seg) {
if (seg.type !== 1) {
// Last seg, doesn't close so add a grip
// to last sub-path's first point
start_seg = segs[start_i];
start_seg.next = segs[start_i+1];
start_seg.next.prev = start_seg;
start_seg.addGrip();
seg.addGrip();
if (!this.first_seg) {
// Open path, so set first as real first and add grip
this.first_seg = segs[start_i];
}
}
} else if (seg.type !== 1){
// Regular segment, so add grip and its "next"
seg.addGrip();
// Don't set its "next" if it's an "M"
if (next_seg && next_seg.type !== 2) {
seg.next = next_seg;
seg.next.prev = seg;
}
}
}
return this;
}; init 메소드를 거치면서 seg 를 정의한다. seg 는 path point 이다. seglist 는 path point를 모아놓은 list가 된다. 하단 for 문의 if else if 문을 거치면서 각 path point 를 직접 객체에 포인트를 그리게 된다. segtype 과 next segtype 을 구분하면서 객체의 path point 사이의 line 색상 을 추가하고 마지막으로 초기 default 로 지정될 path point 사이의 path line 을 제외한 나머지 line들을 display none 상태로 처리하여 마무리한다. clearSelection 은 selection point 진한 파란색 포인트를 안보이는 상태로 바꾼다.
addGrip() 부분
잡는 부분 즉, pathpoint를 잡아서 끌어당길 수 있는 포인트를 정의한다.
getPointGrip 와 getControlPoints 는 각각 포인트를 정의한다.
getSegSelector 는 라인을 지정 정의한다. (segLine)
HTML DOM 구조에서는 g태그의 id는 pathpointgrip_container 이다.svgedit.path.Segment.prototype.addGrip = function() {
this.ptgrip = svgedit.path.getPointGrip(this, true);
this.ctrlpts = svgedit.path.getControlPoints(this, true);
this.segsel = svgedit.path.getSegSelector(this, true);
};svgedit.path.getPointGrip = function(seg, update) {
var index = seg.index;
var pointGrip = svgedit.path.addPointGrip(index);
if (update) {
var pt = svgedit.path.getGripPt(seg);
svgedit.utilities.assignAttributes(pointGrip, {
'cx': pt.x,
'cy': pt.y,
'display': 'inline'
});
}
return pointGrip;
};svgedit.path.getControlPoints = function(seg) {
var item = seg.item;
var index = seg.index;
if (!('x1' in item) || !('x2' in item)) {return null;}
var cpt = {};
var pointGripContainer = svgedit.path.getGripContainer();
// Note that this is intentionally not seg.prev.item
var prev = svgedit.path.path.segs[index-1].item;
var seg_items = [prev, item];
var i;
for (i = 1; i < 3; i++) {
var id = index + 'c' + i;
var ctrlLine = cpt['c' + i + '_line'] = svgedit.path.getCtrlLine(id);
var pt = svgedit.path.getGripPt(seg, {x:item['x' + i], y:item['y' + i]});
var gpt = svgedit.path.getGripPt(seg, {x:seg_items[i-1].x, y:seg_items[i-1].y});
svgedit.utilities.assignAttributes(ctrlLine, {
'x1': pt.x,
'y1': pt.y,
'x2': gpt.x,
'y2': gpt.y,
'display': 'inline'
});
cpt['c' + i + '_line'] = ctrlLine;
// create it
var pointGrip = cpt['c' + i] = svgedit.path.addCtrlGrip(id);
svgedit.utilities.assignAttributes(pointGrip, {
'cx': pt.x,
'cy': pt.y,
'display': 'inline'
});
cpt['c' + i] = pointGrip;
}
return cpt;
};svgedit.path.getSegSelector = function(seg, update) {
var index = seg.index;
var segLine = svgedit.utilities.getElem('segline_' + index);
if (!segLine) {
var pointGripContainer = svgedit.path.getGripContainer();
// create segline
segLine = document.createElementNS(NS.SVG, 'path');
svgedit.utilities.assignAttributes(segLine, {
'id': 'segline_' + index,
'display': 'none',
'fill': 'none',
'stroke': '#0FF',
'stroke-width': 2,
'style':'pointer-events:none',
'd': 'M0,0 0,0'
});
pointGripContainer.appendChild(segLine);
}
if (update) {
var prev = seg.prev;
if (!prev) {
segLine.setAttribute('display', 'none');
return segLine;
}
var pt = svgedit.path.getGripPt(prev);
// Set start point
svgedit.path.replacePathSeg(2, 0, [pt.x, pt.y], segLine);
var pts = svgedit.path.ptObjToArr(seg.type, seg.item, true);
var i;
for (i = 0; i < pts.length; i += 2) {
pt = svgedit.path.getGripPt(seg, {x:pts[i], y:pts[i+1]});
pts[i] = pt.x;
pts[i+1] = pt.y;
}
svgedit.path.replacePathSeg(seg.type, 1, pts, segLine);
}
return segLine;
};