Пытаясь повернуть и преобразовать путь SVG - мне нужны вычисления тригонометрии? - PullRequest
Новая
       12

Пытаясь повернуть и преобразовать путь SVG - мне нужны вычисления тригонометрии?

3 голосов
/ 14 августа 2011

Я пытаюсь манипулировать мышью SVG-путем, который представляет собой символ резистора электроники. Этот символ требует манипуляции с концом «выводов» (если вы можете изобразить реальный резистор); поэтому я пытаюсь добиться перетаскивания 1-й точки по окружности (2-я еще есть) и ко всем точкам пути вести себя пропорционально при перетаскивании 1-й точки по новым координатам.

Попробуй сгруппировать, попробуй с тригонометрическими функциями ... так что код такой: 

   `<g id="r" >    <!-- R - group for symbol of electronics resistor -->
    <path d="M 200 20 v80 h30 v150 h-60 v-150 h30 m 0 150 v80 "
    fill="none" stroke="blue" stroke-width="5" />
    <circle  cx="200" cy="20" r="10"
    fill="blue"   />
    <circle  cx="200" cy="330" r="10"
    fill="blue"/>
    </g>`

Пожалуйста, помогите.

1 Ответ

11 голосов
/ 15 августа 2011

Я думаю, что я сделал примерно то, что вы хотите: http://dl.dropbox.com/u/169269/resistor.svg

Нажмите и перетащите резистор, чтобы масштабировать и повернуть его в это положение мыши. В этой версии толщина линий и окружностей также масштабируются, но избежать этого не должно быть слишком сложно.

Требуется тригонометрия и преобразования. Ключевой частью является функция перетаскивания, которую я объясню более подробно по адресу: http://www.petercollingridge.co.uk/interactive-svg-components/draggable-svg-element

function drag(evt)
{
   if(selected_element != 0)
   {
      var resistor_x = 200;
      var resistor_y = 100;
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;

      dx = resistor_x - mouse_x;
      dy = resistor_y - mouse_y;

      d = Math.sqrt(dx*dx + dy*dy);    // Find distance to mouse
      theta = 90+Math.atan2(dy, dx)*180/Math.PI;    //Find angle to mouse in degrees

      transform = "translate(200, 100) rotate(" + theta + ") scale(" + d/310 + ")" ;
      selected_element.setAttributeNS(null, "transform", transform);
   }
}

Обратите внимание, что в этом коде предполагается, что резистор имеет длину 310 пикселей и вращается примерно на (200, 100). Преобразования масштабирования и вращения работают с центром в (0,0), поэтому вы должны нарисовать резистор со статической точкой в ​​(0,0), а затем перевести его туда, куда вы хотите.

...