Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

JavaFXطريقة رسم صورة نوعها SVG

الكلاس SVGPath يستخدم لرسم الصور التي نوعها SVG في النافذة.
معلومة: هذا النوع من الصور يتميز بأنه يتلائم مع حجم أي شاشة يتم عرضه عليها.

لتحديد الصورة التي سيتم رسمها نستخدم الدالة setContent().


المثال التالي يعلمك طريقة رسم صورة نوعها SVG في النافذة.
ملاحظة: كود الصورة المستخدمة في المثال تم نسخه من هذا الموقع icomoon.io

مثال

Main.java
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);
    }

}

ستظهر لك النافذة التالية عند التشغيل.

مثال حول الكلاس SVGPath في javafx