ครั้งสุดท้ายที่ฉันพูดถึงวิธีการวาดง่ายๆ ที่หลีกเลี่ยง GD จากนั้นฉันก็ใช้ GD เพื่อวาด "การวาดภาพ" ที่ง่ายที่สุด - เส้นตรง
คราวนี้ผมจะวาดเส้นตรงลงไปข้างล่างต่อไป ส่วนที่อธิบายไว้โดยละเอียดในโค้ดล่าสุดจะไม่ถูกทำซ้ำในครั้งนี้
-
ส่วนหัว("ประเภทเนื้อหา: image/png");
$im = ImageCreate (200, 100);
$col_black = ImageColorAllocate($im, 0,0,0);
$col_orn = ImageColorAllocate($im, 255,192,0);
// วันนี้มาใช้สีส้มกัน
// การใช้งานแบบเดียวกับฟังก์ชันอิมเมจไลน์ทุกประการ
ImageDashedLine($im,0,100,199,100,$col_orn);
// เป็นการวาดเส้นประ
// มาทำการทดสอบด้านล่างกัน ใช้เพื่ออธิบายปัญหา
$col_yel = ImageColorAllocate($im, 255,255,0);
//สีเหลือง.
ImageLine($im,0,99,199,99,$col_yel);
// วาดเส้นสีเหลืองที่ขอบด้านล่างของภาพ
ImageLine($im,200,0,200,100,$col_orn);
// พยายามวาดเส้นสีส้มที่ขอบขวาสุดของภาพ แต่ก็ไม่มีอะไรเกิดขึ้น
// นี่แสดงว่าช่วงพิกัดของรูปภาพที่มีความกว้าง 200 และความสูง 100 คือ (0,0) ถึง (199,99)
ImagePNG($IM);
ImageDestroy($im);
// ขอจบส่วนนี้ก่อน
-
ผลต่อไปจะดีมาก! ตอนนี้ผมกำลังเรียนรู้และขายอยู่เหมือนกัน PHP 4.0.6 ขึ้นไปเพิ่มการใช้งานนี้ - คุณสามารถวาดเส้นเป็นสีอื่นได้! ตัวอย่างมีดังนี้:
<?
ส่วนหัว("ประเภทเนื้อหา: image/png");
$im = ImageCreate (200, 100);
$col_black = ImageColorAllocate($im, 0,0,0);
$col_orn = ImageColorAllocate($im, 255,192,0);
$col_red = ImageColorAllocate($im, 255,0,0);
$style=array($col_red,$col_red,$col_black,$col_orn,$col_orn,$col_orn,$col_black);
ImageSetStyle($im, $style);
ImageLine($im, 0, 50, 199, 50, IMG_COLOR_STYLED);
ImagePNG($im);
ImageDestroy($im);
?>
ดูที่เอฟเฟคสิ
โปรดอธิบายสามบรรทัดที่ฉันคั่นด้วยบรรทัดว่าง มีการกำหนดอาร์เรย์ $style ซึ่งสมาชิกจะเป็นชุดของสี
จากนั้นฟังก์ชันก็ถูกดำเนินการ จากนั้นจึงใช้ "สี" IMG_COLOR_STYLED เพื่อวาด "เส้นตรง" อันมหัศจรรย์——
เอฟเฟกต์สลับสีแดง สีดำ สีส้ม หากสังเกตให้ดีจะพบว่าลำดับที่สลับกันของสีแดง สีดำ และสีส้มคือสิ่งที่เรากำหนดไว้
ลำดับของสมาชิกอาร์เรย์ $style: แดง แดง ดำ ส้ม ส้ม ส้ม ดำ จากนั้นวงจรจะเริ่มต้นใหม่อีกครั้ง...
คุณเข้าใจไหม? โปรดทราบว่าฟังก์ชันนี้รองรับหลังจาก PHP 4.0.6 เท่านั้น
ด้วยพื้นฐานการวาดเส้นที่ผมอธิบายไว้อย่างละเอียด ผมอยากเขียนฟังก์ชันสำหรับวาดรูปเรขาคณิตอื่นๆ ได้ในคราวเดียว สิ่งที่ฉันต้องเตือนทุกคนก็คือ ไม่ว่าคุณจะวาดรูปเรขาคณิตแบบไหน มันก็ไม่มีอะไรมากไปกว่าการเข้าใจองค์ประกอบหลายๆ อย่างของรูปนี้ ไม่นับสีก่อน องค์ประกอบของกราฟิกต่างๆ มีดังนี้:
จุด สององค์ประกอบ: abscissa และ ordinate
สี่เหลี่ยมผืนผ้า องค์ประกอบสี่: abscissa และ ordinate
arc ที่มุมซ้ายบนและมุมขวาล่าง ทำความเข้าใจด้วยวิธีนี้: arc สามารถรวมส่วนโค้งได้ ส่วนโค้งรูปไข่ วาดส่วนโค้งและวาด 360 องศาเพื่อสร้างวงกลม วาดส่วนโค้งรูปไข่และวาด 360 องศาเพื่อสร้างวงกลม
มันก่อตัวเป็นรูปวงรี ดังนั้นจึงมีองค์ประกอบหกประการของส่วนโค้งนี้: พิกัดแนวนอนและแนวตั้งของจุดศูนย์กลาง, ความยาวของแกนนอน, ความยาวของแกนแนวตั้ง และจุดเริ่มต้นและจุดสิ้นสุดของส่วนโค้ง
ดูตัวอย่างต่อไปนี้
-
ส่วนหัว("ประเภทเนื้อหา: image/png");
$im = ImageCreate (200, 100);
$col_blk = ImageColorAllocate($im, 0,0,0);
$col_orn = ImageColorAllocate($im, 255,192,0);
$col_red = ImageColorAllocate($im, 255,0,0);
$col_grn = ImageColorAllocate($im, 0,255,0);
$col_blu = ImageColorAllocate($im, 0,0,255);
ImageSetPixel($im,20,10,$col_orn);
// มันเป็นจุดเล็กๆ สงสัยว่าจะมองเห็นไหม?
สี่เหลี่ยมผืนผ้ารูปภาพ($im,25,20,95,55,$col_blu);
// สี่เหลี่ยมสีน้ำเงิน.
ImageArc($im,20,85,50,40,225,360,$col_grn);
// ส่วนโค้งวงรีสีเขียว ศูนย์กลางที่ (20,85) แกนนอน 50 แกนแนวตั้ง 40, 225 องศาถึง 360 องศา
// จะเห็นได้ว่าจุดเริ่มต้นและจุดสิ้นสุดของส่วนโค้งที่นี่วัดเป็นมุม
// คำนวณตามเข็มนาฬิกาโดยให้ทิศทางขวาแนวนอนเป็น 0 องศา
ImageArc($im,160,60,40,40,0,360,$col_orn);
// สีส้มเต็มวงกลม. ตราบใดที่ความยาวของแกนนอนเท่ากับความยาวของแกนตั้ง มันจะเป็นวงกลมที่สมบูรณ์แบบ
// เราทุกคนเรียนกันตั้งแต่มัธยมปลาย วงกลมเป็นกรณีพิเศษของวงรี!
//ในที่สุดก็วาดส่วนโค้งอื่น จุดศูนย์กลางของวงกลมสามารถอยู่นอกภาพได้หรือไม่?
ImageArc($im,160,140,240,240,0,360,$col_red);
// สามารถ!
ImagePNG($IM);
ImageDestroy($im);
?>
แน่นอนว่าเมื่อวาดภาพเป็นสิ่งที่หลีกเลี่ยงไม่ได้ที่จะทาสีบางพื้นที่ด้วยสีใดสีหนึ่ง GD มีวิธีการระบายสีสามวิธี วิธีแรกคือการระบายสีพื้นที่สี่เหลี่ยม
วิธีหนึ่งคือการระบายสีบริเวณที่ปิดล้อมซึ่งเป็นที่ตั้งของจุดที่ระบุ และอีกอย่างคือการระบายสีพื้นที่ที่ล้อมรอบด้วยสีที่ระบุ ดูตัวอย่างต่อไปนี้:
-
ส่วนหัว("ประเภทเนื้อหา: image/png");
$im = ImageCreate (200, 100);
$col_blk = ImageColorAllocate($im, 0,0,0);
$col_orn = ImageColorAllocate($im, 255,192,0);
$col_yel = ImageColorAllocate($im, 255,255,0);
$col_red = ImageColorAllocate($im, 255,0,0);
$col_grn = ImageColorAllocate($im, 0,255,0);
$col_blu = ImageColorAllocate($im, 0,0,255);
ImageFilledRectangle($im,20,10,100,50,$col_blu);
ImageFilledRectangle($im,5,40,50,90,$col_red);
ImageFilledRectangle($im,40,80,100,95,$col_orn);
ImageFilledRectangle($im,90,35,110,90,$col_yel);
//ด้านบนเป็นการลงสีครั้งแรก วาดรูปสี่เหลี่ยมโดยตรง
// ฉันจงใจล้อมรอบพื้นที่เล็กๆ ด้วยสี่เหลี่ยมสี่สีที่มีสีต่างกัน
// ใช้เพื่ออธิบายการระบายสีครั้งที่สอง
ImagePNG($IM);
ImageDestroy($im);
//มาดูเอฟเฟคกัน
?>
จากนั้น:
<?
ส่วนหัว("ประเภทเนื้อหา: image/png");
$im = ImageCreate (200, 100);
$col_blk = ImageColorAllocate($im, 0,0,0);
$col_orn = ImageColorAllocate($im, 255,192,0);
$col_yel = ImageColorAllocate($im, 255,255,0);
$col_red = ImageColorAllocate($im, 255,0,0);
$col_grn = ImageColorAllocate($im, 0,255,0);
$col_blu = ImageColorAllocate($im, 0,0,255);
ImageFilledRectangle($im,20,10,100,50,$col_blu);
ImageFilledRectangle($im,5,40,50,90,$col_red);
ImageFilledRectangle($im,40,80,100,95,$col_orn);
ImageFilledRectangle($im,90,35,110,90,$col_yel);
//ด้านบนเป็นการลงสีครั้งแรก วาดรูปสี่เหลี่ยมโดยตรง
// ฉันจงใจล้อมรอบพื้นที่เล็กๆ ด้วยสี่เหลี่ยมสี่สีที่มีสีต่างกัน
> // ใช้เพื่ออธิบายการระบายสีครั้งที่สอง
ImageFill($im,70,70,$col_grn);
// นี่คือสีที่สอง
สี่เหลี่ยมผืนผ้ารูปภาพ($im,120,40,190,90,$col_grn);
// เรามาวาดรูปสี่เหลี่ยมเพื่อทำเป็นกรอบกันดีกว่า ในความเป็นจริง เส้นขอบทุกรูปแบบสามารถใช้เป็นกรอบได้
ImageFilltoBorder($im,130,50,$col_grn,$col_orn);
// ทาสีสี่เหลี่ยมสีเขียวสีส้ม
// ตราบใดที่จุดที่ระบุอยู่ภายในขอบเขตของ "กล่อง" นี้ ก็ไม่เกี่ยวข้องกับตำแหน่งของจุดในพื้นที่
// ฟังก์ชั่นนี้ใช้งานได้จริงดังนี้:
//เริ่มจากจุดที่กำหนดแล้วมองออกไปด้านนอกเพื่อดูขอบเขตของสีที่ระบุ หากพบ ให้หยุด
// หากหาไม่เจอ ให้ทาสีจุดที่ผ่านด้วยสีที่ต้องการ
ImagePNG($IM);
ImageDestroy($im);
//มาดูเอฟเฟคกัน
// ตอนนี้ภาพที่เราทำมีสีสัน แต่ในเบราว์เซอร์บนรูปภาพ
// คลิกขวา->คุณสมบัติ: เพียง 214 ไบต์!
?>
คราวนี้เรามาหยุดที่นี่กันเถอะ