Showing posts with label バッジ. Show all posts
Showing posts with label バッジ. Show all posts

Tuesday, July 15, 2008

ImageMagickとPHPでグラデーションバッジ画像を作成する

Imagickでグラデーションバッジ画像を作成するには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample500(ImageMagick6.4.2)</title>
</head>
<body>
<?php
/* グラデーションバッジ画像を生成する */
/* 画像幅 */
$sx = 200;
/* 画像高さ */
$sy = 200;
/* 分割数 */
$par = 64;
/* 中心x */
$cx = 100;
/* 中心y */
$cy = 100;
/* 半径(大) */
$rad1 = 90;
/* 半径(小) */
$rad2 = 80;

/* グラデーション作成 */
$im = new Imagick();
$im->newPseudoImage($sx, $sy, "gradient:#bbddff-#4466bb");
$idraw = new ImagickDraw();
$idraw->pushPattern('gradient', 0, 0, $sx, $sy);
$idraw->composite(Imagick::COMPOSITE_OVER, 0, 0, $sx, $sy, $im);
$idraw->popPattern();

/* イメージ作成 */
$im2 = new Imagick();
$im2->newPseudoImage($sx, $sy, 'xc:none');

$dr1=0;
$dr2=360/($par*2);
while($dr2<360){
$points[] = array(
'x' => (int)($cx-cos(2*pi()*$dr1/360)*$rad1),
'y' => (int)($cy-sin(2*pi()*$dr1/360)*$rad1)
);
$points[] = array(
'x' => (int)($cx-cos(2*pi()*$dr2/360)*$rad2),
'y' => (int)($cy-sin(2*pi()*$dr2/360)*$rad2)
);
$dr1 += 360/$par;
$dr2 += 360/$par;
}

$idraw->setFillPatternURL('#gradient');
/* 座標に基づき、ポリゴンを描画 */
$idraw->polygon($points);
$im2->drawImage($idraw);

/* 影つけ */
$im3=$im2->clone();
$im3->setImageBackgroundColor('black');
$im3->shadowImage(40,2,5,5);

/* 白背景と重ね合わせ */
$im4 = new Imagick();
$im4->newImage($im->getImageWidth(), $im->getImageHeight(), 'white');
$im4->addImage($im3);
$im4->addImage($im2);
$im5=$im4->mosaicImages();


/* フォント設定 */
$idraw->setFont("Arial");
/* フォントサイズ設定 */
$idraw->setFontSize(25);
/* gravity設定 */
$idraw->setGravity(Imagick::GRAVITY_CENTER);
/* 描画色 */
$idraw->setFillColor("white");
$im5->annotateImage($idraw, 0, 0, 0, "ImageMagick");


$im5->writeImage('sample500a.jpg');

/* $idraw->clear(); 2008/09/30追記:destroyと同様にClearDrawingWandを呼ぶので必要なし */
$idraw->destroy();
/* $im5->clear(); 2008/09/30追記:destroyと同様にClearMagicWandを呼ぶので必要なし */
$im5->destroy();
/* $im4->clear(); 2008/09/30追記:destroyと同様にClearMagicWandを呼ぶので必要なし */
$im4->destroy();
/* $im3->clear(); 2008/09/30追記:destroyと同様にClearMagicWandを呼ぶので必要なし */
$im3->destroy();
/* $im2->clear(); 2008/09/30追記:destroyと同様にClearMagicWandを呼ぶので必要なし */
$im2->destroy();
/* $im->clear(); 2008/09/30追記:destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();

?>

<img src="sample500a.jpg" />

</body>
</html>

出力画像(sample500a.jpg)


動作環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.2

Thursday, April 17, 2008

ImageMagickとWSHで、枠線のついたバッジ画像を作成する

枠線のついたバッジ画像を作成するには、以下のスクリプトを実行します。

実行例
cscript sample361.vbs 32 100 100 90 80 #f0e8a0 orange 5 200 200 sample361.png

sample361.vbs
------------------------------------------
Set im = CreateObject("ImageMagickObject.MagickImage.1")
pi=3.14159

rem 分割数
par = Wscript.Arguments(0)
rem 中心x
cx = Wscript.Arguments(1)
rem 中心y
cy = Wscript.Arguments(2)
rem 半径(大)
rad1 = Wscript.Arguments(3)
rem 半径(小)
rad2 = Wscript.Arguments(4)
rem 描画色
fc = Wscript.Arguments(5)
rem ストローク色
sc = Wscript.Arguments(6)
rem ストローク幅
sw = Wscript.Arguments(7)
rem 出力サイズx
ox = Wscript.Arguments(8)
rem 出力サイズy
oy = Wscript.Arguments(9)
rem 出力ファイル名
ofile = Wscript.Arguments(10)

dr1=0
dr2=360/(par*2)
dat="polygon "
Do While dr2<360 p1x="int(cx-cos(2*pi*dr1/360)*rad1)" p1y="int(cy-sin(2*pi*dr1/360)*rad1)" p2x="int(cx-cos(2*pi*dr2/360)*rad2)" p2y="int(cy-sin(2*pi*dr2/360)*rad2)">0 then
dat=dat+","
end if

dat=dat & cstr(p1x) & "," & cstr(p1y) & "," & cstr(p2x) & "," & cstr(p2y)

dr1 = dr1 + 360/par
dr2 = dr2 + 360/par
Loop

im.Convert "-size", ox & "x" & oy, "xc:none", "-fill", fc, "-stroke", sc, "-strokewidth", sw, "-draw", dat, ofile

Set im = Nothing
------------------------------------------

出力画像(sample361.png)

Tuesday, March 18, 2008

ImageMagickとWSHで、不規則な形のバッジを作成する

不規則な形のバッジを作成するには、以下のVBScriptをWSHで実行します。

sample340.vbs
-------------------------------------------------------------
Set im = CreateObject("ImageMagickObject.MagickImage.1")
pi=3.14159

rem 分割数
par = Wscript.Arguments(0)
rem 中心x
cx = Wscript.Arguments(1)
rem 中心y
cy = Wscript.Arguments(2)
rem 半径(大)
rad1 = Wscript.Arguments(3)
rem 半径(小)
rad2 = Wscript.Arguments(4)
rem 描画色
fc = Wscript.Arguments(5)
rem 出力サイズx
ox = Wscript.Arguments(6)
rem 出力サイズy
oy = Wscript.Arguments(7)
rem 半径変動幅
dr = Wscript.Arguments(8)
rem 出力ファイル名
ofile = Wscript.Arguments(9)

dr1=0
dr2=360/(par*2)
dat="polygon "
Do While dr2<360 p1x="int(cx-cos(2*pi*dr1/360)*rad1)" p1y="int(cy-sin(2*pi*dr1/360)*rad1)" drr="dr*rnd()" p2x="int(cx-cos(2*pi*dr2/360)*(rad2+drr))" p2y="int(cy-sin(2*pi*dr2/360)*(rad2+drr))">0 then
dat=dat+","
end if

dat=dat & cstr(p1x) & "," & cstr(p1y) & "," & cstr(p2x) & "," & cstr(p2y)

dr1 = dr1 + 360/par
dr2 = dr2 + 360/par
Loop

im.Convert "-size", ox & "x" & oy, "xc:none", "-fill", fc, "-draw", dat, ofile

Set im = Nothing
-------------------------------------------------------------

実行例:
cscript sample340.vbs 36 100 100 90 80 orange 200 200 8 sample340.png

出力画像(sample340.png)

Saturday, February 16, 2008

ImageMagickとWSHで、角が丸くなったバッジ画像を生成する

角が丸くなったバッジ画像を生成するには、以下のVBScriptを実行します。

(sample311.vbs)
=============================================================
Set im = CreateObject("ImageMagickObject.MagickImage.1")
pi=3.14159

rem 分割数
par = Wscript.Arguments(0)
rem 中心x
cx = Wscript.Arguments(1)
rem 中心y
cy = Wscript.Arguments(2)
rem 半径(大)
rad1 = Wscript.Arguments(3)
rem 半径(小)
rad2 = Wscript.Arguments(4)
rem 描画色
fc = Wscript.Arguments(5)
rem 出力サイズx
ox = Wscript.Arguments(6)
rem 出力サイズy
oy = Wscript.Arguments(7)
rem 出力ファイル名
ofile = Wscript.Arguments(8)

dr1=0
dr2=360/(par*2)
dat="stroke-linejoin round polygon "
Do While dr2<360 p1x="int(cx-cos(2*pi*dr1/360)*rad1)" p1y="int(cy-sin(2*pi*dr1/360)*rad1)" p2x="int(cx-cos(2*pi*dr2/360)*rad2)" p2y="int(cy-sin(2*pi*dr2/360)*rad2)">0 then
dat=dat+","
end if

dat=dat & cstr(p1x) & "," & cstr(p1y) & "," & cstr(p2x) & "," & cstr(p2y)

dr1 = dr1 + 360/par
dr2 = dr2 + 360/par
Loop

im.Convert "-size", ox & "x" & oy, "xc:none", "-fill", fc, "-stroke", fc, "-strokewidth", "4", "-draw", dat, ofile

Set im = Nothing
=============================================================

実行例
cscript sample311.vbs 36 100 100 90 80 #BBDDFF 200 200 sample311.png

出力画像(sample311.png)


stroke-linejoin roundにより、polygonで書かれたバッジの角が丸くなっています。

関連項目
ImageMagickとWSHで、バッジ画像を生成する

Saturday, February 02, 2008

ImageMagickとWSHで、バッジ画像を生成する

ImageMagickとWSHで、バッジ画像を生成するには、以下のスクリプトを実行します。

sample294.vbs
=============================================
Set im = CreateObject("ImageMagickObject.MagickImage.1")
pi=3.14159

rem 分割数
par = Wscript.Arguments(0)
rem 中心x
cx = Wscript.Arguments(1)
rem 中心y
cy = Wscript.Arguments(2)
rem 半径(大)
rad1 = Wscript.Arguments(3)
rem 半径(小)
rad2 = Wscript.Arguments(4)
rem 描画色
fc = Wscript.Arguments(5)
rem 出力サイズx
ox = Wscript.Arguments(6)
rem 出力サイズy
oy = Wscript.Arguments(7)
rem 出力ファイル名
ofile = Wscript.Arguments(8)

dr1=0
dr2=360/(par*2)
dat="polygon "
Do While dr2<360
p1x=int(cx-cos(2*pi*dr1/360)*rad1)
p1y=int(cy-sin(2*pi*dr1/360)*rad1)
p2x=int(cx-cos(2*pi*dr2/360)*rad2)
p2y=int(cy-sin(2*pi*dr2/360)*rad2)

if dr1 >0 then
dat=dat+","
end if

dat=dat & cstr(p1x) & "," & cstr(p1y) & "," & cstr(p2x) & "," & cstr(p2y)

dr1 = dr1 + 360/par
dr2 = dr2 + 360/par
Loop

im.Convert "-size", ox & "x" & oy, "xc:none", "-fill", fc, "-draw", dat, ofile

Set im = Nothing

=============================================
実行例
cscript sample294.vbs 20 100 100 90 80 orange 200
200 sample294.png

出力画像(sample294.png)


関連項目
ImageMagickとVBS(WSH)でポラロイド写真を並べた画像を生成する
ImageMagickとWSHで、角が丸くなったバッジ画像を生成する