我正在寻找一种简单的方法来绘制约10个点和矩形,以便能够看到我的算法出错的地方.我看了看gnuplot,但看起来特别糟糕的是绘制矩形.
解决方法
SVG(
MDN Tutorial)是一种非常简单的基于文本的(XML)格式,您可以在任何现代Web浏览器中使用Ruby轻松发出,而无需任何SVG库和视图.这是一个例子:
通过字符串插值的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
如果你想比字符串插值更结构化:
使用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”并在现代Web浏览器中打开以进行查看.
绘制矩形
要绘制rects,您可以使用以下任何一个:
- <rect transform="rotate(45)" x="0" y="0" width="100" height="200" />
- <polygon points="0,0 100,100 0,100" />
- <path d="M0,0 L100,100 Z" />
如果要连接非轴对齐的任意点而不担心变换,则多边形可能是最容易生成的.请注意,虽然为了清楚起见,我以x,y,y格式显示了上面的坐标,但SVG也会接受x,x,y或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,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,cy:y}
- ENDHAML