我正在努力寻找一种方法来使用鼠标动态调整和拖动 svg 多边形的大小。不幸的是，jQueryUi 不适用于 svg 元素。我还检查了 Raphael 库，但找不到任何关于如何实现这一点的文档/片段。
除了使用 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 并且可能很棘手，并实现您自己的 HitTest 。
为此，您可以向多边形元素添加一个 onmousedown 处理程序。然后检索它的点，找到点击位置范围内的点，存储初始鼠标位置，然后让 onmousemove 处理程序修改 x 和 y 点随着鼠标位置的变化。
关于javascript - 动态调整和拖动 SVG 多边形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8945134/
有没有办法在Ruby中动态创建数组？例如，假设我想遍历用户输入的书籍数组:books=gets.chomp用户输入:"TheGreatGatsby,CrimeandPunishment,Dracula,Fahrenheit451,PrideandPrejudice,SenseandSensibility,Slaughterhouse-Five,TheAdventuresofHuckleberryFinn"我把它变成一个数组:books_array=books.split(",")现在，对于用户输入的每一本书，我想用Ruby创建一个数组。伪代码来做到这一点:x=0books_array.
我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
首先，我使用的是rails3.1.3和来自master的carrierwavegithub仓库的分支。我使用after_init钩子(Hook)来确定基于属性的字段页面模型实例并为这些字段定义属性访问器将值存储在序列化哈希中(希望它清楚我是什么谈论)。这是我正在做的事情的精简版:classPage省略mount_uploader命令让我可以访问我想要的属性。但是当我安装uploader时出现错误消息说“nil类的未定义新方法”我在源代码中读到有方法read_uploader和扩展模块中的write_uploader。我如何必须覆盖这些来制作mount_uploader命令使用我的“虚拟
我正在尝试动态构建一个多维数组。我想要的基本上是这样的(为简单起见写出来):b=0test=[[]]test[b]这给了我错误:NoMethodError:undefinedmethod`test=[[],[],[]]而且它工作正常，但在我的实际使用中，我不会事先知道需要多少个数组。有一个更好的方法吗？谢谢 最佳答案 不需要像您正在使用的索引变量。只需将每个数组附加到您的test数组:irb>test=[]=>[]irb>test[["a","b","c"]]irb>test[["a","b","c"],["d","e","f"]]
如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail
如何在对象上调用方法名称的嵌套哈希？例如，给定以下哈希:hash={:a=>{:b=>{:c=>:d}}}我想创建一个方法，给定上面的散列，执行以下操作:object.send(:a).send(:b).send(:c).send(:d)我的想法是我需要从一个未知的关联中获取一个特定的属性(这个方法不知道，但程序员知道)。我希望能够指定一个方法链来以嵌套哈希的形式检索该属性。例如:hash={:manufacturer=>{:addresses=>{:first=>:postal_code}}}car.execute_method_hash(hash)=>90210
我有一个ruby程序，我想接受用户创建的方法，并使用该名称创建一个新方法。我试过这个:defmethod_missing(meth,*args,&block)name=meth.to_sclass我收到以下错误:`define_method':interningemptystring(ArgumentError)in'method_missing'有什么想法吗？谢谢。编辑:我以不同的方式让它工作，但我仍然很好奇如何以这种方式做到这一点。这是我的代码:defmethod_missing(meth,*args,&block)Adder.class_evaldodefine_method
假设我们有A、B、C类。Adefself.inherited(sub)#metaprogramminggoeshere#takeclassthathasjustinheritedclassA#andforfooclassesinjectprepare_foo()as#firstlineofmethodthenrunrestofthecodeenddefprepare_foo#=>prepare_foo()neededhere#somecodeendendBprepare_foo()neededhere#somecodeendend如您所见，我正在尝试将foo_prepare()调用注入
这里我想输出带有动态组名的json而不是单词组@tickets.eachdo|group,v|json.group{json.array!vdo|ticket|json.partial!'tickets/ticket',ticket:ticketend}end@ticket是这样的散列{a:[....],b:[.....]}我想要这样的输出{a:[.....],b:[....]} 最佳答案 感谢@AntarrByrd，这个问题有类似的答案:JBuilderdynamickeysformodelattributes使用上面的逻辑我已经
