ОБНОВЛЕНО: логика Javascript для исправления в небольшой функции (SVG, получение абсолютных COORDS)

Question

NEW: Так вот код на codepen: http://codepen.io/cmer41k/pen/pRJNww/

В настоящее время функционирует UpdateCoords (перетаскиваемость) - закомментировано в коде ,

Я хотел бы обновить на mouseup событие координаты пути (круг как путь здесь) до абсолютных и удалить атрибут transform.

Но я не в состоянии сделать это; ((жаль только обучение

OLD:

В моем коде у меня есть SVG элемент (путь), который получает тащили вокруг корня SVG OBJ (SVG) через преобразование = «переводить (х, у)» свойство.

Я хотел обновить атрибут «D» такого пути элемента (строка, которая описывает все COORDS) использовать абсолютные координаты и избавиться от трансформируются \ переводить вещь.

В основном: : 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 

// controlPoints здесь просто место в объекте пути, где я хранить COORDS на пути.

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

Хорошо, код перекошен в настоящее время функционирует правильно!

Итак, после того как я понял, как правильно получить матрицу, у меня все еще было странное смещение для любых последующих перетаскиваний. Мне стало ясно, что эти перемещения происходят еще до моей функции. Я немного отлаживал его и понял, что я не очищаю параметры ._x и ._y, которые я использую для перетаскивания.

Теперь код работает!

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; 
    } 

}