업데이트 : 그래서 여기 codepen의 코드 : 자바 로직

Question

NEW (절대 좌표를 획득하는, SVG) 작은 함수에서 수정 http://codepen.io/cmer41k/pen/pRJNww/

현재 UpdateCoords (드래그)를 작동 - 코드에 주석 .

내가 원했던 것은 path (절대 경로)를 mouseup 이벤트에서 절대 좌표로 업데이트하고 transform 특성을 제거하는 것입니다.

하지만 그렇게 실패하고 ((죄송 만

OLD 학습 : 내 코드에서

을 내가 SVG 요소 (경로가) 루트 SVG의 OBJ (SVG)를 통해 주위에 끌고 가도록 "(x, y)로 번역"= transform 속성.

나는 그런 경로 요소의 속성 "D"를 업데이트하고 싶었 절대 좌표를 사용하고 \ 일을 번역 변형 제거 (모든 좌표를 설명하는 문자열).

기본적으로 : 은 다음과 같습니다. d = "M10,10 30,10 20,30"+ transform = "translate (20,0); : d = "M30,10 50,10 40,30"+ transform = "translate (0,0)"(또는 변환을 삭제할 수있는 경우) -

저를위한 것, 그러나 적당한 결과를 막는 벌레가있다.

나는 내가 여기에 뭔가 잘못하고있는 중이 야 확신 : 여기

var v = Object.keys(path.controlPoints).length 

// 제어점은 그냥 경로의 좌표를 저장 경로 객체의 장소입니다.

var matrix = path.transform.baseVal.consolidate(); 

// 위의 행이 올바른 x, y 변환 값을 가진 적절한 변환 행렬을 제공함을 확인했습니다. 지금은 경로의 모든 제어 포인트 (좌표)를 통해 루프를 시도하고 업데이트하고 아래

for (i=0; i<v; i++) { 
    var position = svg.createSVGPoint(); 
    position.x = path.controlPoints["p"+i].x; 
    position.y = path.controlPoints["p"+i].y; 

// 내가 (또는 그렇게 나는 생각한다) 행렬 데이터를 활용할 수있는 중간 svgpoint을 만들 경로의 제어점의 각 있도록 구식 코디를 새로운 코디로 변환합니다.

position = position.matrixTransform(matrix); 
    path.controlPoints["p"+i].x = position.x; 
    path.controlPoints["p"+i].y = position.y; 
} 

// 나는이 루프 또는 무엇이든지이 위치 일을 재설정/"청소"아니에요 어쩌면 그것 때문에 내가 잘못 여기서 뭔가를하고있는 중이 야 확신? 이 코드에서 내가 설명하는 목표를 제공 냈다 - - 난 그냥 물건을 배우고 질문은, 프로그래머 아니다

미안 내가 "위치"를 처리하는 방법에 뭔가 문제인가?

Answer 1

좋아는 냈다 코드는 제대로 작동! 나는 여전히 후속 draggables에 대한 이상한 변위를 가지고 제대로 행렬을 얻는 방법을 생각 그래서 후

. 나는 그 변위가 내 기능 이전에 일어났다는 것이 분명 해졌다. 나는 그것을 조금 디버깅 그리고 내가 ._x을 삭제되지 않았고 ._y 내가 드래그에 사용하는 PARAMS 것을 깨달았다.

이제 코드가 작동합니다.

http://codepen.io/cmer41k/pen/XpbpQJ

var svgNS = "http://www.w3.org/2000/svg"; 
var draggable = null; 
var canvas = {}; 
var inventory = {}; 
var elementToUpdate = {}; 

//debug 
var focusedObj = {}; 
var focusedObj2 = {}; 
// to be deleted 

window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    inventory = document.getElementById("inventory"); 
    AddListeners(); 
} 
function AddListeners() { 
document.getElementById("svg").addEventListener("mousedown", Drag); 
document.getElementById("svg").addEventListener("mousemove", Drag); 
document.getElementById("svg").addEventListener("mouseup", Drag); 
} 

// Drag function // 
function Drag(e) { 
var t = e.target, id = t.id, et = e.type; m = MousePos(e); //MousePos to ensure we obtain proper mouse coordinates 
if (!draggable && (et == "mousedown")) { 
    if (t.className.baseVal=="inventory") { //if its inventory class item, this should get cloned into draggable 
     copy = t.cloneNode(true); 
     copy.onmousedown = copy.onmouseup = copy.onmousemove = Drag; 
     copy.removeAttribute("id"); 
     copy._x = 0; 
     copy._y = 0; 
     canvas.appendChild(copy); 
     draggable = copy; 
     dPoint = m; 
     } 
     else if (t.className.baseVal=="draggable") { //if its just draggable class - it can be dragged around 
      draggable = t; 
      dPoint = m; 
     } 
    } 
    // drag the spawned/copied draggable element now 
    if (draggable && (et == "mousemove")) { 
     draggable._x += m.x - dPoint.x; 
     draggable._y += m.y - dPoint.y; 
     dPoint = m; 
     draggable.setAttribute("transform", "translate(" +draggable._x+","+draggable._y+")"); 
    } 
    // stop drag 
    if (draggable && (et == "mouseup")) { 
     draggable.className.baseVal="draggable"; 
    UpdateCoords(draggable); 
    console.log(draggable); 
    draggable._x = 0; 
    draggable._y = 0; 
    draggable = null; 
    } 

} 우리가 당신을 도울 당신이 [mcve] 생성 및 추가 한 경우