Transcript ppt - กลับเว็บโรงเรียน

การสร ้างงาน
กราฟิ ก
การเขียนเว็บเพจด้php
วยภาษา
ในภาษา
php
ศู นย ์คอมพิวเตอร ์
โรงเรียนปลวกแดงพิทยาคม
้
ขันตอนการสร ้าง
1.
สร
้างรู
ป
ภาพว่
า
งๆขึ
น
้
มาใหม่
รู ปภาพ

กาหนดส ี
้ รูปทรง หรือเขียน
 3. วาดเสน
ข ้อความ
่ ผลลัพธ์เป็ นรูปแบบของ
 4. สง
ภาพ
 2.
1. สร ้างรูปภาพว่างๆ
ขึ
เปรี
บเสมือนสร ้างผ ้าใบในการ
น
้ ยมาใหม่
วาดภาพ
้ งก์ชน
ั ImageCreate ดังนี้
 ใชฟั




resource = ImageCreate(int ความกว ้าง, int
ความสูง);
่
เชน
$im = ImageCreate(300, 200);
เป็ นการสร ้างรูปขนาดกว ้าง 300 สูง 200 โดยมีตัว
2. กาหนดส ี
 เหมือนกับการเตรียมสเี อาไว ้ก่อน
้ งก์ชน
ั
 ใชฟั
คือ

ImageColorAllocate
int ImageColorAllocate(resource รูปภาพ,

ี ดง,
int ค่าสแ

int ค่าสเี ขียว,
2. กาหนดส ี
ี าวสาหรับทารอง
 ต ้องกาหนดสข
พืน
้ ด ้วยดังนี้

$white = ImageColorAllocate($im,255,255,255);
3. วาดเสน้ รูปทรง หรือ
เขี
ย
นข
้อความ
่ ถ ้าต ้องการวาดรูปสเี่ หลีย
 เชน
่ ม ก็
ั
ให ้ใชฟั้ งก์ชน
ImageFilledRectangle ดังนี้

bool ImageFilledRectangle(resource รูปภาพ,

int x1, int y1,


int x2, int y2,int ส)ี ;
ิ้ สุด
โดยที่ x1 เป็ นจุดเริม
่ ต ้นในแนวนอน x2 เป็ นจุดสน
3. วาดเสน้ รูปทรง หรือ
เขี
ย
นข
้อความ
 ก่อนวาดรูปทุกครัง
้ ให ้ลงพืน
้ ด ้วยส ี
ขาวก่อนโดยใชค้ าสงั่



ImageFilledRectangle($im,0,0,300,200,$white);
โดยที่ 300 คือความกว ้างของแถบผ ้าใบ
โดยที่ 200 คือความสูงของแถบผ ้าใบ
4. สง่ ผลลัพธ์เป็ น
 การสร ้างภาพกราฟิ กในภาษา
รูปแบบของภาพ
ั่
php เป็ นเสมือนการเขียนคาสง
สร ้างไฟล์ php ให ้เป็ นรูปภาพ
่ ผลลัพธ์เป็ นรูปภาพมีอยู่
 การสง
2 ขัน
้ ตอนคือ
 4.1 กาหนด header
่ ข ้อมูลรูปภาพ
 4.2 สง
4.1 กาหนด header
่
 เชน
กรณีต ้องการสร ้างรูปแบบ
PNG ให ้สง่ ข ้อมูล header ดังนี้

header(“Content-type:image/png”);
4.2 สง่ ข ้อมูลรูปภาพ
่
 เชน
ต ้องการสร ้างสง่ รูปภาพ
ั
แบบ PNG ให ้ใชฟั้ งก์ชน
ImagePNG ดังนี้

ImagePNG($im);
5. คืนทรัพยากรให ้ระบบ
 เมือ
่ สร ้างรูปเสร็จให ้คืน
ทรัพยากรแก่ระบบโดยใช ้
ั ImageDestroy ดังนี้
ฟั งก์ชน

ImageDestroy($im);
ตัวอย่างการสร ้างงาน
ั่ แล ้วบันทึกเป็ น
 1. พิมพ์คาสง
กราฟิ ก
ไฟล์ php
 2. เวลาเปิ ดดูให ้เรียกไฟล์นัน
้
 3. ถ ้าอยากแสดงรูปนั น
้ ในไฟล์
อืน
่ ให ้ใช ้ tag img เหมือนกับแร
่
แสดงรูปทั่วไป เชน
 <img src=myimg.php>















<?php
//1.สร ้างรูปภาพขนาด 300 x 200
$im = ImageCreate(300,200);
ี ใี่ ชระบายรู
้
//2.กาหนดสท
ปภาพ
$white = ImageColorAllocate($im,255,255,255);
$red = ImageColorAllocate($im,0,255,0);
//3.วาดสเี่ หลีย
่ ม
ImageRectangle($im,0,0,300,200,$white);
ImageFilledEllipse($im,50,50,75,50,$red);
//4.1 สง่ ข ้อมูลเฮดเดอร์ไปยังเว็บบราวเซอร์
Header("Content-type: image/png");
//4.2 สง่ ข ้อมูลรูปภาพให ้เว็บบราวเซอร์
ImagePNG($im);
//5. คืนทรัพยากรสูร่ ะบบImageDestroy($im);
?>
ตัวอย่างการสร ้างงาน
กราฟิ ก
การวาดรูปทรงต่างๆ
 เมือ
่ ทราบขัน
้ ตอนการสร ้างรูป
กราฟิ กแล ้วขัน
้ ต่อไปเป็ นการ
ั สาหรับวาด
นาเสนอ ฟั งก์ชน
รูปทรงต่างๆ
้
การวาดเสนตรง
้ งก์ชน
ั
 ใชฟั
คือ




ImageLine มีรป
ู แบบ
bool ImageLine(resource รูป, int x1, int y1,
int x2, int y2, int ส)ี ;
ั วาดเสนตรงจากต
้
เป็ นฟั งก์ชน
าแหน่ง x1,y1 ไปยัง
่
x2,y2 เช5,5
น
ImageLine($im, 5, 5,20,20,$red);
20,20
้
การวาดเสนโค
้ง
้ งก์ชน
ั
 ใชฟั
คือ



ImageArc มีรป
ู แบบ
bool ImageLine(resource รูป, int cx, int cy,
int w, int h, int s,int e,int ส)ี ;
โดยที่ cx,cy คือกว
จุด้าง
ศูนย์กลาง กว ้าง w สูง h
้
เสนโค
้งเริม
่ ทีม
่ ม
ุ ws จบทีม
่ ม
ุ e ดังรูป
สูง h
cx,cy
s องศา
e องศา
การวาดสเี่ หลีย
่ ม
้
 หมายถึงสเี่ หลีย
่ มทีม
่ เี ฉพาะเสนไม่
ระบาย
พืน
้
้ งก์ชน
ั ImageRectangle มีรป
 ใชฟั
ู แบบคือ



bool ImageRectangle(resource รูป, int x1, int y1,
int x2, int y2, int ส)ี ;
่ ImageRectangle
เชน
($im, 5, 5,20,20,$red);
5,5
20,20
การวาดวงรี/วงกลม



ั ImageEllipse มีรป
ใชฟั้ งก์ชน
ู แบบคือ
bool ImageEllipse(resource รูป, int cx, int cy,
int w, int h, int ส)ี ;
โดยที่ cx,cy คือจุดศูนย์กลาง กว ้าง w สูง h
ี ก
ตามสท
ี่ าหนด
่ ImageEllipse($im,100,100,50,30,$red)
 เชน
กว ้าง 50

สูง
30
100,100
การวาดรูปหลายเหลีย
่ ม







ั ImagePolygon รูปแบบคือ
ใชฟั้ งก์ชน
bool ImagePolygon(resource รูป, array จุดยอด,
int จานวนจุด
ยอด, int ส)ี ;
่ มี 3 จุดคือ
ตัวอย่างการสร ้าง array ของจุดยอด เชน
(0,0),(100,200),(300,200) จะต ้องสร ้างอะเรย์ดังนี้
$point = array(0,0,100,200,300,200);
ตัวอย่าง
ImagePolygon($im,$point,3,$red);
การวาดรูปทรงทึบ







้
ั สาหรับวาดรูป
นอกจากรูปเสนโปร่
งแล ้ว ยังมีฟังก์ชน
ี น
พร ้อมกับระบายสพ
ื้ ด ้วยโดยมีรป
ู แบบเหมือนกับรูป
ั ดังนี้
โปร่งทุกประการ โดยมีฟังก์ชน
วาดรูปสว่ นโค ้งแบบระบาย
ImageFilledArc(resource รูป,int cx,int cy,int w,
int h, int s, int e, int รูปแบบ );
โดยที่ รูปแบบ มี 4 รูปแบบคือ
้
IMG_ARC_CHORD วาดเสนตรงจากมุ
มเริม
่ ต ้น
ิ้ สุด
มายังมุมสน
้
IMG_ARC_PIE กาหนดให ้วาดเสนโค
้งจากมุม
ิ้ สุด
เริม
่ ต ้นมายังมุมสน
การวาดรูปทรงทึบ(ต่อ)








้
ั สาหรับวาดรูป
นอกจากรูปเสนโปร่
งแล ้ว ยังมีฟังก์ชน
ี น
พร ้อมกับระบายสพ
ื้ ด ้วยโดยมีรป
ู แบบเหมือนกับรูป
ั ดังนี้
โปร่งทุกประการ โดยมีฟังก์ชน
วาดรูปวงรีวงกลมแบบระบาย
ImageFilledEllipse(resource รูป, int cx, int cy,
int w, int h, int ส)ี ;
ImageFilledRectangle(resouce รูป,int x1, int y1,
int x2, int y2, int ส)ี ;
ImageFilledPolygon(resource รูป, array จุดยอด,
int จานวนจุด

<?php
// สร ้างรูปเปล่าขนาด 500 x 200
$im = ImageCreate(500,200);
// กาหนดค่าส ี
ImageColorAllocate($im,255,255,255);
$red = ImageColorAllocate($im,255,0,0);
$blue = ImageColorAllocate($im,0,0,255);
//วาดรูปทรงทึบแบบต่างๆ

ImageFilledArc($im,100,100,200,200,180,235,$red,IMG_ARC_PIE);

ImageFilledEllipse($im,200,150,300,80,$blue);
$points = array(340,50,320,180,360,60,640,40,350,40,300,10);
ImageFilledPolygon($im, $points, 6, $red);
//กาหนดรูปเป็ น image และ คืนค่าสูร่ ะบบ
Header(“Content-type: img/png”);
ImagePNG($im);
ImageDestroy($im);













ตัวอย่างการสร ้างงาน
กราฟิ ก






การวาดข ้อความลงใน
ั ImagePolygon และ ImageStringUp
ใชฟั้ งก์ชน
รูรู
ปแบบคื
ป อ
bool ImageString(resource รูป, int ฟอนต์, int
x,int y,
string ข ้อความ, int ส ี );
bool ImageStringUp ( resource รูปภาพ, int x,
int y, string ข ้อความ, int ส ี
);
้
โดย ImageString มุมบนซายของข
้อความจะอยูท
่ ี่
ตาแหน่ง x,y ฟอนต์ต ้องเป็ นจานวนเต็มตัง้ แต่ 1 ถึง 5
ได ้แต่ภาษาอังกฤษ




















<?php
$im = ImageCreate(300,160);
ImageColorAllocate($im,255,255,255);
$red = ImageColorAllocate($im,255,0,0);
$blue = ImageColorAllocate($im,0,0,255);
//วาดข ้อความแนวนอน
$y = 0;
for ($f=1;$f<=5;$f++){
ImageString($im,$f,0,$y,“PHP FONT $f”,$blue);
$y+=20;
}
//วาดข ้อความแนวตัง้
$x = 180;
for ($f=1;$f<=5;$f++){
ImageStringUp($im,$f,$x,150,“PHP FONT $f”,$red);
$x+=20;
}
Header(“Content-type: img/png”);
ImagePNG($im);
ImageDestroy($im);
ตัวอย่างการสร ้างงาน
กราฟิ ก