من أجل البدء في تشغيل الأمثلة الواردة في هذه المقالة، تحتاج إلى JDK 1.2 أو أعلى ( http://java.sun.com ). ستحتاج أيضًا إلى خادم ويب يدعم JSP. لقد اختبرت هذا المثال على Tomcat، حيث استخدمت فئة com.sun.image.codec.jpeg (الصادرة في Sun Java 2 SDK) لتشفير بيانات الرسومات.
نظرًا لأنك تريد الحصول على خلفيات قابلة لإعادة الاستخدام، فيجب عليك إنشاء فئة Java لإدارة التخطيط، بما في ذلك منطقة العنوان والحدود الخارجية. كما هو مبين في الشكل أ.
الشكل أ
كما ترون، لقد قمت بتظليل كل من منطقة العنوان والحد الخارجي. يحتوي العنوان على حد أبيض بعرض بكسل واحد، ومنطقة الرسومات لها حد أسود رفيع. تضيف هذه الحدود تعريفًا للظلال.
من السهل إنشاء الحدود. استخدم أسلوب التعبئة () لكائن Graphics2D لملء مستطيل العنوان الأزرق، ثم استخدم أسلوب الرسم () لرسم الحدود بلون آخر.
إنشاء تأثير الظل هو أيضًا أمر بسيط جدًا. أولاً، استخدم طريقة fill() لرسم الظل. ثم ارسم العنوان بإزاحة سبعة بكسلات. تؤدي هذه الإزاحة إلى إنشاء تأثير ثلاثي الأبعاد، مما ينتج عنه تأثير الظل.
لنفترض أن هناك شركة تبيع منتجات زراعية وتحتاج إلى رسم بياني لإظهار المبيعات. في التطبيق العملي، سنحتاج إلى الحصول على هذه البيانات من قاعدة بيانات أو ملف XML، ولكن للتبسيط، لنفترض أن بيانات المبيعات مخزنة في المصفوفتين التاليتين:
String datanames[] = {"apple"، "orange"، "peach"، "lemon"، "grapefruit"}؛
int datavalues[] = {11, 62, 33, 102, 50};
تحتوي المجموعة الأولى على عناصر لمختلف المنتجات الزراعية التي تبيعها الشركة. المصفوفة الثانية هي حجم المبيعات المطابق لكل منتج زراعي.
سيتم عرض الرسم البياني وحفظه بتنسيق JPEG، لذلك نحتاج إلى ضبط MIME، ونوع المحتوى، بشكل صحيح. تستخدم المتصفحات أنواع MIME لتحديد كيفية الرد. التعليمة البرمجية التالية تحدد نوع MIME:
Response.setContentType("image/jpeg");
بعد ذلك، نحتاج إلى كائن يمثل الصورة. تدعم Java 2D API فئة BufferedImage ، التي توفر طريقة لحفظ وإدارة بيانات البكسل في الذاكرة. نريد أن تكون الرسومات ملونة، لذلك نستخدم نوع الرسومات TYPE_INT_RGB . يتم استخدام البيانات الصحيحة WIDTH و HEIGHT لتحديد عرض الصورة وارتفاعها بالبكسل:
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
الآن بعد أن أصبح لدينا كائن BufferedImage، يمكننا ضبط محتويات Graphics2D عن طريق استدعاء الأسلوب createGraphics() الخاص بالكائن:
Graphics2D biContext = bi.createGraphics();
يحتاج المبرمج الذي أنشأ الرسم البياني إلى تعيين معلمة WIDTH بناءً على أهمية الرسم البياني والتخطيط العام للصفحة. تقوم العناصر الرسومية بتغيير حجم نفسها تلقائيًا وفقًا للتغيرات في عرض الرسم.
يجب حساب عرض العنوان والمنطقة المحيطة به، بالإضافة إلى أطول مربع مستقيم في الرسم، استنادًا إلى معلمة WIDTH . والغرض من ذلك هو التأكد من أن جميع العناصر الرسومية لا تتجاوز عرض الرسم وتتجاوز الحد الأيمن للرسم.
يحدد عدد عناصر البيانات التي يجب عرضها معلمة HEIGHT للرسم البياني. إذا تمت إضافة عناصر جديدة إلى صفائف datavalues[] و datanames[] ، فيجب أن يزيد ارتفاع الرسم وفقًا لذلك لاستيعاب حجم مساحة العرض المطلوبة.
يتم استخدام المعلمة القصوى لأطول مربع مستقيم. ثم يتم حساب عرض الكتل المستطيلة الأخرى بالنسبة إلى الحد الأقصى :
int barWidth = (innerWIDTH * القيمة الحالية) / الحد الأقصى؛
تستخدم الخوارزمية أعلاه قيمتي الحد الأقصى والعرض الداخلي (منطقة الرسم) للرسم للتأكد من أن المستطيل سوف يتوسع وينكمش تلقائيًا مع تغير قيمة العرض .
لعرض الرسم، نحتاج إلى إنشاء صورة خلفية ثم إضافة البيانات الرسومية. أولاً، قم بإنشاء كائن graphBG واستدعاء الأسلوب draw() الخاص به:
graphBG gr = new 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 encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);
الصورة الناتجة صغيرة نسبيًا، حيث تشغل 13.7 كيلو بايت فقط من سعتها. الشكل ب يعطي التأثير النهائي:
الشكل ب
في كلتا الحالتين، يكون إخراج ملف Index.jsp عبارة عن صورة JPEG. يمكنك حفظه على سطح المكتب أو الضغط على مفتاح PrintScreen لالتقاط لقطة شاشة. إذا كنت بحاجة إلى عرض رسومات متعددة على نفس الصفحة أو إدخال رسومات في محتوى آخر، فيمكنك استخدام علامة HTML img (< img src = ”index.jsp"> )، ثم وضع الرسومات عند الحاجة، مثل استخدام استمارة.
ربما تكون إحدى أقدم تقنيات الإنترنت للرسومات المولدة ديناميكيًا قادرة على أداء مهام أخرى غير عرض الصورة. تخيل أنك بحاجة إلى تسجيل عدد مشاهدي هذه الصورة (على غرار تسجيل عدد النقرات على الإعلان)، فأنت بحاجة إلى تنفيذ مهام مثل حساب النقرات أو قاعدة البيانات أو الوصول إلى الملفات في ملف Index.jsp ، ويمكنك المعالجة ليست هناك حاجة لاستخدام هذه المهام في الخلفية لاستخدام تبديل الصفحة المخزنة إلى المستخدم.
في هذه الورقة قمنا بفحص الطريقة التي تنتج رسومًا بيانية أنيقة وممتعة المظهر. لقد تعاملنا بمهارة مع تغيير حجم الرسومات وترميزها إلى تنسيق JPEG، وناقشنا تعديل كود HTML لوضع الصور الناتجة في مواقع مختلفة على الصفحة.