أهلا بكم 

يمكن تعريف التحول أو Transformation على أنه التغيير في شكل الرسومات أو طبيعتها أو مظهرها مثل الدوران ، القص ، إلخ...في JavaFX ، تحتوي الحزمة المسماة javafx.scene.transform كل فئات التحولات...وهي كما هو موضح ادناه :

1. الفئة Translation: يتم استخدام هذه لتغيير موضع الشكل او الرسم على النافذة
   
2. الفئة Rotation   : يتم إستخدام هذه الفئة لتدوير الكائن من أصله بزاوية معينة 
   
3. الفئة Scaling    : يتم استخدام هذه الفئة لتغيير حجم كائن 
   
4. الفئة Shearing : تستخدم هذه الفئة لتغيير منحدر الكائن في اتجاه معين 
   

والان سنناقش كل فئة و كيفية أستخدامها على النحو التالى :

أولا : الفئة Translation 

كما أوضحنا أعلاه فان تلك الفئة تقوم بنقل كائن إلى موضع مختلف على الشاشة. فمثلا يمكنك نقل رسم ثنائي الأبعاد عن طريق إضافة إحداثيات (tx، ty) إلى الإحداثي الأصلي (X، Y) للحصول على الإحداثيات الجديدة (X '، Y ’).


مثال :


فيما يلي مثال توضيحي ، نقوم بإنشاء دائرتين في نفس الموقع بنفس الأبعاد ، ولكن بألوان مختلفة (Brown و Cadetblue). كما نقوم بتطبيق الفئة Translation على الدائرة التى بالون cadetblue.

الكود:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;  

public class TranslationExample extends Application {
   @Override
   public void start(Stage stage) {      
      //Drawing Circle1
      Circle circle = new Circle();
      
      //Setting the position of the circle
      circle.setCenterX(150.0f);
      circle.setCenterY(135.0f);
      
      //Setting the radius of the circle
      circle.setRadius(100.0f);
      
      //Setting the color of the circle
      circle.setFill(Color.BROWN);
      
      //Setting the stroke width of the circle
      circle.setStrokeWidth(20);
      
      //Drawing Circle2
      Circle circle2 = new Circle();
      
      //Setting the position of the circle
      circle2.setCenterX(150.0f);
      circle2.setCenterY(135.0f);
      
      //Setting the radius of the circle
      circle2.setRadius(100.0f);
      
      //Setting the color of the circle
      circle2.setFill(Color.CADETBLUE);
      
      //Setting the stroke width of the circle
      circle2.setStrokeWidth(20);
      
      //Creating the translation transformation
      Translate translate = new Translate();      
      
      //Setting the X,Y,Z coordinates to apply the translation
      translate.setX(300);
      translate.setY(50);
      translate.setZ(100);  
      
      //Adding transformation to circle2
      circle2.getTransforms().addAll(translate);
      
      //Creating a Group object  
      Group root = new Group(circle,circle2);
        
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Translation transformation 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);
   }
}

ثانيا : الفئة Rotate 

يمكن تعريف الدوران بأنه عملية تدوير كائن بزاوية معينة من أصله. في JavaFX ، يمثل الفئة javafx.scene.transform.Rotate تحويل الدوران.

توضح الصورة التالية تحويل الدوران. حيث يتم تدوير المستطيل الموضح في الصورة على طول المحور ص بالزاوية θ. يتغير إحداثيات المستطيل بسبب الدوران بينما تبقى الحواف من نفس الطول.

الكود:


import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
        
public class RotationExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing Rectangle1
      Rectangle rectangle1 = new Rectangle(150, 75, 200, 150);
      rectangle1.setFill(Color.BLUE);
      rectangle1.setStroke(Color.BLACK);  
      
      //Drawing Rectangle2
      Rectangle rectangle2 = new Rectangle(150, 75, 200, 150);
      
      //Setting the color of the rectangle
      rectangle2.setFill(Color.BURLYWOOD);
      
      //Setting the stroke color of the rectangle
      rectangle2.setStroke(Color.BLACK);
      
      //creating the rotation transformation
      Rotate rotate = new Rotate();
      
      //Setting the angle for the rotation
      rotate.setAngle(20);
      
      //Setting pivot points for the rotation
      rotate.setPivotX(150);
      rotate.setPivotY(225);
        
      //Adding the transformation to rectangle2
      rectangle2.getTransforms().addAll(rotate);
        
      //Creating a Group object
      Group root = new Group(rectangle1, rectangle2);
        
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Rotation transformation 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);
   }
}

ثالثا : الفئة  Scaling 

Scaling أو التحجيم هو نوع من التحول الذي يستخدم لتغيير حجم الكائن إما توسيع الحجم أو ضغط حجم الكائن. يمكن تغيير الحجم بضرب إحداثيات الكائن بواسطة عامل يسمى عامل المقياس.

في الصورة التالية ، توضح كيفية استخدام التحجيم Scaling لتوسيع حجم المكعب

الكود:


import javafx.application.Application;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.paint.Color;  
import javafx.scene.shape.Circle;  
import javafx.scene.text.Font;  
import javafx.scene.text.FontPosture;  
import javafx.scene.text.FontWeight;  
import javafx.scene.text.Text;  
import javafx.scene.transform.Scale;  
import javafx.stage.Stage;  
public class ScaleExample extends Application{  
@Override  
public void start(Stage primaryStage) throws Exception {  
    // TODO Auto-generated method stub  
    //Creating the two circles  
    Circle cir1=new Circle(230,200,100);  
    Circle cir2=new Circle(550,200,100);  
      
    //setting the color and stroke for the circles  
    cir1.setFill(Color.YELLOW);  
    cir1.setStroke(Color.BLACK);  
    cir2.setFill(Color.YELLOW);  
    cir2.setStroke(Color.BLACK);  
      
    // creating the text nodes for the identification  
    Text text1 = new Text("Original Circle");  
    Text text2 = new Text("Scaled with factor 1.5 in XY");  
      
    //setting the properties for the text nodes  
    text1.setX(150);  
    text1.setY(400);  
    text2.setX(400);  
    text2.setY(400);  
    text1.setFont(Font.font("calibri",FontWeight.BLACK,FontPosture.ITALIC,20));  
    text2.setFont(Font.font("calibri",FontWeight.BLACK,FontPosture.ITALIC,20));  
      
    //creating a 2D scale  
    Scale scale = new Scale();  
      
    // setting the X-y factors for the scale  
    scale.setX(1.5);  
    scale.setY(1.5);  
      
    //setting the pivot points along which the scaling is done  
    scale.setPivotX(550);  
    scale.setPivotY(200);  
  
    //applying transformations on the 2nd circle  
    cir2.getTransforms().add(scale);  
    Group root = new Group();  
    root.getChildren().addAll(cir1,cir2,text1,text2);  
    Scene scene = new Scene(root,800,450);  
    primaryStage.setScene(scene);  
    primaryStage.setTitle("Scale Example");  
    primaryStage.show();  
      
}  
public static void main(String[] args) {  
    launch(args);  
}  
}

Shearing هو نوع من التحول الذي يغير ميل الكائن فيما يتعلق بأي من المحور سواء السيني او الصادي ...حبث هناك نوعان من التحويلات الجزئية وهما X-Shear & Y-Shear  أحدهما يغير قيم الإحداثي X والآخر يغير قيم الإحداثي y. ومع ذلك ، في كلتا الحالتين ، يقوم إحداثي واحد بتغيير إحداثياته ​​ويحافظ الآخر على قيمه


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

الكود:

import javafx.application.Application;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
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.scene.transform.Shear;  
import javafx.stage.Stage;  
public class ShearExample extends Application{  
  
    @Override  
    public void start(Stage primaryStage) throws Exception {  
        // TODO Auto-generated method stub  
        // creating Rectangles  
        Rectangle rect1 = new Rectangle(60,100,150,200);  
        Rectangle rect2 = new Rectangle(350,100,150,200);  
        Rectangle rect3 = new Rectangle(640,100,150,200);  
          
        //creating Text node just for the identification      
        Text text1 = new Text("After X shear");  
        Text text2 = new Text("Original ");  
        Text text3 = new Text("After Y shear");  
          
        //setting the positions and the fonts for the text nodes  
        text1.setX(70);  
        text1.setY(370);  
        text2.setX(380);  
        text2.setY(370);  
        text3.setX(640);  
        text3.setY(370);  
text1.setFont(Font.font("calibri",FontWeight.BOLD,FontPosture.ITALIC,20));  
text2.setFont(Font.font("calibri",FontWeight.BOLD,FontPosture.ITALIC,20));  
text3.setFont(Font.font("calibri",FontWeight.BOLD,FontPosture.ITALIC,20));  
  
//setting the color and stroke for the rectangles  
        rect1.setFill(Color.BLUE);  
        rect1.setStroke(Color.BLACK);  
        rect2.setFill(Color.DARKGRAY);  
        rect2.setStroke(Color.BLACK);  
        rect3.setFill(Color.PINK);  
        rect3.setStroke(Color.BLACK);  
          
        //creating the shear transformation  
        Shear shearX = new Shear();  
          
        // setting properties for the shear, the Y coordinate // needs to set to (0,0) for the X-shear transformation  
        shearX.setPivotX(200);  
    shearX.setPivotY(250);  
    shearX.setX(0.3);  
    shearX.setY(0.0);  
        // applying the shear to first rectangle.    
        rect1.getTransforms().add(shearX);  
      
        //creating the shear for third rectangle  
        Shear shearY = new Shear();  
          
        //setting the properties for shear, X coordinate needs // to be set to (0,0) in order to implement Y-shear  
        shearY.setPivotX(600);  
        shearY.setPivotY(80);  
        shearY.setX(0.0);  
        shearY.setY(0.2);  
          
        rect3.getTransforms().add(shearY);  
        Group root = new Group();  
        root.getChildren().addAll(rect1,rect2,rect3,text1,text2,text3);  
        Scene scene = new Scene(root,880,420);  
        primaryStage.setScene(scene);  
        primaryStage.setTitle("Shear Example");  
        primaryStage.show();  
    }  
    public static void main(String[] args) {  
        launch(args);  
    }  
  
}  

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