7

アルゴリズムがどこでうまくいかないかを確認できるように、約 10 個の点と四角形をプロットする簡単な方法を探しています。gnuplot を見てみましたが、四角形をプロットするのが特に悪いようです。

4

2 に答える 2

17

SVG ( MDN チュートリアル) は非常にシンプルなテキストベース (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」として保存し、最新の Web ブラウザーで開いて表示します。

四角形の描画

四角形を描画するには、次のいずれかを使用できます。

<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,yorも受け入れることに注意してください。x y x y

フォーマットのビット

塗りつぶされた形状の代わりにアウトラインを描画したい場合は、SVG に次の CSS を追加できます。

<style>
  rect, polygon, path { fill:none; stroke:black; stroke-width:1px }
</style>

XML に Haml を使用する

最後に、Haml は、SVG 固有のライブラリを使用せずに XML を作成する場合に検討できるもう 1 つのオプションです。

@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 に答える