JavaFXطريقة رسم صورة نوعها SVG
الكلاس 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);
}
}
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);
}
}
ستظهر لك النافذة التالية عند التشغيل.
