试图旋转和转换SVG路径 - 我需要三角计算吗？

Question

我试图用鼠标SVG路径操纵,它表示电子电阻的符号.此符号需要在"引线"结束时进行操作(如果可以拍摄实际电阻); 因此,我试图实现第一点arround(第二个仍然存在)以及在新坐标上拖动第一个点时按比例行为的所有路径点.

尝试分组,尝试使用三角函数...所以代码如下:

   `<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>`

请帮忙.

Answer 1

我想我已经大致做了你想要的东西: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)的电阻,然后将其转换为您想要的位置.