尝试旋转和变换SVG路径-我需要三角计算

Trying to rotate and transform SVG path - do I need trigonometry calculations?

本文关键字：三角 计算 路径 旋转 变换 SVG      更新时间：2023-09-26

我试图用鼠标操纵SVG路径，它代表电子电阻的符号。这个符号需要操作结束的"引线"(如果你能想象真正的电阻);因此，我试图实现拖动第一个点(第二个仍然在那里)，并在拖动新坐标上的第一个点时，对路径的所有点表现成比例。

尝试分组，尝试用三角函数…代码是这样的:

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

请帮助。

我想我已经大致做了你想要的: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)处绘制具有静态点的电阻，然后将其转换到您想要的位置。

相关文章：