我正在尝试使用鼠标 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://dl.dropbox.com/u/169269/resistor.svg
单击并拖动电阻器以将其缩放并旋转到鼠标位置。在此版本中,线条粗细和圆圈也会缩放,但避免这种情况应该不会太困难。
它确实需要三角学和变换。关键部分是拖动功能,我在以下位置对其进行了更详细的解释:http://www.petercollingridge.co.uk/interactive-svg-components/draggable-svg-element 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) 处绘制静态点的电阻,然后将其平移到您想要的位置。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)