ในการเริ่มรันตัวอย่างที่ให้ไว้ในบทความนี้ คุณต้องมี JDK 1.2 หรือสูงกว่า ( http://java.sun.com ) คุณจะต้องมีเว็บเซิร์ฟเวอร์ที่รองรับ JSP ฉันทดสอบตัวอย่างนี้บน Tomcat ซึ่งฉันใช้คลาส com.sun.image.codec.jpeg (เปิดตัวใน Sun Java 2 SDK) เพื่อเข้ารหัสข้อมูลกราฟิก
เนื่องจากคุณต้องการให้พื้นหลังแบบใช้ซ้ำได้ คุณควรสร้างคลาส Java เพื่อจัดการโครงร่าง รวมถึงพื้นที่หัวเรื่องและเส้นขอบด้านนอก ดังแสดง ในรูปที่ A
รูปที่ ก
อย่างที่คุณเห็น ฉันได้แรเงาทั้งบริเวณชื่อเรื่องและเส้นขอบด้านนอก ชื่อเรื่องมีเส้นขอบสีขาวกว้างหนึ่งพิกเซล และพื้นที่กราฟิกมีเส้นขอบสีดำบางๆ เส้นขอบเหล่านี้เพิ่มความหมายให้กับเงา
ขอบเขตนั้นง่ายต่อการสร้าง ใช้เมธอด Fill() ของวัตถุ Graphics2D เพื่อเติมสี่เหลี่ยมหัวเรื่องสีน้ำเงิน จากนั้นใช้เมธอด Draw() เพื่อวาดเส้นขอบด้วยสีอื่น
การสร้างเอฟเฟ็กต์เงาก็ทำได้ง่ายมากเช่นกัน ขั้นแรก ให้ใช้เมธอด fill() เพื่อวาดเงา จากนั้น วาดชื่อเรื่องโดยเว้นระยะเจ็ดพิกเซล การชดเชยนี้จะสร้างเอฟเฟกต์สามมิติ ซึ่งส่งผลให้เกิดเอฟเฟกต์เงา
สมมติว่ามีบริษัทแห่งหนึ่งที่จำหน่ายสินค้าเกษตรและต้องมีฮิสโตแกรมเพื่อแสดงยอดขาย ในการใช้งานจริง เราจำเป็นต้องได้รับข้อมูลนี้จากฐานข้อมูลหรือไฟล์ XML แต่เพื่อความง่าย สมมติว่าข้อมูลการขายถูกจัดเก็บไว้ในอาร์เรย์สองตัวต่อไปนี้:
ชื่อข้อมูลสตริง [] = {"apple", "orange", "peach", "lemon", "grapefruit"};
ค่าข้อมูล int[] = {11, 62, 33, 102, 50};
แถวที่ 1 จัดแสดงสินค้าเกษตรต่างๆ ที่บริษัทจำหน่าย อาร์เรย์ที่สองคือปริมาณการขายที่สอดคล้องกับสินค้าเกษตรแต่ละรายการ
ฮิสโตแกรมจะแสดงและบันทึกในรูปแบบ JPEG ดังนั้นเราจึงจำเป็นต้องตั้งค่า MIME ซึ่งเป็นประเภทเนื้อหาให้ถูกต้อง เบราว์เซอร์ใช้ประเภท MIME เพื่อตัดสินใจว่าจะตอบสนองอย่างไร รหัสต่อไปนี้ตั้งค่าประเภท MIME:
response.setContentType("รูปภาพ/jpeg");
ต่อไป เราต้องการวัตถุที่แสดงถึงรูปภาพ Java 2D API รองรับคลาส BufferedImage ซึ่งให้วิธีการบันทึกและจัดการข้อมูลพิกเซลในหน่วยความจำ เราต้องการให้กราฟิกเป็นสี ดังนั้นเราจึงใช้ประเภทกราฟิก TYPE_INT_RGB ข้อมูลจำนวนเต็มสองตัว WIDTH และ HEIGHT ใช้เพื่อระบุความกว้างและความสูงของรูปภาพเป็นพิกเซล:
BufferedImage bi = BufferedImage ใหม่ (WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
ตอนนี้เรามีวัตถุ BufferedImage แล้ว เราสามารถตั้งค่าเนื้อหาของ Graphics2D ได้โดยการเรียกเมธอด createGraphics() ของวัตถุ:
Graphics2D biContext = bi.createGraphics();
โปรแกรมเมอร์ที่สร้างกราฟจำเป็นต้องตั้งค่าพารามิเตอร์ WIDTH ตามความสำคัญของกราฟและเค้าโครงโดยรวมของเพจ องค์ประกอบกราฟิกจะปรับขนาดตัวเองโดยอัตโนมัติตามการเปลี่ยนแปลงความกว้างของกราฟิก
จำเป็นต้องคำนวณพื้นที่ความกว้างและขอบเขตของชื่อรวมถึงสี่เหลี่ยมจัตุรัสที่ยาวที่สุดของกราฟิกตามพารามิเตอร์ WIDTH จุดประสงค์คือเพื่อให้แน่ใจว่าองค์ประกอบกราฟิกทั้งหมดไม่เกินความกว้างของกราฟิกและข้ามขอบด้านขวาของกราฟิก
จำนวนรายการข้อมูลที่จำเป็นต้องแสดงจะกำหนดพารามิเตอร์ HEIGHT ของกราฟ หากมีการเพิ่มองค์ประกอบใหม่ลงในอาร์เรย์ datavalues[] และ datanames[] ความสูงของกราฟิกควรเพิ่มขึ้นตามเพื่อรองรับขนาดพื้นที่แสดงผลที่ต้องการ
พารามิเตอร์ สูงสุด จะใช้สำหรับกำลังสองตรงที่ยาวที่สุด จากนั้น ความกว้างของบล็อกสี่เหลี่ยมอื่นๆ จะถูกคำนวณโดยสัมพันธ์กับ ค่าสูงสุด :
int barWidth = (innerWIDTH * currentValue) / สูงสุด;
อัลกอริธึมด้านบนใช้สองค่า สูงสุด และ InnerWIDTH (พื้นที่กราฟิก) ของกราฟิกเพื่อให้แน่ใจว่าสี่เหลี่ยมจะขยายและหดตัวโดยอัตโนมัติเมื่อค่า WIDTH เปลี่ยนแปลง
ในการแสดงกราฟิก เราจำเป็นต้องสร้างภาพพื้นหลังแล้วเพิ่มข้อมูลกราฟิก ขั้นแรก สร้างวัตถุ graphBG และเรียกเมธอด Draw() ของมัน:
graphBG gr = ใหม่ graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "ผลผลิตทางการเกษตร", "ค่าเฉลี่ยโดยรวม: " + ค่าเฉลี่ย);
พารามิเตอร์ของเมธอด Draw() ประกอบด้วยเนื้อหากราฟิก, biContext , WIDTH และ HEIGHT ซึ่งคลาส graphBG ใช้เพื่อกำหนดความกว้างและความสูงของหัวเรื่องและพื้นที่กราฟิก สุดท้าย ค่าข้อมูล เฉลี่ย จะถูกคำนวณและเพิ่มลงในข้อความที่แสดงในชื่อเรื่อง
ตำแหน่งพิกัดแนวตั้ง (แกน y) ของแต่ละบล็อกสี่เหลี่ยมคำนวณตามสูตรต่อไปนี้: y_pos = i * displayHeight + headerOffset displayHeight เท่ากับความสูงของข้อความบนสี่เหลี่ยมจัตุรัสตรงบวกกับความสูงของสี่เหลี่ยมจัตุรัสตรง และ headerOffset แสดงถึงระยะห่างในแนวตั้งจากด้านบนของกราฟิก รวมถึงความสูงของพื้นที่ชื่อเรื่องและเงา
ฉันสร้างสี่เหลี่ยมและเส้นขอบเหล่านี้โดยใช้เทคนิคเดียวกับที่ฉันเคยสร้างเส้นขอบชื่อเรื่องก่อนหน้านี้ ฉันลบหนึ่งพิกเซลออกจากความกว้างและความสูงของเส้นขอบสี่เหลี่ยม เพื่อให้แต่ละสี่เหลี่ยมดูเหมือนมีเส้นขอบสีแดง และทำให้เอฟเฟกต์การลบง่ายขึ้นโดยการวาดเส้นขอบด้านในบนพื้นหลังสีขาว
เราได้สร้างภาพในหน่วยความจำแล้ว ตอนนี้เราเข้ารหัสและแสดงให้ผู้ใช้เห็น เราไม่สามารถใช้เอาต์พุตสตรีม JSP เริ่มต้นเพื่อประมวลผล JPEG ได้ ดังนั้นเราจึงจำเป็นต้องใช้ response.getOutputStream() เพื่อรับสตรีมจากออบเจ็กต์ตอบกลับ เราสามารถใช้เอาต์พุตสตรีมเพื่อสร้างวัตถุ JPEGImageEncoder และเรียกมันว่า encode() โดยส่งผ่านวัตถุ BufferedImage ที่เราสร้างไว้ก่อนหน้านี้:
ตัวเข้ารหัส JPEGImageEncoder = JPEGCodec.createJPEGEncoder (เอาต์พุต);
encoder.encode(bi);
ภาพที่ได้มีขนาดค่อนข้างเล็กโดยมีความจุเพียง 13.7 กิโลไบต์ รูปที่ B ให้ผลสุดท้าย:
รูปที่ B
ไม่ว่าในกรณีใด ผลลัพธ์ของ index.jsp จะเป็นรูปภาพ JPEG คุณสามารถบันทึกลงในเดสก์ท็อปของคุณหรือกดปุ่ม PrintScreen เพื่อจับภาพหน้าจอ หากคุณต้องการแสดงกราฟิกหลายภาพในหน้าเดียวกันหรือแนะนำกราฟิกในเนื้อหาอื่น คุณสามารถใช้แท็ก HTML img (< img src = ”index.jsp"> ) จากนั้นวางกราฟิกเมื่อจำเป็น เช่น ใช้ รูปร่าง.
บางทีหนึ่งในเทคโนโลยีอินเทอร์เน็ตที่เก่าแก่ที่สุดสำหรับกราฟิกที่สร้างขึ้นแบบไดนามิกสามารถทำงาน อื่นนอกเหนือ จากการแสดงรูปภาพได้ ลองนึกภาพว่าคุณต้องบันทึกจำนวนผู้ดูรูปภาพนี้ (คล้ายกับการบันทึกจำนวนการคลิกบนโฆษณา) จากนั้นคุณจะต้องใช้งานต่างๆ เช่น การนับคลิก การเข้าถึงฐานข้อมูลหรือไฟล์ใน index.jsp และคุณสามารถดำเนินการได้ งานเหล่านี้อยู่เบื้องหลัง ไม่จำเป็นต้องใช้หน้าที่บัฟเฟอร์เพื่อสลับไปยังผู้ใช้
ในบทความนี้ เราได้ตรวจวิธีการที่สร้างฮิสโตแกรมที่ดูเรียบร้อยและสวยงาม เราจัดการการเปลี่ยนแปลงขนาดของกราฟิกและเข้ารหัสเป็นรูปแบบ JPEG ด้วยความชำนาญ และหารือเกี่ยวกับการแก้ไขโค้ด HTML เพื่อวางรูปภาพผลลัพธ์ในตำแหน่งต่างๆ บนเพจ