شرح الاشكال ثنائية الأبعاد
في هذا الدرس ستتعلم كيف تتعامل مع الكلاسات الجاهزة في الحزمة javafx.scene.shape لرسم أشكال ثنائية الأبعاد ( 2D Shapes ).
كل كلاس موجود في هذه الحزمة تم تصميمه لإعطائك شكل معين يمكنك رسمه في النافذة.
من الأشياء التي يمكنك رسمها في النافذة بواسطة هذه الحزمة:
خط ( Line) متسقيم أو منحني.
مستطيل ( Rectangle).
دائرة ( Circle).
شكل بيضاوي ( Polygon).
تحويل الصور التي نوعها SVG لشكل ثنائي الأبعاد.
معلومة أشكال ثنائية الأبعاد
الحزمة javafx.scene.shape فيها كلاس إسمه Shape يعتبر الكلاس الأساسي لأي كلاس يمثل شكل معين.
و بالتالي فإن أي شكل نريد الحصول عليه سيكون عبارة عن كائن من كلاس يرث منه و لهذا ستجد أن أغلب الكلاسات التي ستتعامل معها في هذه الحزمة تملك دوال مشتركة.
مبدأ الرسم
مبدأ الرسم في جافا هو نفسه مبدأ الرسم الذي تعلمته في مادة الرياضيات حيث أن كل نقطة تريد تحديد مكانها في النافذة يجب أن تحدد لها قيمتين هما X و Y.
X: نقصد منها أين سيتم وضع النقطة بالنسبة للنافذة أفقياً.
Y: نقصد منها أين سيتم وضع النقطة بالنسبة للنافذة عامودياً.
في النهاية, تحديد قيمة X و Y معاً يحدد مكان وجود النقطة في النافذة.
الكلاسات التي تستخدم لرسم أشكال ثنائية الأبعاد في javafx
طريقة رسم دائرة في الكلاس Circle
الكلاس Circle يستخدم للحصول على دائرة.
الدائرة بدورها تتألف من نقطة أساسية يقال لها المركز ( Center ) و القطر ( Diameter ) و الذي بدوره يساوي radius * 2.
لتحديد نقطة وجود مركز الدائرة في النافذة نستخدم الدالتين
setCenterX()وsetCenterY().لتحديد نصف حجم قطر الدائرة نستخدم الدالة
setRadius().
المثال التالي يعلمك طريقة رسم دائرة, إعطاؤها لون و إضافتها في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الدائرة التي نريد إضافتها في النافذة Circle هنا قمنا بإنشاء كائن من الكلاس
Circle circle = new Circle();
// في النافذة circle هنا قمنا بتحديد النقطة التي سيظهر عندها الكائن
circle.setCenterX(200);
circle.setCenterY(125);
// circle الكائن ( Radius ) هنا قمنا بتحديد حجم نصف قطر
circle.setRadius(80);
// إلى اللون الأزرق و حددنا أن لون حدوده هو الأسود rectangle هنا قمنا بإعطاء الكائن لون
circle.setFill(Color.CADETBLUE);
circle.setStroke(Color.BLACK);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن circle هنا قمنا بإضافة الكائن
root.getChildren().add(circle);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Circle");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم دائرة غير مكتملة في الكلاس Arc
الكلاس Arc يستخدم للحصول على شكل بيضاوي أو دائري غير مكتمل, بمعنى أنه يظهر فيه جزء ناقص.
الشكل البيضاوي بدوره يتألف من نقطة أساسية يقال لها المركز ( Center ), قطر عامودي و قطر أفقي.
لتحديد نقطة وجود مركز الدائرة في النافذة نستخدم الدالتين
setCenterX()وsetCenterY().لتحديد نصف حجم قطر الدائرة العامودي نستخدم الدالة
setRadiusY().لتحديد نصف حجم قطر الدائرة الأفقي نستخدم الدالة
setRadiusX().لتحديد حجم الجزء الذي سيتم إظهاره من الشكل نستخدم الدالة
setLength().لتحديد من أي درجة سيتم البدء بإخفاء الشكل من عندها نستخدم الدالة
setStartAngle().لتحديد الطريقة التي سيتم فيها إخفاء جزء من الشكل نستخدم الدالة
setType().
المثال التالي يعلمك طريقة رسم دائرة غير مكتملة, إعطاؤها لون و إضافتها في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcType;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الدائرة التي نريد إضافتها في النافذة Arc هنا قمنا بإنشاء كائن من الكلاس
Arc arc = new Arc();
// في النافذة arc هنا قمنا بتحديد النقطة التي سيظهر عندها الكائن
arc.setCenterX(200);
arc.setCenterY(125);
// arc هنا قمنا بتحديد حجم نصف القطر الأفقي و نصف القطر العامودي للكائن
// جعلنا القطرين متساويين حتى يظهر الكائن كدائرة عندما يتم عرضه في النافذة
arc.setRadiusX(80);
arc.setRadiusY(80);
// هنا قمنا بتحديد كم درجة نريد أن نظهر من الدائرة
// هذا يعني أن 60 درجة من الدائرة لن يتم رسمها - لأن الدائرة تتألف من 360 درجة - و هذا يعادل ربع الدائرة
arc.setLength(300);
// هنا حددنا أنه إبتداءاً من زاوية 30 درجة سيتم رسم الـ 300 درجة
arc.setStartAngle(30);
// هنا قمنا بتحديد أن الجزء الذي لن يتم رسمه سيكون كالقوس
arc.setType(ArcType.ROUND);
// إلى اللون الأزرق و حددنا أن لون حدوده هو الأسود rectangle هنا قمنا بإعطاء الكائن لون
arc.setFill(Color.CADETBLUE);
arc.setStroke(Color.BLACK);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن arc هنا قمنا بإضافة الكائن
root.getChildren().add(arc);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Arc");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
مثال حول الكلاس Path و الكلاس PathElement
في حال كنت تريد بناء شكل معقد لا يشبه أي شكل من الأشكل التي تعلمت طريقة رسمها من الأمثلة السابقة, يمكنك إستخدام الكلاس Path و الكلاسات التي ترث من الكلاس PathElement لرسم الشكل الذي تريده.
الآن, الشكل الواحد الذي تريد رسمه يمكنك تقسميه لعدة أجزاء مما يجعلك قادر على إعطاء لون خاص لكل جزء في هذا الشكل و إضافة مؤثرات عليه.
كل جزء تنوي وضعه في الشكل سيكون عبارة عن كائن من الكلاس Path. و أول نقطة تضعها في كل جزء ستكون عبارة عن كائن من الكلاس MoveTo.
أي خط تنوي وضعه بعد وضع النقطة الأولى, سيكن عبارة عن كائن من إحدى الكلاسات التالية:
LineTo: في حال كنت تنوي رسم خط مستقيم.HLineTo: في حال كنت تنوي رسم خط مستقيم أفقي.VLineTo: في حال كنت تنوي رسم خط مستقيم عامودي.QuadCurveTo: في حال كنت تنوي رسم منحنى رباعي.CubicCurveTo: في حال كنت تنوي رسم منحنى مكعب.ArcTo: في حال كنت تنوي رسم خط بيضاوي أو دائري.
المثال التالي يعلمك طريقة رسم أي شكل تريد و تلوينه, و من ثم إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// و الذي سيمثل الجزء الأعلى الذي ننوي رسمه في النافذة Path هنا قمنا بإنشاء كائن من الكلاس
// يمثل النقطة الأولى في هذا الجزء MoveTo بعدها قمنا بإنشاء كائن من الكلاس
// يمثل النقطة التي سيقف عندها المنحنى الرباعي و النقطة التي سينجذب إليها في هذا الجزء QuadCurveTo بعدها قمنا بإنشاء كائن من الكلاس
Path path1 = new Path();
MoveTo move1 = new MoveTo(150, 100);
QuadCurveTo quadCurve = new QuadCurveTo();
quadCurve.setX(250);
quadCurve.setY(100);
quadCurve.setControlX(200);
quadCurve.setControlY(0);
// أبيض و جعلنا حدوده أكثر سمكاً path1 هنا جعلنا لون داخل الكائن
path1.setFill(Color.WHITE);
path1.setStrokeWidth(3);
// حتى نربطهم مع بعض path1 في الكائن quadCurve و move1 هنا قمنا بإضافة الكائنين
path1.getElements().addAll(move1, quadCurve);
// و الذي سيمثل الجزء الأسفل الذي ننوي رسمه في النافذة Path هنا قمنا بإنشاء كائن من الكلاس
// يمثل النقطة الأولى في هذا الجزء MoveTo بعدها قمنا بإنشاء كائن من الكلاس
// يمثل النقاط التي سيقف عندها كل خط مستقيم في هذا الجزء LineTo بعدها قمنا بإنشاء ثلاث كائنات من الكلاس
Path path2 = new Path();
MoveTo move2 = new MoveTo(150, 100);
LineTo line1 = new LineTo(250, 100);
LineTo line2 = new LineTo(200, 220);
LineTo line3 = new LineTo(150, 100);
// حتى نربطهم مع بعض path2 في الكائن line3 ,line2 line1 و move2 هنا قمنا بإضافة الكائنان
path2.getElements().addAll(move2, line1, line2, line3);
// بني فاتح و جعلنا حدوده أكثر سمكاً path2 هنا جعلنا لون داخل الكائن
path2.setFill(Color.GOLDENROD);
path2.setStrokeWidth(3);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن svgPath هنا قمنا بإضافة الكائن
root.getChildren().addAll(path1, path2);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 270);
// أخضر, أي كأننا قمنا بتغيير لون خلفية النافذة scene هنا قمنا بجعل لون الكائن
scene.setFill(Color.PALEGREEN);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Path & PathElement");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم شكل بيضاوي في الكلاس Ellipse
الكلاس Ellipse يستخدم للحصول على شكل بيضاوي.
شكل بيضاوي بدوره يتألف من نقطة أساسية يقال لها المركز ( Center ), قطر عامودي و قطر أفقي.
لتحديد نقطة وجود مركز الدائرة في النافذة نستخدم الدالتين
setCenterX()وsetCenterY().لتحديد نصف حجم قطر الدائرة العامودي نستخدم الدالة
setRadiusY().لتحديد نصف حجم قطر الدائرة الأفقي نستخدم الدالة
setRadiusX().
المثال التالي يعلمك طريقة رسم شكل بيضاوي, إعطاؤه لون و إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الدائرة التي نريد إضافتها في النافذة Ellipse هنا قمنا بإنشاء كائن من الكلاس
Ellipse ellipse = new Ellipse();
// في النافذة ellipse هنا قمنا بتحديد النقطة التي سيظهر عندها الكائن
ellipse.setCenterX(200);
ellipse.setCenterY(125);
// بالطول ellipse الكائن ( Radius ) هنا قمنا بتحديد حجم نصف قطر
ellipse.setRadiusY(60);
// بالعرض ellipse الكائن ( Radius ) هنا قمنا بتحديد حجم نصف قطر
ellipse.setRadiusX(110);
// إلى اللون الأزرق و حددنا أن لون حدوده هو الأسود ellipse هنا قمنا بإعطاء الكائن لون
ellipse.setFill(Color.CADETBLUE);
ellipse.setStroke(Color.BLACK);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن ellipse هنا قمنا بإضافة الكائن
root.getChildren().add(ellipse);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Ellipse");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم خط مستقيم في الكلاس line
الكلاس Line يستخدم للحصول على خط مستقيم يمكن عرضه بشكل عامودي, أفقي و مائل أيضاً.
الخط بدوره يتألف من نقطتين أساسيتين, نقطة البداية و نقطة النهاية.
لتحديد نقطة بداية الخط نستخدم الدالتين
setStartX()وsetStartY().لتحديد نقطة بداية الخط نستخدم الدالتين
setEndX()وsetEndY().
المثال التالي يعلمك طريقة رسم خط مستقيم, إعطاؤه لون و إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الخط المستقيم الذي نريد إضافته في النافذة Line هنا قمنا بإنشاء كائن من الكلاس
Line line = new Line();
// في النافذة line هنا قمنا بتحديد موقع نقطة بداية الخط الذي يمثله الكائن
line.setStartX(50);
line.setStartY(50);
// في النافذة line هنا قمنا بتحديد مكان نقطة نهاية الخط الذي يمثله الكائن
line.setEndX(350);
line.setEndY(200);
// إلى اللون الأحمر line هنا قمنا بإعطاء الكائن لون
line.setStroke(Color.RED);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن line هنا قمنا بإضافة الكائن
root.getChildren().add(line);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Line");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم شكل مغلق في الكلاس Polygon
الكلاس Polygon يستخدم لبناء شكل مغلق يتكون من مجموعة نقاط متصلة ببعضها لذلك يمكنك الإستفادة منه عند الحاجة لرسم شكل خاص مثل مثلث, شكل هندسي معين, خريطة بلد معين إلخ..
الفكرة هنا أنك تنطلق من نقطة معينة, بعدها كل نقطة تضيفها على الشكل يتم ربطها بالنقطة التي قبلها, و في النهاية يتم ربط آخر نقطة تم إضافتها بشكل تلقائي مع أول نقطة تم وضعها حتى يتم إغلاق الشكل.
المثال التالي يعلمك طريقة رسم مثلث, إعطاؤه لون و إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الشكل المغلق - في حالتنا نقصد المثلث - الذي نريد إضافته في النافذة Polygon هنا قمنا بإنشاء كائن من الكلاس
Polygon polygon = new Polygon();
// في النافذة و التي ستمثل الشكل النهائي عندما يتم وصلها polygon هنا قمنا بتمرير مصفوفة أرقام تمثل مكان كل نقطة سنضعها للكائن
// للنقطة y للنقطة. القيمة الثاني تمثل قيمة الـ x كل سطر في هذه المصفوفة يمثل نقطة واحدة في الشكل الذي نريد رسمه, القيمة الأولى تمثل قيمة الـ
polygon.getPoints().addAll(
100.0, 200.0, // هذه نقطة البداية التي وضعناها في الأسفل ناحية اليسار
200.0, 50.0, // هذه النقطة الثانية التي وضعناه في الأعلى و في وسط النافذة
300.0, 200.0 // هذه النقطة الأخيرة التي وضعناها في الأسفل ناحية اليسار
);
// إلى اللون الأزرق و حددنا أن لون حدوده هو الأسود polygon هنا قمنا بتغيير لون الكائن
polygon.setFill(Color.CADETBLUE);
polygon.setStroke(Color.BLACK);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن polygon هنا قمنا بإضافة الكائن
root.getChildren().add(polygon);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Polygon");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم شكل غير مغلق بواسطة الكلاس Polyline
الكلاس Polyline يستخدم لبناء شكل يتكون من مجموعة نقاط متصلة ببعضها تماماً مثل الكلاس Polygon مع فرق واحد و هو أنه لا يتم إغلاق الشكل الذي يتم رسمه بشكل تلقائي. أي لا يتم وضع خط بين أول نقطة في الشكل و آخر نقطة فيه إن لم تفعل ذلك بنفسك.
المثال التالي يعلمك طريقة رسم شكل يشبه المثلث, و إضافته في النافذة مع الإشارة إلى أننا تعمدنا عدم وضع لون له حتى تلاحظ أنه لم يتم وصل أول و آخر نقطة بشكل تلقائي.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polyline;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الشكل الغير مغلق الذي نريد إضافته في النافذة Polyline هنا قمنا بإنشاء كائن من الكلاس
Polyline polyline = new Polyline();
// في النافذة و التي ستمثل الشكل النهائي عندما يتم وصلها polyline هنا قمنا بتمرير مصفوفة أرقام تمثل مكان كل نقطة سنضعها للكائن
// للنقطة y للنقطة. القيمة الثاني تمثل قيمة الـ x كل سطر في هذه المصفوفة يمثل نقطة واحدة في الشكل الذي نريد رسمه, القيمة الأولى تمثل قيمة الـ
polyline.getPoints().addAll(
100.0, 200.0, // هذه نقطة البداية التي وضعناها في الأسفل ناحية اليسار
200.0, 50.0, // هذه النقطة الثانية التي وضعناه في الأعلى و في وسط النافذة
300.0, 200.0 // هذه النقطة الأخيرة التي وضعناها في الأسفل ناحية اليسار
);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن polyline هنا قمنا بإضافة الكائن
root.getChildren().add(polyline);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Polyline");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم منحنى رباعي في الكلاس QuadCurve
الكلاس QuadCurve يستخدم للحصول على منحنى رباعي و الذي يشبه الخط الغير مستقيم أو الذي فيه إنحناء واحد.
الخط بدوره يتألف من ثلاث نقاط: نقطة البداية, نقطة النهاية و النقطة التي سينحني الخط باتجاهها.
لتحديد موقع نقطة بداية الخط نستخدم الدالتين
setStartX()وsetStartY().لتحديد موقع نقطة بداية الخط نستخدم الدالتين
setEndX()وsetEndY().لتحديد موقع النقطة التي سينحني الخط باتجاهها نستخدم الدالتين
setControlX()وsetControlY().
المثال التالي يعلمك طريقة رسم منحنى رباعي, إعطاؤه لون و إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.QuadCurve;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الخط المستقيم الذي نريد إضافته في النافذة QuadCurve هنا قمنا بإنشاء كائن من الكلاس
QuadCurve quadCurve = new QuadCurve();
// في النافذة quadCurve هنا قمنا بتحديد موقع نقطة بداية الخط الذي يمثله الكائن
quadCurve.setStartX(100);
quadCurve.setStartY(180);
// في النافذة quadCurve هنا قمنا بتحديد موقع نقطة نهاية الخط الذي يمثله الكائن
quadCurve.setEndX(300);
quadCurve.setEndY(180);
// في النافذة quadCurve هنا قمنا بتحديد موقع النقطة التي سينجذب إليها الخط الذي يمثله الكائن
quadCurve.setControlX(130);
quadCurve.setControlY(-50);
// أحمر و جعلنا داخله شفافاً quadCurve هنا قمنا بجعل لون حدود الكائن
quadCurve.setStroke(Color.RED);
quadCurve.setFill(Color.TRANSPARENT);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن quadCurve هنا قمنا بإضافة الكائن
root.getChildren().add(quadCurve);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX QuadCurve");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم مستطيل في الكلاس Rectangle
يستخدم للحصول على مستطيل أو مربع على حسب الطول و العرض الذي تحدده له.
لتحديد النقطة التي سيظهر عندها المستطيل في النافذة نستخدم الدالتين
setX()وsetY().و لتحديد طول و عرض المستطيل نستخدم الدالتين
setWidth()وsetHeight(), و هذا الأمر ستراه في المثال الأول.لجعل زوايا المستطيل مستديرة الشكل نستخدم الدالتين
setArcWidth()وsetArcHeight()لتحديد درجة إنحناء الزوايا, و هذا الأمر ستراه في المثال الثاني.
المثال التالي يعلمك طريقة رسم مستطيل, إعطاؤه لون, إضافته في النافذة.
المثال الأول
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 Main extends Application {
@Override
public void start(Stage stage) {
// يمثل المستطيل الذي نريد إضافته في النافذة Rectangle هنا قمنا بإنشاء كائن من الكلاس
Rectangle rectangle = new Rectangle();
// في النافذة rectangle هنا قمنا بتحديد النقطة التي سيظهر عندها الكائن
rectangle.setX(70);
rectangle.setY(50);
// rectangle هنا قمنا بتحديد طول و عرض الكائن
rectangle.setWidth(260);
rectangle.setHeight(150);
// إلى اللون الأزرق و حددنا أن لون حدوده هو الأسود rectangle هنا قمنا بإعطاء الكائن لون
rectangle.setFill(Color.CADETBLUE);
rectangle.setStroke(Color.BLACK);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن rectangle هنا قمنا بإضافة الكائن
root.getChildren().add(rectangle);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Rectangle");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
المثال التالي يعلمك طريقة جعل المستطيل مستدير الزواية.
المثال الثاني
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 Main extends Application {
@Override
public void start(Stage stage) {
// يمثل المستطيل الذي نريد إضافته في النافذة Rectangle هنا قمنا بإنشاء كائن من الكلاس
Rectangle rectangle = new Rectangle();
// في النافذة rectangle هنا قمنا بتحديد النقطة التي سيظهر عندها الكائن
rectangle.setX(70);
rectangle.setY(50);
// rectangle هنا قمنا بتحديد طول و عرض الكائن
rectangle.setWidth(260);
rectangle.setHeight(150);
// بالعرض و الطول rectangle هنا قنما بتحديد درجة إنحناء زوايا الكائن
rectangle.setArcWidth(30);
rectangle.setArcHeight(20);
// إلى اللون الأزرق و حددنا أن لون حدوده هو الأسود rectangle هنا قمنا بإعطاء الكائن لون
rectangle.setFill(Color.CADETBLUE);
rectangle.setStroke(Color.BLACK);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن rectangle هنا قمنا بإضافة الكائن
root.getChildren().add(rectangle);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Rounded Rectangle");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة رسم صورة نوعها SVG في الكلاس SVGPath
الكلاس SVGPath يستخدم لرسم الصور التي نوعها SVG في النافذة.
معلومة: هذا النوع من الصور يتميز بأنه يتلائم مع حجم أي شاشة يتم عرضه عليها.
لتحديد الصورة التي سيتم رسمها نستخدم الدالة setContent().
المثال التالي يعلمك طريقة رسم صورة نوعها SVG في النافذة.
ملاحظة: كود الصورة المستخدمة في المثال تم نسخه من هذا الموقع icomoon.io
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الصورة التي نريد إضافتها في النافذة SVGPath هنا قمنا بإنشاء كائن من الكلاس
SVGPath svgPath = new SVGPath();
// svgPath هنا قمنا بتحديد المكان الذي سيتم فيه وضع الكائن
svgPath.setTranslateX(120);
svgPath.setTranslateY(90);
// svgPath الذي يمثل الصورة التي سنعرضها كمحتوى للكائن SVG هنا قمنا بتمرير كود الـ
svgPath.setContent("M21.501 10.587c0.013-0.054 0.021-0.092 0.024-0.113l0.065-0.472-2.959-0.017c-2.674-0.015-3.492 0-3.565 0.068-0.035 0.032-0.958 3.54-2.603 9.892-0.785 3.030-1.445 5.45-1.468 5.378s-0.962-3.531-2.087-7.686c-1.125-4.155-2.069-7.578-2.097-7.606-0.039-0.039-3.624-0.056-6.526-0.031-0.421 0.004-0.655-0.819 3.751 13.196 0.61 1.94 1.523 4.687 2.029 6.105 0.583 1.634 0.999 2.895 1.283 3.948 0.502 2.004 0.52 3.26 0.41 4.727-0.127 1.694-0.145 13.652-0.021 13.852 0.095 0.153 5.701 0.224 6.232 0.079 0.085-0.023 0.142-0.106 0.179-0.558 0.132-0.389 0.143-1.936 0.143-8.359v-8.205l0.359-1.132c0.235-0.741 0.825-2.687 1.312-4.326s1.076-3.601 1.309-4.361c2.115-6.895 4.134-13.677 4.187-14.063l0.043-0.316z M52.883 20.541l-0.001 0.427-0.067 0.001-0.037 11.812-0.036 11.452-0.917 0.933c-1.026 1.045-1.849 1.444-2.593 1.257-0.81-0.203-0.79 0.112-0.858-13.423l-0.062-12.459h-5.895v0.428h-0.068v13.518c0 14.484-0 14.475 0.734 15.93 0.585 1.158 1.438 1.722 2.899 1.917h0c1.924 0.256 4-0.616 5.923-2.488l0.836-0.814v1.403c0 1.212 0.035 1.413 0.254 1.474 0.36 0.1 4.823 0.107 5.306 0.008l0.4-0.082v-0.414l0.068-0.014v-30.944l-5.887 0.079z M37.931 26.646c-0.558-2.396-1.605-4.007-3.327-5.121-2.705-1.75-5.795-1.935-8.662-0.518-2.089 1.032-3.434 2.745-4.129 5.255-0.083 0.299-0.144 0.551-0.19 0.926-0.177 0.887-0.198 2.209-0.243 8.372-0.070 9.495 0.038 10.625 1.228 12.782 1.166 2.115 3.588 3.666 6.223 3.986 0.794 0.096 2.402-0.054 3.327-0.31 2.102-0.583 4.117-2.244 5.007-4.13 0.385-0.815 0.617-1.381 0.757-2.416 0.261-1.414 0.279-3.698 0.279-9.523-0-7.43-0.024-8.241-0.271-9.303zM31.209 46c-0.494 0.377-1.358 0.541-2.061 0.391-0.541-0.115-1.271-0.964-1.496-1.738-0.28-0.965-0.301-14.374-0.060-17.004 0.399-1.316 1.512-2.003 2.727-1.676 0.947 0.255 1.432 0.848 1.709 2.091 0.205 0.922 0.229 2.071 0.186 8.829-0.029 4.481-0.045 6.671-0.191 7.847-0.149 0.742-0.395 0.94-0.813 1.26z M143.774 33.384h2.848l-0.045-2.58c-0.044-2.367-0.079-2.637-0.395-3.279-0.499-1.013-1.235-1.463-2.403-1.463-1.403 0-2.292 0.678-2.712 2.071-0.179 0.593-0.366 4.668-0.232 5.019 0.075 0.197 0.483 0.232 2.939 0.232z M124.737 27.515c-0.38-0.765-1.087-1.142-1.908-1.113-0.639 0.023-1.348 0.292-2.031 0.813l-0.509 0.386v18.537l0.509 0.386c1.152 0.878 2.417 1.064 3.289 0.481 0.345-0.231 0.57-0.549 0.745-1.054 0.228-0.658 0.248-1.5 0.218-9.298-0.031-8.128-0.049-8.606-0.313-9.139z M160.055 19.165c-0.567-6.803-1.019-9.010-2.422-11.847-1.858-3.756-4.543-5.737-8.367-6.172-2.957-0.336-14.082-0.811-24.378-1.039-17.824-0.396-47.129 0.366-50.871 1.323-1.73 0.442-3.027 1.194-4.376 2.538-2.365 2.354-3.774 5.73-4.341 10.4-1.293 10.663-1.321 23.545-0.074 34.595 0.536 4.753 1.64 7.84 3.713 10.385 1.293 1.588 3.522 2.937 5.516 3.34 1.399 0.283 8.401 0.675 18.6 1.042 1.519 0.055 5.542 0.149 8.939 0.209 7.081 0.126 20.102 0.051 27.545-0.157 5.008-0.141 14.138-0.511 15.844-0.643 0.48-0.037 1.592-0.108 2.471-0.158 2.955-0.167 4.835-0.785 6.6-2.172 2.285-1.795 4.054-5.112 4.801-9.002 0.707-3.681 1.18-10.236 1.276-17.678 0.080-6.218-0.027-9.573-0.476-14.963zM89.080 16.7l-3.311 0.041-0.145 35.321-2.871 0.036c-2.22 0.031-2.894-0.003-2.948-0.145-0.038-0.102-0.085-8.064-0.105-17.697l-0.036-17.515-6.468-0.082v-5.519l19.114 0.077 0.082 5.442-3.311 0.041zM109.388 36.945v15.19h-5.233v-1.599c0-1.203-0.046-1.599-0.186-1.599-0.103 0-0.577 0.397-1.054 0.881-1.035 1.051-2.261 1.898-3.307 2.289-2.166 0.81-4.224 0.337-5.101-1.172-0.802-1.382-0.818-1.691-0.818-16.021v-13.159h5.228l0.041 12.392c0.039 12.176 0.045 12.4 0.336 12.896 0.386 0.658 0.975 0.834 1.912 0.577 0.551-0.151 0.927-0.419 1.821-1.308l1.126-1.122v-23.434h5.233v15.19zM129.797 49.963c-0.461 1.026-1.488 2.032-2.33 2.28-2.198 0.649-3.961 0.12-5.996-1.794-0.631-0.594-1.219-1.077-1.308-1.077-0.107 0-0.163 0.466-0.163 1.381v1.381h-5.233v-40.99h5.233v6.686c0 3.678 0.049 6.686 0.109 6.686s0.612-0.488 1.227-1.081c1.414-1.365 2.597-1.962 4.097-2.076 2.676-0.203 4.27 1.175 5.001 4.32 0.228 0.981 0.25 2.102 0.25 11.192-0 11.074-0.001 11.12-0.886 13.091zM151.937 43.886c-0.047 1.139-0.185 2.446-0.309 2.907-0.728 2.698-2.665 4.608-5.464 5.392-3.77 1.055-7.919-0.674-9.575-3.988-0.93-1.861-0.963-2.232-0.963-11.324 0-7.414 0.026-8.323 0.263-9.335 0.672-2.862 2.337-4.714 5.156-5.742 0.817-0.298 1.669-0.45 2.521-0.468 3.042-0.062 6.061 1.574 7.327 4.238 0.854 1.797 0.959 2.566 1.045 7.631l0.077 4.542-11.156 0.077-0.041 3.053c-0.058 4.306 0.232 5.63 1.395 6.414 0.978 0.659 2.48 0.609 3.298-0.109 0.766-0.673 0.983-1.396 1.058-3.507l0.068-1.853h5.387l-0.086 2.071z");
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن svgPath هنا قمنا بإضافة الكائن
root.getChildren().add(svgPath);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX SVGPath");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
JavaFX الدالة Shape.union()
لدمج الأجزاء المشتركة و الغير مشتركة بين الأشكال مع بعضها نستخدم الدالة الثابتة Shape.union().
بعد أن تقوم بدمج الأشكال ترجع كائن من الكلاس Shape يمثل الشكل الجديد.
عملية دمج الأجزاء المشتركة و الغير مشتركة بين الأشكال مع بعضها البعض كما فعلنا في المثال التالي يقال لها Union Operation.
مثال
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.shape.Shape;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثلا المستطيلان اللذين نريد إضافتهما في النافذة Rectangle هنا قمنا بإنشاء كائنين من الكلاس
Rectangle rectangle1 = new Rectangle();
Rectangle rectangle2 = new Rectangle();
// في النافذة rectangle2 و rectangle1 هنا قمنا بتحديد مكان ظهور الكائنين
rectangle1.setX(80);
rectangle1.setY(60);
rectangle2.setX(170);
rectangle2.setY(110);
// rectangle2 و rectangle1 هنا قمنا بتحديد طول و عرض الكائنين
rectangle1.setWidth(150);
rectangle1.setHeight(80);
rectangle2.setWidth(150);
rectangle2.setHeight(80);
// rectangle2 و rectangle1 يمثل الأجزاء المشتركة و الغير مشتركة بين الكائنين Shape للحصول على كائن union() هنا قمنا باستدعاء الدالة
Shape shape = Shape.union(rectangle1, rectangle2);
// هنا قمنا بتحديد لون الشكل الجديد, لون حدوده و سمك حدوده أيضاً
shape.setStroke(Color.BLACK);
shape.setFill(Color.CADETBLUE);
shape.setStrokeWidth(3);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن shape هنا قمنا بإضافة الكائن
root.getChildren().add(shape);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Union Operation");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
JavaFX الدالة Shape.subtract()
لحذف الأجزاء المشتركة بين الشكل و الأشكال القربية منه نستخدم الدالة الثابتة Shape.subtract().
بعد أن تقوم بدمج الأشكال ترجع كائن من الكلاس Shape يمثل الشكل الجديد.
عملية حذف أجزاء من الشكل نسبة للأشكال الأخرى التي نقربها منه كما فعلنا في المثال التالي يقال لها Subtraction Operation.
مثال
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.shape.Shape;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثلا المستطيلان اللذين نريد إضافتهما في النافذة Rectangle هنا قمنا بإنشاء كائنين من الكلاس
Rectangle rectangle1 = new Rectangle();
Rectangle rectangle2 = new Rectangle();
// في النافذة rectangle2 و rectangle1 هنا قمنا بتحديد مكان ظهور الكائنين
rectangle1.setX(80);
rectangle1.setY(60);
rectangle2.setX(170);
rectangle2.setY(110);
// rectangle2 و rectangle1 هنا قمنا بتحديد طول و عرض الكائنين
rectangle1.setWidth(150);
rectangle1.setHeight(80);
rectangle2.setWidth(150);
rectangle2.setHeight(80);
// rectangle2 و rectangle1 يمثل الأجزاء المشتركة فقط بين الكائنين Shape للحصول على كائن subtract() هنا قمنا باستدعاء الدالة
Shape shape = Shape.subtract(rectangle1, rectangle2);
// هنا قمنا بتحديد لون الشكل الجديد, لون حدوده و سمك حدوده أيضاً
shape.setStroke(Color.BLACK);
shape.setFill(Color.CADETBLUE);
shape.setStrokeWidth(3);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن shape هنا قمنا بإضافة الكائن
root.getChildren().add(shape);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Subtraction Operation");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
JavaFX الدالة Shape.intersect()
لدمج الأجزاء المشتركة فقط بين الأشكال مع بعضها نستخدم الدالة الثابتة Shape.intersect().
بعد أن تقوم بدمج الأشكال ترجع كائن من الكلاس Shape يمثل الشكل الجديد.
عملية دمج الأجزاء المشتركة فقط بين الأشكال مع بعضها البعض كما فعلنا في المثال التالي يقال لها Intersection Operation.
مثال
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.shape.Shape;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثلا المستطيلان اللذين نريد إضافتهما في النافذة Rectangle هنا قمنا بإنشاء كائنين من الكلاس
Rectangle rectangle1 = new Rectangle();
Rectangle rectangle2 = new Rectangle();
// في النافذة rectangle2 و rectangle1 هنا قمنا بتحديد مكان ظهور الكائنين
rectangle1.setX(80);
rectangle1.setY(60);
rectangle2.setX(170);
rectangle2.setY(110);
// rectangle2 و rectangle1 هنا قمنا بتحديد طول و عرض الكائنين
rectangle1.setWidth(150);
rectangle1.setHeight(80);
rectangle2.setWidth(150);
rectangle2.setHeight(80);
// rectangle2 و rectangle1 يمثل الأجزاء المشتركة فقط بين الكائنين Shape للحصول على كائن intersect() هنا قمنا باستدعاء الدالة
Shape shape = Shape.intersect(rectangle1, rectangle2);
// هنا قمنا بتحديد لون الشكل الجديد, لون حدوده و سمك حدوده أيضاً
shape.setStroke(Color.BLACK);
shape.setFill(Color.CADETBLUE);
shape.setStrokeWidth(3);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن shape هنا قمنا بإضافة الكائن
root.getChildren().add(shape);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Intersection Operation");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
