WANtaroHP (ImageMagick: 描画事例)

toEN

ページ概要

ImageMagickによる描画事例です.

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

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

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

Contents


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



矩形,弧を描く

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
02draw_rect.gif 03draw_rrect.gif 04draw_arc.gif 05draw_arc_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
06draw_circle.gif 07draw_ellipse.gif 08draw_ellipse_partial.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
09draw_line.gif 10draw_polyline.gif 11draw_polygon.gif 12draw_bezier.gif


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

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
13draw_text.gif 14draw_image.gif 15draw_circle_global.gif 16draw_circle_override.gif 17draw_circle_multi.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
18path_open.gif 19path_complete.gif 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) をつけて連結する

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
33WANtaroHP.gif


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

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
34WANtaroHP.gif


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

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
wan0U.png wan0D.png
wan1b.png wan2b.png wan3b.png
wanz1.png wanz2.png wanz3.png


透過文字を作成する

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

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
35png_inlinkGOE.png 35png_inlinkGOJ.png 35png_inlinkT.png 35png_inlinkB.png

toEN
inserted by FC2 system