تعلم JavaFx ..مقال 28_ التعامل مع الرسوم ثنائية الابعاد JavaFX 2D Shapes

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

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

تعلم JavaFx ..مقال 28_ التعامل مع الرسوم ثنائية الابعاد JavaFX 2D Shapes

مُساهمة من طرف زهراء في السبت أكتوبر 20, 2018 4:45 pm

أهلا بكم

الرسم ثنائي الأبعاد هو الشكل الهندسي الذي يمكن رسمه على نظام الإحداثيات الذي يتكون من X & Y ، بما في ذلك الخط والمستطيل والدائرة وما إلى ذلك...

توفر المكتبة JavaFX العديد من الاشكال ثنائية الأبعاد مثل الخط ، المستطيل ، الدائرة ، المضلع ، المنحنى المكعب ، المنحنى الرباعي ، القوس ، إلخ. وذلك من خلال الفئة javafx.scene.shape.Shape التى تعتبر الطبقة الأساسية لجميع فئات الأشكال .


و بشكل عام لانشاء اى شكل ثنائى الابعاد فى تطبيقات الجافا بالخطوات التالية :

1_ إستيراد المكتبة shape و التى تحتوي على كافة الاشكال ثنائية الابعاد
2_ انشاء كائن جديد من الشكل على الهندسي
3_ ضبط خصائص الشكل
4_إضافة الشكل الهندسي للنافذة

وسوف نقوم بالشرح بالامثلة لكافة الأشكال المختلفة (الفئات) التي توفرها JavaFX....على النحو التالى :

1_ الخط JavaFX Line


بشكل عام ، يمكن تعريف الخط على أنه البنية الهندسية التي تربط نقطتين (X1 و Y1) و (X2 و Y2) في مستوى إحداثيات X & Y. يتيح JavaFX للمطورين إنشاء الخط على واجهة المستخدم الرسومية لتطبيق JavaFX....حيث توفر المكتبة JavaFX الفئة Line الذي هو جزء من الحزمة javafx.scene.shape .

كيف تصنع خط؟

اتبع التعليمات التالية لإنشاء خط.

_ إستيراد مكتبة الرسوم ثنائية الابعاد shape و تحديد الفئة Line

الكود:
import javafx.scene.shape.Line;  

_ إنشاء كائن جديد من الكلاس Line يمثل الخط الهندسي الذى سيتم إضافتة للنافذة

الكود:
Line line = new Line();

_ ضبط خصائص الشكل الهندسي و فئة الخط تحتوي على خصائص مختلفة الموضحة أدناه.


  • startX : نقطة البداية للاحداثي السيني 



  • startY : نقطة البداية للاحداثي الصادي 



  • endX : نقطة النهاية للاحداثي السيني 



  • endY : نقطة النهاية للاحداث الصادي


تحتاج إلى تمرير القيم إلى هذه الخصائص ، إما عن طريق تمريرها إلى منشئ هذه الفئة ، في نفس الترتيب ، أو تمريرها في وقت إنشاء مثيل ، على النحو التالي -

الكود:
Line line = new Line(startX, startY, endX, endY);

أو بإستخدام أساليب التعيين كل منها على النحو التالي -

الكود:
setStartX(value);
setStartY(value);
setEndX(value);
setEndY(value);

ونحن فى مثالنا هذا سنكتبه على النحو التالى :

الكود:
line.setStartX(100.0);
line.setStartY(150.0);
line.setEndX(500.0);
line.setEndY(150.0);

_ إضافة الشكل الهندسي "الخط " الى النافذة

واليك المثال بالكامل لانشاء خط ثنائى الابعاد على النحو التالى :

الكود:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.stage.Stage;  

public class DrawingLine extends Application{
   @Override
   public void start(Stage stage) {
      //Creating a line object
      Line line = new Line();
        
      //Setting the properties to a line
      line.setStartX(100.0);
      line.setStartY(150.0);
      line.setEndX(500.0);
      line.setEndY(150.0);
        
      //Creating a Group
      Group root = new Group(line);
        
      //Creating a Scene
      Scene scene = new Scene(root, 600, 300);
        
      //Setting title to the scene
      stage.setTitle("Sample application");
        
      //Adding the scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of a scene
      stage.show();
   }      
   public static void main(String args[]){
      launch(args);
   }
}      


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


2_ المستطيل  Rectangle

بشكل عام ، المستطيل عبارة عن مضلع ذو أربعة جوانب يحتوي على زوجين من الجوانب المتوازية والمتزامنة مع جميع الزوايا الداخلية كزوايا قائمة.


في JavaFX ، يتم تمثيل المستطيل بفئة تسمى Rectangle . تنتمي هذه الفئة إلى الحزمة javafx.scene.shape .


كيف تصنع مستطيل

اتبع التعليمات التالية لإنشاء مستطيل :

_ إستيراد مكتبة الرسوم ثنائية الابعاد shape و تحديد الفئة Rectangle

الكود:
import javafx.scene.shape.Rectangle;  

_ إنشاء كائن جديد من الكلاس Rectangle يمثل المستطيل الذى سيتم إضافتة للنافذة

الكود:
Rectangle rectangle = new Rectangle();

_ ضبط خصائص الشكل الهندسي و فئة الخط تحتوي على خصائص مختلفة الموضحة أدناه.


  • X - إحداثي x لنقطة البدء (أعلى اليسار) للمستطيل.



  • Y - إحداثي y لنقطة البدء (أعلى اليسار) للمستطيل.



  • Width - عرض المستطيل.



  • height - ارتفاع المستطيل.


الكود:
rectangle.setX(150.0f);
      rectangle.setY(75.0f);
      rectangle.setWidth(300.0f);
      rectangle.setHeight(150.0f);


واليك المثال بالكامل لانشاء مستطيل ثنائى الابعاد على النحو التالى :

الكود:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;

public class RectangleExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Rectangle
      Rectangle rectangle = new Rectangle();  
      
      //Setting the properties of the rectangle
      rectangle.setX(150.0f);
      rectangle.setY(75.0f);
      rectangle.setWidth(300.0f);
      rectangle.setHeight(150.0f);      
        
      //Creating a Group object  
      Group root = new Group(rectangle);
        
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Drawing a Rectangle");
        
      //Adding scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of the stage
      stage.show();
   }      
   public static void main(String args[]){
      launch(args);
   }
}

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


 مستطيل بحواف دائرية :

يمكننا أن نجعل زوايا المستطيل مستديرة عن طريق استدعاء الدالة  setArcHeight () و الدالة  setArcWidth () . حيث يحددان ارتفاع وعرض القوس في أركان المستطيل. المثال التالي بتنفيذ مستطيل زاوية Rounded.
...كما يمكنك تغير لون خلفية المستطيل باستخدام الدالة setFill

الكود:
import javafx.application.Application;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.paint.Color;  
import javafx.scene.shape.Rectangle;  
import javafx.stage.Stage;  
public class Shape_Example extends Application{  
  
    @Override  
    public void start(Stage primaryStage) throws Exception {  
        // TODO Auto-generated method stub  
    primaryStage.setTitle("Rectangle Example");  
    Group group = new Group();  
    Rectangle rect=new Rectangle();  
    rect.setX(20);  
    rect.setY(20);  
    rect.setWidth(100);  
    rect.setHeight(100);  
    rect.setArcHeight(35);  
    rect.setArcWidth(35);  
    rect.setFill(Color.RED);  
    group.getChildren().addAll(rect);  
    Scene scene = new Scene(group,200,300,Color.GRAY);  
    primaryStage.setScene(scene);  
    primaryStage.show();  
}  
public static void main(String[] args) {  
    launch(args);  
}  
  
}  


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


3_ الشكل البيضاوي Ellipse

بشكل عام ، يمكن تعريف الشكل البيضاوي Ellipse بأنه منحنى مع نقطتي اتصال. يكون مجموع المسافات إلى نقاط الاتصال ثابتًا من كل نقطة من المنحي ويتم تمثيل الشكل البيضاوي بفئة تسمى Ellipse . تنتمي هذه الفئة إلى الحزمة javafx.scene.shape .


كيف تصنع شكل بيضاوي

اتبع التعليمات التالية لإنشاء شكل بيضاوي:

_ إستيراد مكتبة الرسوم ثنائية الابعاد shape و تحديد الفئة Ellipse

الكود:
import javafx.scene.shape.Ellipse;   

_ إنشاء كائن جديد من الكلاس Ellipse يمثل الشكل البيضاوي الذى سيتم إضافتة للنافذة

الكود:
Ellipse ellipse = new Ellipse();

_ ضبط خصائص الشكل الهندسي و فئة Ellipse تحتوي على خصائص مختلفة الموضحة أدناه.


  • centerX - إحداثي x لمركز الشكل البيضاوي بالبكسل.



  • centerY - الإحداثي y من مركز الشكل البيضاوي  بالبكسل.



  • radiusX - عرض بكسل الشكل البيضاوي.



  • radiusY - ارتفاع الشكل البيضاوي.


تحتاج إلى تمرير القيم إلى هذه الخصائص على النحو التالى :

الكود:
ellipse.setCenterX(300.0f);
ellipse.setCenterY(150.0f);
ellipse.setRadiusX(150.0f);
ellipse.setRadiusY(75.0f);


واليك المثال بالكامل لانشاء شكل بيضاوي ثنائى الابعاد على النحو التالى :

الكود:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Ellipse;
        
public class EllipseExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing an ellipse
      Ellipse ellipse = new Ellipse();
        
      //Setting the properties of the ellipse
      ellipse.setCenterX(300.0f);
      ellipse.setCenterY(150.0f);
      ellipse.setRadiusX(150.0f);
      ellipse.setRadiusY(75.0f);
        
      //Creating a Group object  
      Group root = new Group(ellipse);
        
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);
      
      //Setting title to the Stage
      stage.setTitle("Drawing an Ellipse");
        
      //Adding scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

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





4_ القوس JavaFX Arc

بشكل عام ، يعد القوس جزءًا من محيط الدائرة أو المنحي يتم وصفه من قبل الخصائص التالية -



  • length - المسافة على طول القوس.



  • angle - الزاوية التي يقوم بها المنحنى في منتصف الدائرة.



  • radiusX - عرض الشكل البيضاوي الكامل الذي يكون القوس الحالي جزءًا منه.



  • radiusY - ارتفاع الشكل البيضاوي الكامل الذي يشكل القوس الحالي جزءًا منه.



و في JavaFX ، يتم تمثيل قوس بفئة تسمى Arc. تنتمي هذه الفئة إلى الحزمة javafx.scene.shape.


كيف تصنع القوس

اتبع التعليمات التالية لإنشاء شكل بيضاوي:

_ إستيراد مكتبة الرسوم ثنائية الابعاد shape و تحديد الفئة Arc

الكود:
import javafx.scene.shape.Arc;   

_ إنشاء كائن جديد من الكلاس Arc يمثل القوس الذى سيتم إضافتة للنافذة

الكود:
Arc arc = new Arc();

_ ضبط خصائص الشكل الهندسي و فئة Arc تحتوي على خصائص مختلفة الموضحة أدناه.


  • centerX - الإحداثي x لمركز القوس.
  • centerY - الاحداثي y من مركز القوس.
  • radiusX - عرض الشكل المنحي الكامل الذي يشكل القوس الحالي جزءًا منه.
  • radiusY - ارتفاع الشكل المنحي الذي يشكل القوس الحالي جزءًا منه.
  • startAngle - زاوية الانطلاق للقوس بالدرجات.
  • length - المدى الزاوي للقوس بالدرجات.


لرسم قوس ، تحتاج إلى تمرير القيم إلى هذه الخصائص ، كما هو موضح أدناه :

الكود:
 arc.setCenterX(100);  
    arc.setCenterY(100);  
    arc.setRadiusX(50);  
    arc.setRadiusY(80);  
    arc.setStartAngle(30);  
    arc.setLength(70);  

و الكود الكامل لرسم قوس على النافذة كما هو موضح ادناه :

الكود:
import javafx.application.Application;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.shape.Arc;  
import javafx.stage.Stage;  
 
public class Shape_Example extends Application{  
  
    @Override  
    public void start(Stage primaryStage) throws Exception {  
        // TODO Auto-generated method stub  
    primaryStage.setTitle("Arc Example");  
    Group group = new Group();  
    Arc arc = new Arc();  
    arc.setCenterX(100);  
    arc.setCenterY(100);  
    arc.setRadiusX(50);  
    arc.setRadiusY(80);  
    arc.setStartAngle(30);  
    arc.setLength(70);  
    
   
    group.getChildren().addAll(arc);  
    Scene scene = new Scene(group,200,300,Color.GRAY);  
    primaryStage.setScene(scene);  
    primaryStage.show();  
}  
public static void main(String[] args) {  
    launch(args);  
}  
  
}  

أنواع الاقواس

توفر الفئة ArcType في JavaFX ثلاثة أنواع من الاقواس وهي على النحو التالى :-



  1. Open : قوس مفتوح وهو قوس غير مغلق على الإطلاق .
  2. Chord : قوس وتر وهو نوع من القوس الذي يغلق بخط مستقيم.
  3. Round :  القوس الدائري عبارة عن قوس مغلق عن طريق ضم نقطة البداية والنهاية إلى مركز المنحني .


يمكنك تعيين نوع القوس باستخدام الطريقة setType  بتمرير أي من الخصائص التالية 


  1. ArcType.OPEN 
  2. ArcType.CHORD 
  3. ArcType.Round.


و المثال التالى يوضح كيفية انشاء قوس مع تحديد نوعه على النحو التالى :

الكود:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Arc;  
import javafx.scene.shape.ArcType;
        
public class ArcExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing an arc
      Arc arc = new Arc();
        
      //Setting the properties of the arc
      arc.setCenterX(300.0f);
      arc.setCenterY(150.0f);
      arc.setRadiusX(90.0f);
      arc.setRadiusY(90.0f);
      arc.setStartAngle(40.0f);
      arc.setLength(239.0f);  
      
      //Setting the type of the arc
      arc.setType(ArcType.ROUND);        
        
      //Creating a Group object  
      Group root = new Group(arc);
        
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Drawing an Arc");
        
      //Adding scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of the stage
      stage.show();
   }  
   public static void main(String args[]){
      launch(args);
   }
}






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



1_ الدائرة JavaFX Cirlce

الدائرة هي موضع جميع النقاط على مسافة ثابتة من نقطة ثابتة تسمي (مركز الدائرة). وبعبارة أخرى ، فإن الدائرة عبارة عن خط يشكل حلقة مغلقة ، كل نقطة فيها هي مسافة ثابتة من نقطة مركزية.

يتم تعريف دائرة بواسطة معلمتين هما -


  1. Centre : المركز وهي نقطة داخل الدائرة. جميع النقاط على الدائرة متساوية المسافة (نفس المسافة) من نقطة المركز.
  2. Radius : نصف القطر هو المسافة من المركز إلى أي نقطة على الدائرة. نصف القطر.




و في JavaFX يتم تمثيل دائرة بواسطة فئة تسمى Circle. تنتمي هذه الفئة إلى الحزمة javafx.scene.shape.

كيف تصنع الدائرة

اتبع التعليمات التالية لإنشاء شكل بيضاوي:

_ إستيراد مكتبة الرسوم ثنائية الابعاد shape و تحديد الفئة Circle

الكود:
import javafx.scene.shape.Circle;   

_ إنشاء كائن جديد من الكلاس Circle يمثل الدائرة التي سيتم إضافتها للنافذة

الكود:
 Circle circle = new Circle();  

_ ضبط خصائص الشكل الهندسي و فئة Circle تحتوي على خصائص مختلفة الموضحة أدناه.

وهذة الفئة لديها 3 خصائص من نوع البيانات وهما -


  1. centerX - الإحداثي x لمركز الدائرة.
  2. centerY - الإحداثي y من مركز الدائرة.
  3. radius - نصف قطر الدائرة بالبكسل.


لرسم دائرة ، تحتاج إلى تمرير القيم إلى هذه الخصائص ، على النحو التالي -

الكود:
setCenterX(value);
setCenterY(value);
setRadius(value);


و المثال الكامل التالى يوضح كيفية إنشاء دائرة ووضعها على النافذة :

الكود:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
        
public class CircleExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();
        
      //Setting the properties of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(135.0f);
      circle.setRadius(100.0f);
        
      //Creating a Group object  
      Group root = new Group(circle);
        
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      //Setting title to the Stage
      stage.setTitle("Drawing a Circle");
        
      //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
الدولة : مصر
الجنس : انثى

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

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

ََ

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


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