در این آموزش قصد داریم روش ترسیم اشکال ساده در PHP و چگونگی رندر کردن متن با استفاده از فونت مورد نظر را توضیح دهیم.

اشکال ساده را در PHP با استفاده از کتابخانه GD ترسیم کنید

شما می توانید با استفاده از تابع imageline($image, $x1, $y1, $x2, $y2, $color) بین دو نقطه ی مشخص یک خط ساده بکشید. پارامتر $image که از قبل به وسیله ی تابع هایی مثل imagecreatetruecolor() یا imagecreatefromjpeg() ساخته می شود یک منبع تصویر است. در طول این آموزش برای ایجاد تصاویر از صفر، از imagecreatetruecolor() استفاده خواهیم کرد. این تابع در صورتی که $y1 مساوی $y2 باشد یک خط افقی ایجاد می کند. همچنین اگر $x1 مساوی $x2 باشد نیز یک خط عمودی می سازد.

کمان و دایره طراحی کنید

تابع imagearc($image, $cx, $cy, $width, $height, $start, $end, $color)  می تواند با استفاده از $cx و $cx  به عنوان مرکز دایره، کمان های دایره ای بکشد. پارامترهای $width و $height سایز کمان روی محورهای مختلف را تعیین می کنند. پارامترهای $start  و $end  هم زاویه ی شروع و پایان قوس را به درجه تعیین می کنند. اگر می خواهید قوس های کامل از صفر تا 360 درجه ترسیم کنید می توانید از تابع جایگزین imageellipse($image, $cx, $cy, $width, $height, $color)  استفاده نمایید.

چهار ضلعی و چندضلعی ترسیم کنید

می توانید با استفاده از تابع imagerectangle($image, $x1, $y1, $x2, $y2, $color) روی تصاویر، چهارضلعی ترسیم نمایید. مقادیر $x1 و $x1 زاویه ی بالا-سمت چپ و مقادیر $x2 و $y2 زاویه ی پایین- سمت راست چهارضلعی را مشخص می کنند. همچنین یک تابع imagepolygon($image, $points, $num_points, $color) نیز وجود دارد که می تواند یک چند ضلعی با هر تعداد راس و ضلع را ترسیم کند. پارامتر $points  نیز آرایه ای است که در آن دو المان با هم pair می شوند تا به مختصات یک نقطه ی خاص برسند.

تابع دیگری به نام imageopenpolygon()  نیز به PHP 7 اضافه شده است که بین نقاط اول و آخر، خطی ترسیم نمی کند.  

الصاق اشکال مختلف به یکدیگر برای ایجاد یک طرح

در مثال زیر از تمام این توابع استفاده کرده ایم تا به وسیله ی خطوط، یک کلبه، خورشید و زمین را طراحی کنیم.


 
header("Content-type: image/png");
 
$img_width = 800;
$img_height = 600;
 
$img = imagecreatetruecolor($img_width, $img_height);
 
$black = imagecolorallocate($img, 0, 0, 0);
$white = imagecolorallocate($img, 255, 255, 255);
$red   = imagecolorallocate($img, 255, 0, 0);
$green = imagecolorallocate($img, 0, 255, 0);
$blue  = imagecolorallocate($img, 0, 0, 255);
$orange = imagecolorallocate($img, 255, 200, 0);
 
imagefill($img, 0, 0, $white);
 
imagerectangle($img, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*8/10, $red);
imagerectangle($img, $img_width*4/10, $img_height*5/10, $img_width*8/10, $img_height*8/10, $red);
 
imagepolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 3, $red);
imageopenpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*7/10, $img_height*2/10, $img_width*8/10, $img_height*5/10], 3, $red);
 
imageellipse($img, 100, 100, 100, 100, $orange);
imagearc($img, $img_width*3/10, $img_height*8/10, 100, 200, 180, 360, $red);
 
imageline($img, 0, $img_height*8/10, $img_width, $img_height*8/10, $green);
 
imagepng($img);

نکته ی مهم در این کار فقط این است که مقدار مختصات های مختلف را بدست بیاوریم. ما می خواهیم همه چیز را به تناسب سایز تصویر اصلی طراحی کنیم، به همین دلیل از متغیرهای $img_height  و $img_width  استفاده می کنیم تا مختصات نقاط مختلف را به دست بیاوریم.

کنترل ضخامت خطوط، استایل و رنگ های زمینه ای

تصویر بالا مشکلاتی از جمله نازک بودن بعضی خطوط و نبود رنگ را در خود نشان می دهد. تمام این مشکلات را می توان به سادگی با کمک توابعی همچون imagesetthickness()  و imagefilledrectangle() برطرف نمود.

ضخامت خطوط

تابع imagesetthickness($image, $thickness)  ضخامت خطوط رندر شده را هنگام ترسیم چهارضلعی، چندضلعی، کمان و غیره تنظیم می کند. به طور مثال اگر  $thickness  را برابر 5 قرار دهیم، باعث می شود هر شکلی که با استفاده از imagerectangle()imagearc()imagepolygon() و غیره طراحی شده ضخامت 5 پیکسل را داشته باشد.

ترسیم اشکال پر شده

هر تابعی که برای طراحی یک شکل به کار می رود یک نسخه ی Filled Color هم دارد که داخل آن شکل خاص را با رنگ مشخصی پر می کند. به عنوان مثال imagefilledrectangle()  چهارضلعی ترسیم شده را با رنگ مشخص شده پر می کند.

استفاده از قلم ها

یکی از توابع بسیار کاربردی GD تابع  imagesetbrush($image, $brush)است. پارامتر $brush در این تابع یک منبع تصویر دیگر است که فقط می تواند خط ترسیم کند. مثلا می توانید یک طرح برداری شفاف از یک گل را به عنوان یک قلم برای اضافه کردن الگوهای زیبایی از گل در طرح های خود به کار ببرید. قطعه کدی که در زیر می بینید برای استفاده از تصویر یک ابر به عنوان یک قلم، هنگام طراحی یک کار استفاده شده است. این کد یک ابر را به آسمان طرح ما اضافه می کند:  

 
$img = imagecreatetruecolor($img_width, $img_height);
 
$clouds = imagecreatefrompng('clouds.png');
$clouds = imagescale($clouds, 250);
 
imagesetthickness($img, 5);
imagesetbrush($img, $clouds);
 
imageline($img, $img_width*9/10, 50, $img_width*9/10, 50, IMG_COLOR_BRUSHED);

ما این تصویر ابر را از Pixabay دریافت کردیم و مقیاس آن را به نسبت پروژه ی موجود تنظیم کرده ایم.

کد کامل مربوط به این کلبه در زیر نمایش داده شده است. خیلی ساده است، فقط از هر شکل دو مورد اضافه کرده ایم، یکی برای طرح اصلی و یکی برای رنگ زدن درون شکل: 

header("Content-type: image/png");
$img_width = 800;
$img_height = 600;
 
$img = imagecreatetruecolor($img_width, $img_height);
 
$clouds = imagecreatefrompng('clouds.png');
$clouds = imagescale($clouds, 250);
 
imagesetthickness($img, 5);
imagesetbrush($img, $clouds);
 
$black = imagecolorallocate($img, 0, 0, 0);
$white = imagecolorallocate($img, 255, 255, 255);
$red   = imagecolorallocate($img, 255, 0, 0);
$green = imagecolorallocate($img, 0, 255, 0);
$blue  = imagecolorallocate($img, 0, 200, 250);
$orange = imagecolorallocate($img, 255, 200, 0);
$brown = imagecolorallocate($img, 220, 110, 0);
 
imagefill($img, 0, 0, $white);
 
imagefilledrectangle($img, 0, 0, $img_width, $img_height*8/10, $blue);
 
imagefilledrectangle($img, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*8/10, $red);
imagefilledrectangle($img, $img_width*4/10 - 2, $img_height*5/10, $img_width*8/10, $img_height*8/10, $red);
 
imagefilledpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 3, $red);
imagefilledpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*7/10, $img_height*2/10, $img_width*8/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 4, $red);
 
imagefilledarc($img, 100, 100, 100, 100, 0, 360, $orange, IMG_ARC_PIE);
imagefilledarc($img, $img_width*3/10, $img_height*8/10, 100, 200, 180, 360, $brown, IMG_ARC_PIE);
 
imagefilledrectangle($img, 0, $img_height*8/10, $img_width, $img_height, $green);
 
imagerectangle($img, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*8/10, $black);
imagerectangle($img, $img_width*4/10 - 2, $img_height*5/10, $img_width*8/10, $img_height*8/10, $black);
 
imagepolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 3, $black);
imageopenpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*7/10, $img_height*2/10, $img_width*8/10, $img_height*5/10], 3, $black);
 
imagearc($img, 100, 100, 100, 100, 0, 360, $black);
imagearc($img, $img_width*3/10, $img_height*8/10, 100, 200, 180, 360, $black);
 
imageline($img, $img_width*9/10, 50, $img_width*9/10, 50, IMG_COLOR_BRUSHED);
 
imagerectangle($img, -100, $img_height*8/10, $img_width*11/10, $img_height*11/10, $black);
 
imagepng($img);

تصویر زیر نتیجه ی نهایی کد PHP GD است که در بالا مشاهده کردید.

رندر کردن متن، روی تصاویر

PHD GD دارای چهار تابع مختلف است که امکان رندر کردن چند کاراکتر یا فقط یک کاراکتر در جهت افقی یا عمودی را به شما می دهد. این توابع عبارتند از imagechar()imagecharup()imagestring()  و imagestringup()  که تمام آنها شش پارامتر مشترک را می گیرند، به همین علت در اینجا فقط روی تابع imagechar() متمرکز می شویم. پارامتر $font  در تابع imagechar($image, $font, $x, $y, $string, $color) سایز متن رندر شده را مشخص می کند و فقط اعداد صحیح بین 1 تا 5 را می گیرد. پارامتر $string  متنی است که می خواهید رندر کنید. اگر یک رشته ی چند کاراکتری را به تابع های Char وارد کنید فقط کاراکتر اول روی تصویر شما رندر می شود. تابع های imagecharup()  و imagestringup()  نیز متن را به صورت عمودی از پایین به بالا رندر می کنند.   

در زمینه ی رندر کردن متن، چهار تابعی که در بالا در مورد آنها صحبت کردیم خیلی محدود هستند. خیلی زود متوجه می شوید که حتی بزرگترین سایز فونت برای کاربرد معمولی خیلی کوچک است. همچنین این مشکل نیز وجود دارد که متن فقط به صورت افقی و عمودی پرینت می شود.

خوشبختانه GD تابع imagettftext($image, $size, $angle, $x, $y, $color, $fontfile, $text)  را نیز دارد که می تواند متن را در هر فونتی که مورد نظر شماست رندر کند. پارامتر $fontfile  برای مشخص کردن مسیر منتهی به فونت TrueType ی که قصد به کارگیری آن برای نمایش متن را دارید به کار می رود. پارامترهای $x  و $y   نیز مکان نقطه ی شروع متن رندر شده را مشخص می کند.

نمونه ی زیر از تمام این تابع ها استفاده کرده تا افکت های متنی زیبایی ایجاد کند: 

 
header("Content-type: image/png");
$img_width = 800;
$img_height = 600;
 
$img = imagecreatetruecolor($img_width, $img_height);
 
$black = imagecolorallocate($img, 0, 0, 0);
$white = imagecolorallocate($img, 255, 255, 255);
$red   = imagecolorallocate($img, 255, 0, 0);
$green = imagecolorallocate($img, 0, 255, 0);
$blue  = imagecolorallocate($img, 0, 200, 250);
$orange = imagecolorallocate($img, 255, 200, 0);
$brown = imagecolorallocate($img, 220, 110, 0);
 
imagefill($img, 0, 0, $white);
 
imagestringup($img, 5, $img_width*19/20, $img_height*19/20, 'This sentence was written using imagestringup()!', $blue);
imagestring($img, 5, $img_width/20, $img_height/20, 'This sentence was written using imagestring()!', $red);
 
$passion_one = dirname(__FILE__) . '/PassionOne-Regular.ttf';
imagettftext($img, 32, 0, $img_width/20, $img_height*2/10, $black, $passion_one, 'This is Passion One Font!');
 
$merriweather = dirname(__FILE__) . '/Merriweather-Regular.ttf';
imagettftext($img, 24, 90, $img_width*9/10, $img_height*19/20, $black, $merriweather, 'This is Merriweather Regular Font!');
 
$patua_one = dirname(__FILE__) . '/PatuaOne-Regular.ttf';
imagettftext($img, 32, 0, $img_width/20, $img_height*3/10 + 2, $black, $patua_one, 'This is Patua One Font!');
imagettftext($img, 32, 0, $img_width/20, $img_height*3/10, $orange, $patua_one, 'This is Patua One Font!');
 
$monoton = dirname(__FILE__) . '/Monoton-Regular.ttf';
imagettftext($img, 72, 0, $img_width/20, $img_height*5.5/10 - 5, $brown, $monoton, 'MONOTON');
imagettftext($img, 72, 0, $img_width/20, $img_height*5.5/10 + 5, $orange, $monoton, 'MONOTON');
imagettftext($img, 72, 0, $img_width/20, $img_height*5.5/10, $blue, $monoton, 'MONOTON');
 
$kaushan = dirname(__FILE__) . '/KaushanScript-Regular.ttf';
imagettftext($img, 84, 0, $img_width/20, $img_height*8/10 - 2, $brown, $kaushan, 'Good Night!');
imagettftext($img, 84, 0, $img_width/20, $img_height*8/10 + 2, $black, $kaushan, 'Good Night!');
imagettftext($img, 84, 0, $img_width/20 - 2, $img_height*8/10, $brown, $kaushan, 'Good Night!');
imagettftext($img, 84, 0, $img_width/20 + 2, $img_height*8/10, $black, $kaushan, 'Good Night!');
imagettftext($img, 84, 0, $img_width/20, $img_height*8/10, $white, $kaushan, 'Good Night!');
 
imagepng($img);

همانطور که می بینید همان متن با همان فونت را در یک موقعیت متفاوت رندر کرده ایم تا افکت هایی شبیه سایه ی متنی ساده ای ایجاد شود. نکته ی مهمی که باید به خاطر بسپارید این است که متن مورد نظر با هر تابعی که رندر شده باشد در صورت وجود هم پوشانی با متنی که زیر آن قرار بگیرد، متن زیرین را پنهان می کند. در تصویر زیر نتیجه ی حاصل از اجرای کد بالا را مشاهده می نمایید:

توضیحات نهایی

هدف این آموزش، آشنا کردن شما با توابع مختلف GD به منظور طراحی اشکال پایه از صفر در PHP بود. با اندکی کمک گرفتن از ریاضیات می توانید این توابع را برای ایجاد اشکال پیچیده تر هندسی مثل چندضلعی های منظم و مستطیل هایی که زوایای گرد دارند نیز به کار بگیرید.

PHP GD یک سری توابع بسیار کاربردی برای رندر کردن متن روی تصویر را نیز داراست. به کارگیری یک فونت خوب این اطمینان را به شما می دهد که متن رندر شده هنگامی که روی تصاویری که معمولا از مسیرهای مختلف بارگذاری می شوند، قرار می گیرد نمای بدی نخواهد داشت.

آیا شما تا به حال افکت های متنی خاصی را در PHP طراحی کرده اید؟ لطفاً تجربیات خود را در کامنت ها با ما به اشتراک بگذارید.

اگر میخواهید برنامه نویسی با php را اصولی یاد بگیری پیشنهاد ما به شما استفاده از دوره صفر تا صد php است.