我正在寻找一种简单的方法来绘制大约 10 个点和矩形,以便能够查看我的算法出错的地方。我看了一下 gnuplot,但绘制矩形似乎特别糟糕。
问问题
2765 次
2 回答
17
SVG ( MDN Tutorial ) 是一种非常简单的基于文本 (XML) 的格式,您可以使用 Ruby 轻松发出它,而无需任何 SVG 库并在任何现代 Web 浏览器中查看。这是一个例子:
通过字符串插值的 SVG 点
points = (0..5).map{ [rand(100)-50,rand(100)-50] }
puts <<ENDSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
#{points.map{ |x,y| "<circle cx='#{x}' cy='#{y}' r='3' />" }.join("\n")}
</svg>
ENDSVG
输出:http: //jsfiddle.net/xwnVY/
如果你想比字符串插值更有条理:
使用 Nokogiri XML Builder 的 SVG 点
require 'nokogiri' # gem install nokogiri
b = Nokogiri::XML::Builder.new do |doc|
doc.svg xmlns:"http://www.w3.org/2000/svg", viewBox:"-100 -100 200 200" do
points.each do |x,y|
doc.circle r:3, cx:x, cy:y
end
end
end
puts b.to_xml
将输出另存为“foo.svg”并在现代网络浏览器中打开以查看。
绘制矩形
要绘制矩形,您可以使用以下任何一种:
<rect transform="rotate(45)" x="0" y="0" width="100" height="200" />
<polygon points="0,0 100,0 100,100 0,100" />
<path d="M0,0 L100,0 100,100 0,100 Z" />
如果您想连接未轴对齐的任意点而不担心变换,则多边形可能是最容易生成的。请注意,虽然为了清楚起见,我以格式显示了上面的坐标,但如果您的代码更容易生成这些坐标x,y x,y
,SVG 也将接受x,y,x,y
or 。x y x y
一点格式化
如果你想绘制轮廓而不是填充形状,你可以在你的 SVG 中添加这个 CSS:
<style>
rect, polygon, path { fill:none; stroke:black; stroke-width:1px }
</style>
将 Haml 用于 XML
最后,Haml 是您可以考虑在没有 SVG 特定库的情况下制作 XML 的另一种选择:
@points = (0..7).map{ [rand(100)-50,rand(100)-50] }
require 'haml'
puts Haml::Engine.new(<<ENDHAML).render(self)
%svg(xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200")
:css
circle { fill:orange }
rect, polygon, path {
fill:none; stroke:black;
vector-effect:non-scaling-stroke
}
- @points.each_slice(4) do |rect|
%polygon{ points:rect.join(" ") }
- @points.each do |x,y|
%circle{r:3, cx:x, cy:y}
ENDHAML
输出:http: //jsfiddle.net/xwnVY/4/
于 2012-04-25T17:21:48.997 回答
5
也许你可以试试 SVG。易于创建(纯 XML)、开放、跨平台,您可以使用 Inkscape 等打开和编辑。
于 2012-04-25T16:58:33.950 回答