WANtaroHP (ImageMagick Draw)

 

Contents

ImageMagickによる描画事例です.

全コマンドを含むバッチファイルを下に示します.

FilenameDescription
bat_IMK.txt このページの全コマンドを含むバッチファイル

掲載内容は以下のとおりです.



Pixel 平面を描く

00coordinate.gif
rem Pixel 平面
rem Pixel座標は左上を原点とし角度は水平線より時計回りの角度が正
convert -size 350x300 xc:white -stroke blue ^
-fill navy -draw "translate 50,50 line 0,0 250,0" ^
-fill navy -draw "translate 50,50 polyline 240,-5 250,0 240,5" ^
-fill navy -draw "translate 50,50 rotate -90 line 0,0 -200,0" ^
-fill navy -draw "translate 50,50 rotate -90 polyline -190,-5 -200,0 -190,5" ^
-fill white -draw "translate 50,50 circle 150,87,150,90" ^
-fill none  -draw "translate 50,50 stroke-dasharray 10 5 line 0,0 150,87" ^
-fill none  -draw "translate 50,50 stroke-dasharray 3 2 ellipse 0,0 65,65 0,30" ^
-fill red -stroke none  -pointsize 20 ^
-draw "translate 50,50 text 100,-5 'x-axsis'" ^
-draw "translate 50,50 rotate -90 text -130,-5 'y-axis'" ^
-draw "translate 50,50 rotate 15 text 70,5 'angle'" ^
-draw "translate 50,50 rotate -75 text -10,58 'a0'" ^
-draw "translate 50,50 text 125,110 '(x0,y0)'" ^
-draw "translate 50,50 text -25,-10 '(0,0)'" ^
-fill black -stroke none  -pointsize 24 ^
-draw "translate 50,50 text 75,230 'Pixel plane'" ^
-scale 350x300 00coordinate.gif


色の反転(補色)

00coordinate-n.gif
rem -negate によりピクセル色を補色に変換
convert -negate 00coordinate.gif 00coordinate-n.gif


点を描く

01draw_point.gif
rem Point
convert -size 10x6 xc:skyblue -fill black -draw "point 3,2" -scale 100x60   01draw_point.gif


矩形,弧を描く

02draw_rect.gif 03draw_rrect.gif 04draw_arc.gif 05draw_arc_partial.gif
rem Rectangle  /  Rounded Rectangle  /  Rectangular Arc
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "rectangle 20,10 80,50"            02draw_rect.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "roundrectangle 20,10 80,50 20,15" 03draw_rrect.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "arc 20,10 80,50 0,360"            04draw_arc.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "arc 20,10 80,50 0,135"            05draw_arc_partial.gif


円,楕円を描く

06draw_circle.gif 07draw_ellipse.gif 08draw_ellipse_partial.gif
rem Circle  /  Ellipse    (centered on a point)
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "circle  50,30 40,10"        06draw_circle.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "ellipse 50,30 40,20  0,360" 07draw_ellipse.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "ellipse 50,30 40,20 45,270" 08draw_ellipse_partial.gif


線を描く

09draw_line.gif 10draw_polyline.gif 11draw_polygon.gif 12draw_bezier.gif
rem Line / Polyline / Polygon / Bezier
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "line 20,50 90,10"                 09draw_line.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "polyline 40,10 20,50 90,10 70,40" 10draw_polyline.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "polygon  40,10 20,50 90,10 70,40" 11draw_polygon.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "bezier   40,10 20,50 90,10 70,40" 12draw_bezier.gif


text の表示,image 貼り込み,図形の重ね合わせ

13draw_text.gif 14draw_image.gif 15draw_circle_global.gif 16draw_circle_override.gif 17draw_circle_multi.gif
rem text の表示,imageの張り込み,図形の重ね合わせ
convert -size 100x60 xc:skyblue -fill white -stroke black -font arial -pointsize 40 -gravity center -draw "text 0,0 'WAN'" 13draw_text.gif
convert -size 100x60 xc:skyblue -gravity center -draw "image over 0,0 0,0 'wanz2.png'" 14draw_image.gif
convert -size 100x60 xc:skyblue -fill red -draw "circle 50,30 40,10" 15draw_circle_global.gif
convert -size 100x60 xc:skyblue -fill red -draw "fill green circle 50,30 40,10" 16draw_circle_override.gif
convert -size 100x60 xc:skyblue -draw "fill green circle 41,39 44,57 fill blue circle 59,39 56,57 fill red circle 50,21 50,3" 17draw_circle_multi.gif


線分の指定

18path_open.gif 19path_complete.gif 20path_closed.gif
rem pathによる線分の指定 (z で閉曲線を指定できる)
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "path 'M 40,10 L 20,50 90,10 70,40'"       18path_open.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "path 'M 40,10 L 20,50 90,10 70,40 40,10'" 19path_complete.gif
convert -size 100x60 xc:skyblue -fill white -stroke black -draw "path 'M 40,10 20,50 90,10 70,40 Z'"       20path_closed.gif


線の透過度を変化させる

21set_stroke_opacity.gif
rem 線の透過度を変化させる (stroke-opacity)
convert -size 100x60 xc:skyblue -fill none -stroke black ^
-draw "path 'M 10,10 L 90,10'" ^
-draw "stroke-opacity 0.8 path 'M 10,20 L 90,20'" ^
-draw "stroke-opacity 0.6 path 'M 10,30 L 90,30'" ^
-draw "stroke-opacity 0.4 path 'M 10,40 L 90,40'" ^
-draw "stroke-opacity 0.2 path 'M 10,50 L 90,50'" ^
21set_stroke_opacity.gif


塗りつぶし色の透過度を変化させる

22set_fill_opacity.gif
rem 塗りつぶし色の透過度を変化させる (fill-opacity)
convert -size 100x60 xc:skyblue -fill white -stroke black ^
-draw "                 rectangle  5,10 15,50 " ^
-draw "fill-opacity 0.8 rectangle 20,10 30,50 " ^
-draw "fill-opacity 0.6 rectangle 35,10 45,50 " ^
-draw "fill-opacity 0.4 rectangle 50,10 60,50 " ^
-draw "fill-opacity 0.2 rectangle 65,10 75,50 " ^
-draw "fill-opacity  0  rectangle 80,10 90,50 " ^
22set_fill_opacity.gif


線種テスト

23set_lines.gif
rem 線種テスト (strike-dasharray)
convert -size 100x60 xc:skyblue -fill none -stroke black ^
-draw "                           path 'M 10,10 L 90,10'" ^
-draw "stroke-dasharray 5 3       path 'M 10,20 L 90,20'" ^
-draw "stroke-dasharray 5 5       path 'M 10,30 L 90,30'" ^
-draw "stroke-dasharray 10 3 3 3  path 'M 10,40 L 90,40'" ^
-draw "stroke-dasharray 1 6       path 'M 10,50 L 90,50'" ^
23set_lines.gif


点線の隙間を埋める

24set_lines_fill.gif
rem -fill white により点線の隙間をwhiteで埋める
convert -size 100x60 xc:skyblue -fill white -stroke black ^
-draw "                           path 'M 10,10 L 90,10'" ^
-draw "stroke-dasharray 5 3       path 'M 10,20 L 90,20'" ^
-draw "stroke-dasharray 5 5       path 'M 10,30 L 90,30'" ^
-draw "stroke-dasharray 10 3 3 3  path 'M 10,40 L 90,40'" ^
-draw "stroke-dasharray 1 6       path 'M 10,50 L 90,50'" ^
24set_lines_fill.gif


ライン端部処理

24set_endcaps.gif
rem ライン端部処理
convert -size 100x60 xc:skyblue -fill white -stroke black -strokewidth 8 ^
-draw "                       path 'M 20,20 L 20,70'" ^
-draw "stroke-linecap butt    path 'M 40,20 L 40,70'" ^
-draw "stroke-linecap round   path 'M 60,20 L 60,70'" ^
-draw "stroke-linecap square  path 'M 80,20 L 80,70'" ^
25set_endcaps.gif


円グラフ

26piechart.gif
rem 円グラフ
convert -size 140x130 xc:white -stroke black ^
-fill red   -draw "path 'M 60,70 L   60,20   A 50,50 0 0,1 68.7,20.8 Z'" ^
-fill green -draw "path 'M 60,70 L 68.7,20.8 A 50,50 0 0,1 77.1,23.0 Z'" ^
-fill blue  -draw "path 'M 68,65 L 85.1,18.0 A 50,50 0 0,1  118,65   Z'" ^
-fill gold  -draw "path 'M 60,70 L  110,70   A 50,50 0 1,1   60,20   Z'" ^
-fill black -stroke none  -pointsize 10 ^
-draw "text 57,19 '10' text 70,20 '10' text 90,19 '70' text 113,78 '270'" ^
26piechart.gif


矩形の回転

27transform_translate.gif
rem 四角形を回転
convert -size 100x60 xc:skyblue ^
-draw "translate 50,30 rotate 30 fill white stroke black rectangle -20,-10 20,10" ^
-draw "translate 50 30 fill none  stroke red line -10,0 10,0 line 0,-10 0,10" ^
27transform_translate.gif


楕円の回転

28transform_translate.gif
rem 楕円を回転
convert -size 100x60 xc:skyblue ^
-draw "translate 50,30 rotate -30 fill white stroke black ellipse 0,0 30,15 0,360" ^
-draw "translate 50 30 fill none  stroke red path 'M 0,10 0,-10  M 10,0 -10,0'" ^
28transform_translate.gif


線分の回転

29transform_translate.gif
rem pathで描いた線を回転
convert -size 100x60 xc:skyblue ^
-draw "translate 50,30 rotate -30 fill white stroke black path 'M 0,20 -45,20 20,-25 -25,-25'" ^
-draw "translate 50 30 rotate 30 fill none  stroke red path 'M 0,10 0,-10  M 10,0 -10,0'" ^
29transform_translate.gif


楕円の回転 (push / pop)

30ellipse_rotated.gif
rem 楕円を回転(pusy / pop)
convert -size 100x60 xc:skyblue -fill white -stroke black ^
-draw "push graphic-context translate 50,30 rotate 30 fill white  stroke black ellipse 0,0 30,15 0,360 pop graphic-context" ^
30ellipse_rotated.gif


矩形の回転 (push / pop)

31rect_rotated.gif
rem 四角形を回転(pusy / pop)
convert -size 100x60 xc:skyblue -fill white -stroke black ^
-draw "push graphic-context translate 50,30 rotate 30 fill white  stroke black rectangle -20,-10 20,10 pop graphic-context" ^
-draw "translate 50 30 fill none  stroke red path 'M 0,10 0,-10  M 10,0 -10,0'" ^
31rect_rotated.gif


画像の連結

32test.gif
rem 画像を連結する (カッコの使用:ブランクをあけることに注意)
convert ( 02draw_rect.gif 03draw_rrect.gif  +append ) ^
( 04draw_arc.gif  06draw_circle.gif +append ) ^
-append 32test.gif


枠 (-raise) をつけて連結する

33WANtaroHP.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:W 0W1.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:A 0A2.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:N 0N3.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:t 0t4.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:a 0a5.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:r 0r6.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:o 0o7.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:H 0H8.gif
convert -size 25x25 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -raise 5 label:P 0P9.gif
convert +append 0W1.gif 0A2.gif 0N3.gif 0t4.gif 0a5.gif 0r6.gif 0o7.gif 0H8.gif 0P9.gif 33WANtaroHP.gif
del 0W1.gif 0A2.gif 0N3.gif 0t4.gif 0a5.gif 0r6.gif 0o7.gif 0H8.gif 0P9.gif


枠 (-frame) をつけて連結する

34WANtaroHP.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:W 1W1.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:A 1A2.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:N 1N3.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:t 1t4.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:a 1a5.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:r 1r6.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:o 1o7.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:H 1H8.gif
convert -size 20x20 -background LemonChiffon -fill black -font c:\Windows\Fonts\arialbd.ttf -pointsize 20 -gravity center -frame 5x5+2+2 label:P 1P9.gif
convert +append 1W1.gif 1A2.gif 1N3.gif 1t4.gif 1a5.gif 1r6.gif 1o7.gif 1H8.gif 1P9.gif 34WANtaroHP.gif
del 1W1.gif 1A2.gif 1N3.gif 1t4.gif 1a5.gif 1r6.gif 1o7.gif 1H8.gif 1P9.gif


漢字を含む2行の文字列を配置した画像

wan0U.png wan0D.png
wan1b.png wan2b.png wan3b.png
wanz1.png wanz2.png wanz3.png
rem *********************************************
rem 漢字を含む2行の文字列を配置した画像 wan.bat
rem *********************************************
rem
rem 文字を作成します.漢字はUTF8Nで保存したファイル(wan_inp.txt)より読み込みます.
rem この際改行文字を読み込んで2行になってしまうので,trimで余白を削除します.
convert -trim -background none -fill navy -font c:\Windows\Fonts\meiryo.ttc -pointsize 11 label:WANtaroHP wan0U.png
convert -trim -background none -fill navy -font c:\Windows\Fonts\meiryo.ttc -pointsize 14 label:@wan_inp.txt wan0D.png
rem
rem 後で-raiseで画像の内縁に3ピクセルの枠をつけるため,borderで透明な部分を上下に追加します.
convert -bordercolor none -border 0x3 wan0U.png temp0U.png
convert -bordercolor none -border 0x3 wan0D.png temp0D.png
rem
rem 単色背景:背景画像を作成し透過背景の文字列と合成します.
rem また -raise で少し浮き上がる効果を出します.
convert -size 88x31 canvas:aqua wan1b.png
composite -gravity north temp0U.png wan1b.png temp1.png
composite -gravity south temp0D.png temp1.png temp.png
convert -raise 3 temp.png wanz1.png
rem
rem グラデーション:背景画像にグラデーションを入れてみました.
rem ここでも上側と下側に分けて背景を作成し -append で合成しています
convert -size 88x15 gradient:yellow-white temp1.png
convert -size 88x16 gradient:white-yellow temp2.png
convert -append temp1.png temp2.png wan2b.png
composite -gravity north temp0U.png wan2b.png temp1.png
composite -gravity south temp0D.png temp1.png temp.png
convert -raise 3 temp.png wanz2.png
rem
rem プラズマグラデーション:プラズマグラデーションの背景画像を使ってみました.
convert -size 88x31 plasma:white-white wan3b.png
composite -gravity north temp0U.png wan3b.png temp1.png
composite -gravity south temp0D.png temp1.png temp.png
convert -raise 3 temp.png wanz3.png
rem
rem 作業用のファイルを削除します.
del temp*.png


透過文字を作成する

35png_inlinkGOE.png 35png_inlinkGOJ.png 35png_inlinkT.png 35png_inlinkB.png

透過文字の作成は,以下の3段階の手順により実行されています.

  • -monochrome により白黒画像で白地に黒い文字を描画
  • -transparent で黒文字を透過色に変更
  • -opaque により白い背景を青に変更
rem *************************************************************************
rem Create image with transparent characters
rem *************************************************************************
set font=c:\Windows\Fonts\arialbd.ttf
set col=blue
rem set col=lightyellow

convert -monochrome -size 95x16 -background white -fill black ^
-font %font% -pointsize 12 -gravity center -raise 3 label:"En : main page" png_test01.png
convert -fuzz 50% -transparent black png_test01.png png_inp.png
convert -fill %col% -opaque white png_inp.png 35png_inlinkGOE.png

convert -monochrome -size 95x16 -background white -fill black ^
-font %font% -pointsize 12 -gravity center -raise 3 label:"Ja : main page" png_test01.png
convert -fuzz 50% -transparent black png_test01.png png_inp.png
convert -fill %col% -opaque white png_inp.png 35png_inlinkGOJ.png

convert -monochrome -size 55x16 -background white -fill black ^
-font %font% -pointsize 12 -gravity center -raise 3 label:"Top" png_test01.png
convert -fuzz 50% -transparent black png_test01.png png_inp.png
convert -fill %col% -opaque white png_inp.png 35png_inlinkT.png

convert -monochrome -size 55x16 -background white -fill black ^
-font %font% -pointsize 12 -gravity center -raise 3 label:"Bottom" png_test01.png
convert -fuzz 50% -transparent black png_test01.png png_inp.png
convert -fill %col% -opaque white png_inp.png 35png_inlinkB.png


アニメーションを作成する

画像の準備

1質点系の変位図を0.5秒ピッチで540枚準備

convert -size 400x400 xc:skyblue ^
-fill black -stroke black -draw "rectangle 175,350 225,360" ^
-fill black -stroke black -draw "circle  200,50 200,40" ^
-stroke black -draw "line 200,350 200,50" ^
gif_00001.gif
..........
..........
convert -size 400x400 xc:skyblue ^
-fill black -stroke black -draw "rectangle 175,350 225,360" ^
-fill black -stroke black -draw "circle  204,50 204,40" ^
-stroke black -draw "line 200,350 204,50" ^
gif_00540.gif

経過時間を表す画像を1秒ピッチで270枚準備

convert -size 100x30 xc:yellow -font c:\Windows\Fonts\meiryo.ttc -pointsize 20 -gravity center -draw "text 0,0 '1 sec.'" gt_00001.gif
convert -size 100x30 xc:yellow -font c:\Windows\Fonts\meiryo.ttc -pointsize 20 -gravity center -draw "text 0,0 '2 sec.'" gt_00002.gif
convert -size 100x30 xc:yellow -font c:\Windows\Fonts\meiryo.ttc -pointsize 20 -gravity center -draw "text 0,0 '3 sec.'" gt_00003.gif
..........
..........
convert -size 100x30 xc:yellow -font c:\Windows\Fonts\meiryo.ttc -pointsize 20 -gravity center -draw "text 0,0 '270 sec.'" gt_00270.gif

アニメーション作成コマンド

準備した画像を用いて,以下のコマンドでアニメーションを作成. 変位図は0.5秒ピッチで作成しているため,ここではコマ送り時間を短縮して0.1秒単位で表示させるようファイル movie_img.gif を作成. また,経過時間を表す画像は1秒ピッチで作成しているため,変位図との時間の整合性を考慮し,0.2秒単位で表示させるようファイル movie_tim.gif を作成.

convert -delay 10 -loop 1 gif_*.gif movie_img.gif
convert -delay 20 -loop 1 gt_*.gif movie_tim.gif

アニメーション事例


上記 gif アニメーションの動作状況は以下のとおり.Firefox 24,safari 5 及び seamonkey では,期待される動作をしないことを確認しています. 期待される動作とは,以下を示します.

  • 何回でも再生できる.
  • 途中で再生を停止し,再度再生する場合,時刻0よりスタートする.

管理人の手元での確認結果によれば,IE11, IE8, Google Chrome 35, Opera 12, Sleipnir 4, Lunascape 6 では上記期待される動作をするようです.



pic
inserted by FC2 system