Scale & Trig Программирование Проблема / Застрял - PullRequest
Новая
       7

Scale & Trig Программирование Проблема / Застрял

1 голос
/ 11 января 2012

Я действительно застрял в этой проблеме. Я пытаюсь разработать фото-кроппер с масштабирующим кругом, который использует SVG и имеет две ручки: одну для увеличения / уменьшения окружности, а другую - для ее перемещения. Перемещающаяся часть проста, но проблема в масштабировании.

https://skitch.com/sverbeek/ga5qt/photo.html

У меня есть вышеуказанная настройка системы (обратите внимание, что ручка шкалы - это та, которая не прикреплена, так как она переместилась), и она движется вдоль плоскости 65 °; (который может измениться позже в зависимости от того, как это работает). Эта часть отлично работает, но теперь я до мелочей. Я получаю разницу между тем, где инструмент масштабирования начал перемещаться, и тем, где он закончился, относительно X, Y (так, например, 0,0 будет тем, с чего он начнется, если я переместлю его вверх / вправо, он перейдет от 0,0 до 10 -10 например (отрицательный Y и положительный X) и наоборот для другой стороны).

Но мне нужно как-то превратить эту разницу в движении в число от 0,3 до 2,3, где 0. # будет уменьшаться (влево / вниз), а 1 / 2. # будет идти вверх / вправо. И мне нужно, чтобы он был пропорционален ручке, чтобы ручка всегда была прикреплена.

Но я так застрял, что просто не могу понять, куда идти. Я сделал jsfiddle в http://jsfiddle.net/FW4UB/

1 Ответ

1 голос
/ 12 января 2012

Чтобы найти положение ручки шкалы, вам не требуется триггер, просто инвертируйте ось y.Ось x совпадает с вашим инструментом масштабирования: 

i.handles.scaleTool.translate(newX-i.handles.scaleTool.ox,newY-i.handles.scaleTool.oy);
//Same formula except for a *-1 in the y axis
i.handles.dragTool.translate(newX-i.handles.scaleTool.ox,(newY-i.handles.scaleTool.oy)*-1);

Чтобы соответственно масштабировать окружность, вам нужно использовать теорему Пифагора, которая утверждает, что a2 + b2 = c2, что в переводе в ваш код выглядит следующим образом:. 

myset[0].attr({"r": Math.sqrt( Math.pow((myset[0].attr("cx")-cx),2) + Math.pow((myset[0].attr("cy")-cy),2))-15});

Вы можете посмотреть демо здесь http://jsfiddle.net/A3TPh/

...