概要
victor というライブラリがあるので使ってみました
環境
- macOS 10.13.6
- ruby 2.5.1p57
- victor 0.2.1
インストール
- bundle init
- vim Gemfile
gem "victor"bundle install --path vendor
サンプルコード
パックマンを生成するサンプルコードが公式にあるのでとりあえずそれを動かします
- vim test.rb
require 'victor'
svg = Victor::SVG.new width: 140, height: 100, style: { background: '#ddd' }
svg.build do
rect x: 10, y: 10, width: 120, height: 80, rx: 10, fill: '#666'
circle cx: 50, cy: 50, r: 30, fill: 'yellow'
circle cx: 58, cy: 32, r: 4, fill: 'black'
polygon points: %w[45,50 80,30 80,70], fill: '#666'
3.times do |i|
x = 80 + i*18
circle cx: x, cy: 50, r: 4, fill: 'yellow'
end
end
svg.save 'pacman'- bundle exec ruby test.rb
少しコードの説明をします
rect x: 10, y: 10, width: 120, height: 80, rx: 50, fill: '#666'これで丸角の背景の描画しています
rx はどれくらい丸角にするかの数値です
fill は塗りつぶしの RGB コードです
circle cx: 50, cy: 50, r: 30, fill: 'yellow'円を描画します
cx, cy は左上を (0, 0) とした時の円の中心の座標です
polygon points: %w[45,50 80,30 80,70], fill: '#666'多角形を表示します
上記の場合は三角形を描画します
points で頂点となる座標を配列で指定することで三角形以上の多角形を生成することができます
自分で何かか作成してみた
サンプルを元に自分でも SVG データを生成してみました
- vim on.rb
require 'victor'
svg = Victor::SVG.new width: 150, height: 150, style: { background: '#ddd' }
style = {
stroke: 'black',
stroke_width: 1
}
lstyle = {
stroke: 'black',
stroke_width: 4
}
svg.build do
rect x: 0, y: 0, width: 150, height: 150, rx: 0, fill: '#666'
ellipse cx: 125, cy: 70, rx: 20, ry: 10, style: style, fill: 'yellow'
ellipse cx: 25, cy: 70, rx: 20, ry: 10, style: style, fill: 'yellow'
ellipse cx: 115, cy: 115, rx: 20, ry: 10, style: style, fill: 'yellow', transform: 'rotate(10, 115, 115)'
ellipse cx: 75, cy: 70, rx: 60, ry: 50, style: style, fill: 'yellow'
ellipse cx: 35, cy: 115, rx: 20, ry: 10, style: style, fill: 'yellow'
circle cx: 43, cy: 60, r: 15, fill: 'black'
circle cx: 43, cy: 60, r: 10, fill: 'white'
line x1: 100, y1: 45, x2: 100, y2: 75, rx: 10, style: lstyle
line x1: 100, y1: 50, x2: 120, y2: 50, rx: 10, style: lstyle
line x1: 118, y1: 50, x2: 118, y2: 75, rx: 10, style: lstyle
ellipse cx: 75, cy: 90, rx: 25, ry: 15, style: style, fill: 'pink'
end
svg.save 'on'- bundle exec ruby on.rb
で以下のような SVG を作成することができます
少し説明
ellipse cx: 125, cy: 70, rx: 20, ry: 10, style: style, fill: 'yellow'これは楕円を描画します
rx, ry で縦と横の半径を指定します
style オプションを指定することで枠線を描画することができます
line x1: 100, y1: 45, x2: 100, y2: 75, rx: 10, style: lstyle線を描画します
始点の座標と終点の座標を指定することでその点と点を結ぶ線を描画します
rx で線の太さを指定します
line にも style を指定することができます
今回はあまりクオリティにこだわらなかったので line などそのまま使いましたが角丸などにしたい場合は更に細かい丸や楕円を配置したりポリゴンを使って調整する必要があります
最後に
victor を使って SVG データを生成してみました
Mac で確認する場合は ToyViewer などを使うと SVG データを描画できます
各コンポーネントやオプションの値は SVG データで使っているものをそのまま使っているので参考サイトに記載してるような SVG の紹介サイトを見ながらやるといろいろと装飾できると思います
プログラムから SVG を作成してもいいですがある程度クオリティの高いものを作りたいのであれば素直に Adobe CC などのお絵かきツールを使ったほうが無難だと思います
0 件のコメント:
コメントを投稿