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

【问题标题】：Trying to rotate and transform SVG path - do I need trigonometry calculations?尝试旋转和变换 SVG 路径 - 我需要三角计算吗？
【发布时间】：2011-08-14 07:31:34
【问题描述】：

我正在尝试使用代表电子电阻器符号的鼠标 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>`

请帮忙。

【问题讨论】：

我不明白你的问题。你想翻译整个画面吗？无论如何，将 transform 属性添加到 g 标签应该是您正在寻找的。span>
I'm trying to one (of two path points) when selected follows mousemove, but path proportions remains in case of mouse drag this one point.这意味着围绕第二个路径点进行变换和旋转。尝试画出电阻器，我取导线的一端并将其（拉伸）旋转一圈，反之亦然。无论如何，谢谢你的好意。

标签： javascript svg coordinate-transformation

【解决方案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) 处绘制静态点的电阻器，然后将其转换到您想要的位置。

【讨论】：

彼得，非常非常感谢。这正是我正在寻找的解决方案。祝你一切顺利！
没问题，很高兴能帮上忙。祝您的项目一切顺利。