尝试旋转和转换SVG路径-我需要三角计算吗? [英] Trying to rotate and transform SVG path - do I need trigonometry calculations?

问题描述

我正在尝试使用表示电子电阻器符号的鼠标SVG路径进行操作.该符号要求在导线"的末端进行操作(如果您可以看到真实的电阻器)；因此，我试图实现将第一点arround(第二点仍然存在)拖动到路径的所有点，以在将第一点拖动到新坐标上时成比例地表现.

I'm trying to manipulate with mouse SVG path which represents symbol of electronics resistor. This symbol requires manipulation with end of the "leads" (if you can picture real resistor); therefore I am trying to achieve draging 1st point arround (2nd is still there) and to all points of path to behave proportionally in when drag the 1st point on new coordinates.

尝试分组，尝试使用三角函数...所以代码类似于:

Try to group, try with trigonometry functions...so code is like:

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

请帮助.

推荐答案

我想我已经大致完成了您想要的工作:

I think I've made roughly what you want: http://dl.dropbox.com/u/169269/resistor.svg

在电阻上单击并拖动以缩放并旋转到该鼠标位置.在此版本中，线的粗细和圆也会缩放，但是避免这种情况并不难.

Click and drag on the resistor to scale and rotate it to that mouse position. In this version, the line thickness and circles also scale, but it shouldn't be too difficult to avoid that.

它确实需要三角学和变换.关键部分是拖动功能，我将在以下位置对其进行详细说明: http://www.petercollingridge.co.uk/interactive-svg-components/draggable-svg-element

It does require trigonometry and transformations. The key part is the drag function, which I explain in more detail at: 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)的电阻，然后将其转换为所需的位置.

Note that this code assumes the resistor is 310 pixels long and rotating about (200, 100). Scaling and rotation transformations work centred on (0,0), so you should draw the resistor with the static point at (0,0) and then translate it to where you want.

这篇关于尝试旋转和转换SVG路径-我需要三角计算吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！