السابقالفهرسالتالي

الملحق A

الرسوميات في Java

 

A.1 الرسوميات ثنائية الأبعاد

يقدم هذا الملحق أمثلة وتمارين تشرح الرسم في Java. توجد عدة طرق لإنشاء الرسوم في Java؛ أبسطها استخدام java.awt.Graphics. إليك مثالاً كاملاً:

import java.awt.Canvas;
import java.awt.Graphics;
import javax.swing.JFrame;
public class MyCanvas extends Canvas {
   public static void main(String[] args) {
      // make the frame
      JFrame frame = new JFrame();
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      // add the canvas
      Canvas canvas = new MyCanvas();
      canvas.setSize(400, 400);
      frame.getContentPane().add(canvas);
      // show the frame
      frame.pack();
      frame.setVisible(true);
   }
   public void paint(Graphics g) {
      // draw a circle
      g.fillOval(100, 100, 200, 200);
   }
}
يمكنك تنزيل هذه الشفرة من http://thinklikecs.webs.com/resources/code/MyCanvas.java.

تستورد الأسطر الأولى الأصناف التي نحتاجها من java.awt وjava.swing.

MyCanvas extends Canvas، تعني أن كائن MyCanvas هو من نوع Canvas ويحتوي على عمليات لرسم كائنات رسومية. في main:

  1. أنشأنا JFrame، وهي نافذة تقدر على احتواء الصورة، والأزرار، والقوائم ومكونات النوافذ الأخرى؛
  2. أنشأنا MyCanvas، وضبطنا العرض والارتفاع، وأضفناها إلى الإطار؛ و
  3. عرضنا الإطار على الشاشة.
paint هي عملية خاصة يتم استدعاؤها عندما تلزم الحاجة لرسم MyCanvas. إذا شغلت هذه الشفرة، يجب أن ترى دائرة سوداء على أرضية رمادية.

A.2 عمليات Graphics

حتى ترسم فوق حقل الصورة، عليك استدعاء عمليات على كائن الرسوميات. المثال السابق يستعمل fillOval. من العمليات الأخرى drawLine، وdrawRect وغيرها. يمكنك قراءة وثائق هذه العمليات على http://download.oracle.com/javase/6/docs/api/java/awt/Graphics.html.

ها هو نموذج fillOval الأولي:

public void fillOval(int x, int y, int width, int height)
تحدد المعاملات صندوقاً مؤطراً (bounding box)، وهو مستطيل يتم رسم الشكل البيضوي داخله (مبين في الشكل). لن يتم رسم الصندوق المؤطر نفسه.

يحدد x وy موقع زاوية الصندوق المؤطر اليسرى العليا في نظام الإحداثيات الرسومية (Graphics coordinates system).

A.3 الإحداثيات

على الأغلب أنك تعرف الإحداثيات الديكارتية ثنائية البعد، حيث يعرف كل موقع بإحداثي x (البعد على طول المحور x عن المبدأ) وإحداثي y. اصطلاحاً، تتزايد الإحداثيات الديكارتية إلى اليمين والأعلى، كما هو مبين في الشكل.

وقد تم الاصطلاح على أن يستخدم نظام رسوميات الحواسيب نظام إحداثيات يكون فيه المبدأ في الزاوية اليسرى العليا، ويكون الاتجاه الموجب لمحور التراتيب (محور y) نحو الأسفل. تتبع Java هذا الاصطلاح.

واحدة قياس الإحداثيات هي البكسل (pixel)؛ كل بكسل يمثل نقطة على الشاشة. الشاشة النموذجية تكون بعرض 1000 بكسل تقريباً. تكون الإحداثيات أعداداً صحيحة دوماً. إذا أردت استعمال قيمة عشرية كإحداثي، فعليك تقريبها للتخلص من الفاصلة (انظر القسم 3.2).

A.4 الألوان

لاختيار لون شكل، استدعي العملية setColor على الكائن الرسومي:

g.setColor(Color.red);
تغير setColor اللون الحالي؛ كل شيء يتم رسمه يكون باللون الحالي.

Color.red هي قيمة يقدمها صنف Color؛ لاستخدامها عليك استيراد java.awt.Color. من الألوان الأخرى:

black 		blue 		cyan 		darkGray 	gray 		lightGray
magenta 	orange		pink 		red 		white 		yellow
يمكنك إنشاء ألوان أخرى بتحديد قيم المزج للألوان الثلاثة الأساسية، الأحمر والأخضر والأزرق (RGB). انظر http://download.oracle.com/javase/6/docs/api/java/awt/Color.html.

يمكنك التحكم بلون أرضية حقل الصورة (canvas) باستدعاء Canvas.setBackground.

تمرين A.1

ارسم علم اليابان، دائرة حمراء على أرضية بيضاء عرضها أكبر من ارتفاعها.

A.5 ميكي ماوس

لنقل أننا نريد رسم صورة ميكي ماوس. يمكننا استعمال الشكل البيضوي الذي رسمناه منذ قليل كوجه، ثم نضيف الأذنان. لجعل قراءة الشفرة أسهل، دعنا نستخدم المستطيلات كصناديق تأطير.

ها هي العملية التي تأخذ مستطيلاً وتستدعي fillOval.

public void boxOval(Graphics g, Rectangle bb) {
   g.fillOval(bb.x, bb.y, bb.width, bb.height);
}
وها هي العملية التي ترسم ميكي:
public void mickey(Graphics g, Rectangle bb) {
   boxOval(g, bb);
   int dx = bb.width/2;
   int dy = bb.height/2;
   Rectangle half = new Rectangle(bb.x, bb.y, dx, dy);
   half.translate(-dx/2, -dx/2);
   boxOval(g, half);
   half.translate(dx*2, 0);
   boxOval(g, half);
}
يرسم السطر الأول الوجه. تنشئ الأسطر الثلاثة التالية مستطيلاً أصغر للأذنان. نقلنا المستطيل إلى الأعلى واليسار للأذن الأولى، ثم إلى اليمين للأذن الثانية.

تبدو النتيجة كما يلي:

يمكنك تنزيل هذه الشفرة من http://thinklikecs.webs.com/resources/code/Mickey.java.

تمرين A.2

عدل Mickey.java لترسم أذنان على الأذنان، وأذنان على تلك الأذنان، ومزيد من الآذان حتى تصبح أصغر أذن بقياس 3 بكسل عرضاً فقط.

يجب أن تبدو النتيجة مثل ميكي موظ:

مساعدة: ستحتاج لإضافة أو لتعديل بضعة أسطر فقط من الشفرة.

يمكنك تنزيل الحل من http://thinklikecs.webs.com/code/MickeySoln.java.

تمرين A.3

  1. نزل http://thinklikecs.webs.com/code/Moire.java واستوردها إلى بيئة البرمجة عندك.
  2. اقرأ عملية paint وارسم على ورقة ما تتوقع منها أن تفعل. الآن شغلها. هل حصلت على ما توقعت؟ لشرح ما يحصل، انظر http://en.wikipedia.org/wiki/Moire_pattern.
  3. عدل البرنامج بحيث تكون المسافة بين الدوائر أكبر أو أصغر. انظر ماذا سيحدث للصورة.
  4. عدل البرنامج بحيث ترسم الدوائر متمركزة في مركز الشاشة، كما في الشكل التالي (على اليسار). يجب أن تكون المسافة بين الدوائر صغيرة بما يكفي حتى يتضح التداخل المتموج.

    اكتب عملية باسم radial ترسم مجموعة من القطع المستقيمة شعاعياً كما هو مبين في الشكل (على اليمين)، لكن يجب أن تكون قريبة من بعضها بما يكفي لإنشاء نموذج متموج.
  5. يمكن لأي نموذج رسومي تقريباً أن يولد نموذج تداخل مشابه لنموذج التموج. تلاعب بالبرنامج وانظر إلى ما يمكنك عمله.
السابقالفهرسالتالي