تعلم JavaFx ..مقال31_ التعامل مع المؤثرات البصرية JavaFX - Effects

إرسال مساهمة في موضوع

اذهب الى الأسفل

تعلم JavaFx ..مقال31_ التعامل مع المؤثرات البصرية JavaFX - Effects

مُساهمة من طرف زهراء في الثلاثاء أكتوبر 23, 2018 9:12 am

اهلا بكم

التأثيرات هي في الأساس إجراءات يمكنها تحسين مظهر الرسومات.حيث يوفر JavaFX الحزمة المسماة javafx.scene.effect التي تحتوي على فئات مختلفة يمكن استخدامها لتطبيق التأثيرات على مكونات رسومات واجهة المستخدم مثل الصور والأشكال ...الخ ....فى هذا المقال سوف نتطرق لتك الفئات و كيفية استخدامها على الرسومات و الصور

كيفية تطبيق التأثيرات على الصور و الاشكال :

بشكل عام توجد عدة خطوات لتطبيق الثاثيرات التى توفرها حزمة  javafx.scene.effect  عن طريق الخطوات الموضحه ادناه :

1_ قم بإنشاء الرسم أو الشكل أو الصورة المراد تطبيق تأثير عليها
2_استحضار الطبقة المعنية من التأثير المطلوب لتطبيقه.
3_اضبط خصائص التأثير.
4_تتطبيق التأثير على الشكل باستخدام طريقة setEffect ().

فئات التاثيرات التى توفرها الحزمة JavaFX - Effects

1_الفئة Color Adjust

الطبقة المسمى ColorAdjust من الحزمة javafx.scene.effect تضع تأثير ضبط اللون للصور عن طريق ضبط الخصائص مثل الصبغة والتشبع والسطوع والتباين في لون الصورة.

هذه الطبقة تحتوي على خمس خصائص لفعل ذلك وهي -


  • input : قيمة المدخلات للتأثير
  • brightness : هذه الخاصية هي من نوع  Double وهي تمثل قيمة تعديل السطوع لهذا التأثير
  • contrast : هذه الخاصية من نوع Double وهي تمثل قيمة ضبط التباين لهذا التأثير
  • hue : هذه الخاصية من نوع Double وهي تمثل قيمة تعديل الصبغة  لهذا التأثير.
  • saturation :هذه الخاصية هي من نوع Double وهي تمثل قيمة ضبط التشبع لهذا التأثير.


و اليكم المثال على إظهار تأثير ضبط اللون. هنا ، نقوم بتضمين صورة (Tutorialspoint Logo) في مشهد JavaFX باستخدام فئات Image و ImageView. ويتم ذلك في الموضع 100 و 70 وبارتفاع مناسب وعرض مناسب من 200 و 400 على التوالي.


نقوم بتعديل لون هذه الصورة باستخدام تأثير ضبط اللون. مع التباين ، درجة اللون والسطوع والتشبع مثل 0.4. -0.05 و 0.9 و 0.8.

الشفرة على النحو التالى :
الكود:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
        
public class ColorAdjustEffectExample extends Application {  
   @Override
   public void start(Stage stage) {      
      //Creating an image
      Image image = new Image("http://www.tutorialspoint.com/green/images/logo.png");
      
      //Setting the image view
      ImageView imageView = new ImageView(image);
      
      //Setting the position of the image
      imageView.setX(100);  
      imageView.setY(70);
      
      //setting the fit height and width of the image view
      imageView.setFitHeight(200);
      imageView.setFitWidth(400);
      
      //Setting the preserve ratio of the image view
      imageView.setPreserveRatio(true);
    
      //Instantiating the ColorAdjust class
      ColorAdjust colorAdjust = new ColorAdjust();
      
      //Setting the contrast value
      colorAdjust.setContrast(0.4);    
      
      //Setting the hue value
      colorAdjust.setHue(-0.05);    
      
      //Setting the brightness value
      colorAdjust.setBrightness(0.9);  
      
      //Setting the saturation value
      colorAdjust.setSaturation(0.8);  
      
      //Applying coloradjust effect to the ImageView node
      imageView.setEffect(colorAdjust);    
        
      //Creating a Group object  
      Group root = new Group(imageView);  
              
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Coloradjust effect example");
      
      //Adding scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of the stage
      stage.show();        
   }
   public static void main(String args[]){
      launch(args);
   }
}      

الصورة بعد التاثيرات عليها



2_الفئة Bloom

يستخدم تأثير Bloom لتوهج وحدات البكسل لبعض أجزاء الشكل أو الرسم. ويمثلها الطبقة javafx.scene.effect.Bloom. تحتوي هذه الفئة على خصائص متنوعة يمكن ضبطها على قيم معينة لتطبيق التأثيرات المناسبة....وهي على النحو التالى :


  • input : هذه الخاصية هي من نوع التأثير. يتم استخدامه لتوفير مدخلات لتأثير توهج. setInput (قيمة التأثير)
  • threshold : هذه الخاصية من النوع  Double تمثل قيمة التوهج أو اللمعان للشكل وتكون بالبكسل.


مثال كامل يوضح كيفية الاستخدام

الكود:
import javafx.application.Application;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.effect.Bloom;  
import javafx.scene.paint.Color;  
import javafx.scene.shape.Rectangle;  
import javafx.scene.text.Font;  
import javafx.scene.text.FontPosture;  
import javafx.scene.text.FontWeight;  
import javafx.scene.text.Text;  
import javafx.stage.Stage;  
public class BloomEffect extends Application{  
public static void main(String[] args) {  
    launch(args);  
}  
  
@Override  
public void start(Stage primaryStage) throws Exception {  
    // TODO Auto-generated method stub  
    Rectangle rect1= new Rectangle(60,50,150,200);  
    Rectangle rect2 = new Rectangle(325,50,150,200);  
    rect1.setFill(Color.GREEN);  
    rect1.setStroke(Color.BLACK);  
    rect1.setStrokeWidth(5);  
    rect2.setFill(Color.GREEN);  
    rect2.setStroke(Color.BLACK);  
    rect2.setStrokeWidth(5);  
    Text text1 = new Text();  
    Text text2 = new Text();  
    text1.setText("Effected shape");  
    text2.setText("Original shape");  
    text1.setX(65);  
    text1.setY(300);  
    text2.setX(335);  
    text2.setY(300);  
    text1.setFont(Font.font("Courier 10 Pitch",FontWeight.BOLD,FontPosture.REGULAR,16));  
    text2.setFont(Font.font("Courier 10 Pitch",FontWeight.BOLD,FontPosture.REGULAR,16));  
    text1.setFill(Color.RED);  
    text2.setFill(Color.RED);  
    text1.setStroke(Color.BLACK);  
    text2.setStroke(Color.BLACK);  
    text1.setStrokeWidth(0.2);  
    text2.setStrokeWidth(0.2);  
    Bloom bloom = new Bloom();  
    bloom.setThreshold(0.1);  
    rect1.setEffect(bloom);  
    Group root = new Group();  
    root.getChildren().addAll(rect1,rect2,text1,text2);  
    Scene scene = new Scene(root,600,350);  
    primaryStage.setScene(scene);  
    primaryStage.setTitle("Bloom Effect Example");  
    primaryStage.show();  
      
    }  
}  

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


3_الفئة Glow


مثل تأثير Bloom ، يُستخدم تأثير Glow أيضًا لتوهج وحدات البكسل في الصورة. ومع ذلك ، فإنه يجعل الصورة أكثر إشراقا. يمثل class javafx.scene.effect.Glow تأثير Glow. يحتوي الفصل على خصائص متنوعة يمكن ضبطها على قيم معينة لتطبيق التأثير المناسب.

الخصائص :

  • input : هذه الخاصية هي من نوع التأثير. يتم استخدامه لتوفير مدخلات لتأثير توهج. setInput (قيمة التأثير)
  • level : هذه الخاصية من النوع Double انها تمثل شدة الوهج. نطاق قيمة المستوى هو 0.0 إلى 1.0.


مثال :
الكود:
import javafx.application.Application;  
import javafx.stage.Stage;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.effect.Glow;  
import javafx.scene.image.Image;  
import javafx.scene.image.ImageView;  
import javafx.scene.paint.Color;  
import javafx.scene.text.Font;  
import javafx.scene.text.FontPosture;  
import javafx.scene.text.FontWeight;  
import javafx.scene.text.Text;  
public class GlowEffect extends Application{  
  
    @Override  
    public void start(Stage primaryStage) throws Exception {  
        // TODO Auto-generated method stub  
        Image img1 = new Image("https://www.javatpoint.com/linux/images/linux-first.png");  
        Image img2 = new Image("https://www.javatpoint.com/linux/images/linux-first.png");  
          
        ImageView imgview1 = new ImageView(img1);  
        ImageView imgview2 = new ImageView(img2);  
        Text text1 = new Text();  
        Text text2 = new Text();  
        text1.setText("Glowing with level 10");  
        text2.setText("Not Glowing");  
        text1.setX(60);  
        text1.setY(300);  
        text2.setX(325);  
        text2.setY(300);  
        text1.setFont(Font.font("Courier 10 Pitch",FontWeight.BOLD,FontPosture.REGULAR,16));  
        text2.setFont(Font.font("Courier 10 Pitch",FontWeight.BOLD,FontPosture.REGULAR,16));  
        text1.setFill(Color.RED);  
        text2.setFill(Color.RED);  
        text1.setStroke(Color.BLACK);  
        text2.setStroke(Color.BLACK);  
        imgview1.setX(70);  
        imgview1.setY(90);  
        imgview2.setX(300);  
        imgview2.setY(90);  
        Glow glow = new Glow();  
        glow.setLevel(10);  
        imgview1.setEffect(glow);  
        Group root = new Group();  
        root.getChildren().addAll(imgview1,imgview2,text1,text2);  
        Scene scene = new Scene(root,500,350);  
        primaryStage.setScene(scene);  
        primaryStage.setTitle("Glow Effect Example");  
        primaryStage.show();      
          
    }  
    public static void main(String[] args) {  
        launch(args);  
          
    }  
}  


النتيجة 


4_الفئة BoxBlur

بشكل عام ، يعني Blur أن يصبح الشكل غير واضح و بالتالى فان Box Blur هو نوع من تأثير التمويه و التعتيم  بمعني أن يجعل الصورة غير واضحة ...الفئة المسمى BoxBlur من الحزمة javafx.scene.effect تمثل التأثير BoxBlur ، هذه الفئة تحتوي على أربع خصائص ، والتي هي -


  • height : هذه خاصية من نوع double يمثل ارتفاع تأثير التمويه. setHeight
  • width : هذا خاصية من نوع double يمثل عرض تأثير التمويه. setWidth
  • input  : هذه الخاصية هي من نوع التأثير. هذا يمثل مدخلات التأثير. setInput
  • iterations : وهو يمثل عدد مرات تكرار تأثير التمويه. هذا هو نوع integer


و اليكم المثال بالكامل للتوضيح

الكود:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.BoxBlur;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
        
public class BoxBlurEffectExample extends Application {
   @Override
   public void start(Stage stage) {      
      //Creating a Text object
      Text text = new Text();
      
      //Setting font to the text
      text.setFont(Font.font(null, FontWeight.BOLD, 40));
      
      //setting the position of the text
      text.setX(60);
      text.setY(150);        
      
      //Setting the text to be added.
      text.setText("Welcome to Tutorialspoint");      
      
      //Setting the color of the text
      text.setFill(Color.DARKSEAGREEN);
      
      //Instantiating the BoxBlur class
      BoxBlur boxblur = new BoxBlur();      
      
      //Setting the width of the box filter
      boxblur.setWidth(8.0f);  
      
      //Setting the height of the box filter
      boxblur.setHeight(3.0f);
      
      //Setting the no of iterations  
      boxblur.setIterations(3);      
              
      //Applying BoxBlur effect to the text
      text.setEffect(boxblur);          
        
      //Creating a Group object  
      Group root = new Group(text);  
              
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Sample Application");
        
      //Adding scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of the stage
      stage.show();        
   }
   public static void main(String args[]){
      launch(args);
   }
}      



avatar
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 336
النقاط : 556
التقيم : 38
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم JavaFx ..مقال31_ التعامل مع المؤثرات البصرية JavaFX - Effects

مُساهمة من طرف زهراء في الثلاثاء أكتوبر 23, 2018 1:17 pm

5_الفئة Reflection

يتيح لنا JavaFX لنا توليد تأثير الانعكاس على أي شكل او صورة . يضيف تأثير الانعكاس أساسًا انعكاس الشكل إلى قاعها....الفئة المسمى Reflection من الحزمة javafx.scene.effect تمثل التأثير ، هذه الفئة تحتوي على أربع خصائص ، والتي هي -


  • bottomOpacity : خاصية نوع double. وهو يمثل عتامة الانعكاس في أقصى الحدود القصوى
  • fraction : خاصية double. وهي تمثل جزء الإدخال الذي يتم عرضه في الانعكاس.
  • topOffset :خاصية مزدوجة.double وهو يمثل المسافة بين أعلى وأسفل الانعكاس.
  • topOpacity :وهو يمثل عتامة الانعكاس في أعلى المدخلات.


و المثال الكامل على النحو التالى :

الكود:
import javafx.application.Application;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.effect.Reflection;  
import javafx.scene.text.Font;  
import javafx.scene.text.FontPosture;  
import javafx.scene.text.FontWeight;  
import javafx.scene.text.Text;  
import javafx.stage.Stage;  
public class ReflectionExample extends Application{  
  
    @Override  
    public void start(Stage primaryStage) throws Exception {  
        // TODO Auto-generated method stub  
        Text text = new Text();  
        text.setFont(Font.font("calibri",FontWeight.BLACK,FontPosture.REGULAR,20));  
        text.setText("Welcome to JavaTPoint");  
        text.setX(90);  
        text.setY(90);  
        Reflection ref = new Reflection();  
        ref.setBottomOpacity(0.2);  
        ref.setFraction(12);  
        ref.setTopOffset(10);  
        ref.setTopOpacity(0.2);  
        text.setEffect(ref);  
        Group root = new Group();  
        Scene scene = new Scene(root,400,300);  
        root.getChildren().add(text);  
        primaryStage.setScene(scene);  
        primaryStage.setTitle("Reflection Example");  
        primaryStage.show();  
    }  
    public static void main(String[] args) {  
        launch(args);  
    }  
}  

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

avatar
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 336
النقاط : 556
التقيم : 38
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم JavaFx ..مقال31_ التعامل مع المؤثرات البصرية JavaFX - Effects

مُساهمة من طرف زهراء في الثلاثاء أكتوبر 23, 2018 1:30 pm

6_الفئة Shadow


كما يوحي اسمها ، يخلق هذا التأثير ظل العقدة من خلال تكرار العقدة وجعل حوافها غير واضحة. الفئة المسمى avafx.scene.effect.Shadow يمثل تأثير الظل.ولها الخصائص التالية :


  • blurType : هذه خاصية نوع طمس. هذا يمثل الخوارزمية المستخدمة لطمس الظل.
  • color :هذا هو خاصية نوع اللون. إنه يمثل لون الظل
  • height :وهو يمثل الحجم الرأسي لطمس الظل..
  • radius :يمثل نصف قطر الظل
  • width : وهو يمثل الحجم الأفقي لطمس الظل.


و المثال الكامل على النحو التالى :

الكود:
import javafx.application.Application;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.effect.BlurType;  
import javafx.scene.effect.Shadow;  
import javafx.scene.image.Image;  
import javafx.scene.image.ImageView;  
import javafx.scene.paint.Color;  
import javafx.stage.Stage;  
public class ShadowExample extends Application{  
  
    @Override  
    public void start(Stage primaryStage) throws Exception {  
        // TODO Auto-generated method stub  
        Image img = new Image("https://www.javatpoint.com/images/logo/jtp_logo.png");  
        ImageView imgview = new ImageView(img);  
        imgview.setFitHeight(100);  
        imgview.setFitWidth(350);  
        imgview.setX(100);  
        imgview.setY(100);  
        Shadow shadow = new Shadow();  
        shadow.setBlurType(BlurType.GAUSSIAN);  
        shadow.setColor(Color.BLACK);  
        shadow.setHeight(30);  
        shadow.setRadius(12);  
        shadow.setWidth(20);  
        imgview.setEffect(shadow);  
        Group root = new Group();  
        root.getChildren().add(imgview);  
        Scene scene = new Scene(root,600,350);  
        primaryStage.setScene(scene);  
        primaryStage.setTitle("Shadow Effect Example");  
        primaryStage.show();      
    }  
public static void main(String[] args) {  
    launch(args);  
}  
  
}  

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



avatar
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 336
النقاط : 556
التقيم : 38
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى