أهلا بكم

هذا المقال سنتعلم سويا كيفية التعامل مع الصور فى تطبيقات JavaFX ، وكيفية عرض الصورة في نافذة تطبيقك وكيفية تغيير وحدات البكسل الخاصة بالصورة.


الخطوة الاولى : إستخدام الفئة Image لتحميل الصورة الى تطبيقك 

يتوفر JavaFX في الحزمة javafx.scene.image الفئة Image لقراءة وتحميل الصور الى تطبيقك وتدعم الكثير من تنسيقات الصور مثل Bmp و Gif و Jpeg و Png.

وتستخدم في تحميل الصور أما من عنوان URL محدد.أو من تدفق الكائن InputStream وذلك على النحو التالى :

أولا : إنشاء صورة من عنوان URL محدد .

الكود:

public Image(String url,
             double requestedWidth,
             double requestedHeight,
             boolean preserveRatio,
             boolean smooth,
             boolean backgroundLoading)

حيث أن :

1. url :  السلسلة التي تمثل عنوان URL المراد استخدامه في جلب بيانات البكسل 
   
2. requestWidth - عرض مربع الصورة المحيط
   
3. requiredHeight - ارتفاع المربع المحيط للصورة
   
4. preserveRatio - يشير إلى ما إذا كان سيتم الحفاظ على نسبة العرض إلى الارتفاع للصورة الأصلية عند تغيير الحجم لملاءمة الصورة داخل المربع المحيط المحدد
   
5. smooth : تشير إلى ما إذا كنت ستحافظ على جودة الصورة اثناء تغير حجمها ام لا 
   
6. backgroundLoading - يشير إلى ما إذا كان يتم تحميل الصورة في الخلفية
   

مثال : تحميل صورة من عنوان url مع تعديل حجمها الى 100*150 بيكسل بدون الحفاظ على نسبة عرضها للارتفاع الاصلي وعدم الحفاظ على جودتها الاصلية

الكود:

Image image3 = new Image("http://sample.com/res/flower.png", 100, 150, false, false);

مثال : تحميل صورة من مجلد التطبيق classpath ...إذا لم تكن السلسلة التي تم تمريرها عنوان URL صالحًا ، ولكن مسارًا بدلاً من ذلك ، فسيتم البحث عن الصورة في classpath في هذه الحالة على النحو التالى 

الكود:

Image image1 = new Image("/flower.png"
);

مثال : تحميل الصورة من حزمة معينة ....توجد الصورة في حزمة my.res من مسار classpath

الكود:

Image image2 = new Image("my/res/flower.png");

مثال :تحميل الصورة من مجلد العمل الحالى

الكود:

Image image4 = new Image("file:flower.png");

ثانيا : إنشاء صورة مع المحتوى الذي تم تحميله من تدفق الإدخال المحدد....ثم تمرير التدفق الى كائن Image

الكود:

Image(InputStream is)

مثال :تحميل صورة من مسار محدد باستخدام طريقة التدفق InputStream ثم تمرير التدفق الى كائن الصورة 

الكود:


FileInputStream inputstream = new FileInputStream("C:\\images\\image.jpg");
Image image = new Image(inputstream);

الخطوة الثانية : إستخدام الفئة ImageView لعرض الصورة على ناذة تطبيقك

بعد أن قمنا بتحميل الصورة من خلال الفئة Image باى طريقة كما اوضحنا اعلاه ، يمكنك عرض الصورة على ناقذة تطبيقك عن طريق إنشاء فئة ImageView وتمرير الصورة إلى منشئها كما يلي -

الكود:

ImageView imageView = new ImageView(image);

مثال كامل :

الكود:


import java.io.FileInputStream;
import java.io.FileNotFoundException;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;  
import javafx.stage.Stage;  

public class ImageExample extends Application {  
   @Override
   public void start(Stage stage) throws FileNotFoundException {        
      //Creating an image
      Image image = new Image(new FileInputStream("path of the image"));  
      
      //Setting the image view
      ImageView imageView = new ImageView(image);
      
      //Setting the position of the image
      imageView.setX(50);
      imageView.setY(25);
      
      //setting the fit height and width of the image view
      imageView.setFitHeight(455);
      imageView.setFitWidth(500);
      
      //Setting the preserve ratio of the image view
      imageView.setPreserveRatio(true);  
      
      //Creating a Group object  
      Group root = new Group(imageView);  
      
      //Creating a scene object
      Scene scene = new Scene(root, 600, 500);  
      
      //Setting title to the Stage
      stage.setTitle("Loading an image");  
      
      //Adding scene to the stage
      stage.setScene(scene);
      
      //Displaying the contents of the stage
      stage.show();
   }  
   public static void main(String args[]) {
      launch(args);
   }
}

النتيجة على النحو التالى :

قرءة وحدات البيكسل و التعديل على الصور 


يوفر JavaFX فئة تسمي PixelReader و اخرى تسمي PixelWriter لقراءة وحدات البكسل الخاصة بالصورة وكتابتها. يتم استخدام فئة WritableImage لإنشاء صورة قابلة للكتابة.

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

الكود:


import java.io.FileInputStream;
import java.io.FileNotFoundException;  
import javafx.application.Application;

import javafx.scene.Group;  
import javafx.scene.Scene;

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.PixelReader;
import javafx.scene.image.PixelWriter;
import javafx.scene.image.WritableImage;
 
import javafx.scene.paint.Color;
import javafx.stage.Stage;  

public class WritingPixelsExample extends Application {  
   @Override
   public void start(Stage stage) throws FileNotFoundException {        
      //Creating an image
      Image image = new Image(new FileInputStream("C:\\images\\logo.jpg"));
      int width = (int)image.getWidth();
      int height = (int)image.getHeight();
        
      //Creating a writable image
      WritableImage wImage = new WritableImage(width, height);
        
      //Reading color from the loaded image
      PixelReader pixelReader = image.getPixelReader();
      
      //getting the pixel writer
      PixelWriter writer = wImage.getPixelWriter();          
      
      //Reading the color of the image
      for(int y = 0; y < height; y++) {
         for(int x = 0; x < width; x++) {
            //Retrieving the color of the pixel of the loaded image  
            Color color = pixelReader.getColor(x, y);
              
            //Setting the color to the writable image
            writer.setColor(x, y, color.darker());              
         }
      }   
      //Setting the view for the writable image
      ImageView imageView = new ImageView(wImage);
              
      //Creating a Group object  
      Group root = new Group(imageView);  
            
      //Creating a scene object
      Scene scene = new Scene(root, 600, 500);  
            
      //Setting title to the Stage
      stage.setTitle("Writing pixels ");  
            
      //Adding scene to the stage
      stage.setScene(scene);  
            
      //Displaying the contents of the stage
      stage.show();  
   }
   public static void main(String args[]) {
      launch(args);
   }
}

النتيجة