我正在努力寻找一种用鼠标动态调整 svg 多边形大小和拖动多边形的方法。不幸的是 jQueryUi 不适用于 svg 元素。我还检查了拉斐尔库，但找不到任何有关如何实现这一点的文档/片段。
除了使用 SVG 之外，还有其他方法可以动态调整多边形图形的大小和拖动吗？
您可以自己使用 SVG 元素。特别是，您可以找到多边形的点并添加可使用 jQuery 拖动的 HTML 元素句柄。 （我假设您遇到的问题是 jQuery UI 不适用于 SVG 定位模型。）这是我刚刚编写的完整示例（在 Safari 5 和 Firefox 9 中测试）。
（免责声明：我不是 jQuery 的普通用户；除了不使用 jQuery 做所有事情之外，这段代码可能在某些方面不符合习惯。）
<!DOCTYPE html>
<html><head>
<title>untitled</title>
<style type="text/css" media="screen">
.handle {
position: absolute;
border: 0.1em solid black;
width: 1em;
height: 1em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
function draggablePolygon(polygon) {
var points = polygon.points;
var svgRoot = $(polygon).closest("svg");
for (var i = 0; i < points.numberOfItems; i++) {
(function (i) { // close over variables for drag call back
var point = points.getItem(i);
var handle = document.createElement("div");
handle.className = "handle";
document.body.appendChild(handle);
var base = svgRoot.position();
// center handles over polygon
var cs = window.getComputedStyle(handle, null);
base.left -= (parseInt(cs.width) + parseInt(cs.borderLeftWidth) + parseInt(cs.borderRightWidth))/2;
base.top -= (parseInt(cs.height) + parseInt(cs.borderTopWidth) + parseInt(cs.borderBottomWidth))/2;
handle.style.left = base.left + point.x + "px";
handle.style.top = base.top + point.y + "px";
$(handle).draggable({
drag: function (event) {
setTimeout(function () { // jQuery apparently calls this *before* setting position, so defer
point.x = parseInt(handle.style.left) - base.left;
point.y = parseInt(handle.style.top) - base.top;
},0);
}
});
}(i));
}
}
</script>
</head><body>
<p>
(Offset to test)
<svg id="theSVG" width="500" height="500" style="border: 2px inset #CCC;">
<polygon id="x" points="200,200 100,100 100,1" fill="green" />
<polygon id="y" points="200,200 100,100 1,100" fill="red" />
</svg>
</p>
<script type="text/javascript">
draggablePolygon(document.getElementById("x"));
draggablePolygon(document.getElementById("y"));
</script>
</body></html>
您还可以将事件处理程序附加到 SVG 多边形并实现拖动（我测试过，这可以工作），但是您必须在多边形的当前边界内单击，这是一个非典型的 UI，可能很棘手，并实现您的自己的命中测试。
为此，您需要添加一个onmousedown多边形元素的处理程序。然后检索它的点，找到点击位置范围内的点，存储鼠标初始位置，然后得到一个onmousemove处理程序修改x and y当鼠标位置改变时，该点的位置。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
