Làm thế nào để vẽ một ngôi sao 5 cánh đối xứng hoàn toàn?

Tôi đang tìm kiếm một ngôi sao 5 cánh mà tôi có thể xoay như một phần của giao diện người dùng. Do đó, trung tâm của ngôi sao không nên di chuyển - nếu không, nó trông lạ.

Tuy nhiên, bất kể tôi lấy ngôi sao 5 cánh từ đâu, trung tâm của ngôi sao không nằm ở trung tâm của hình ảnh.

Tôi tự tin rằng hình dạng như vậy tồn tại, bởi vì:

• Có thể tạo ra một hình ngũ giác đối xứng hoàn toàn. Mỗi đỉnh cách nhau 72 độ trên vòng tròn được bao quanh.
• Một ngôi sao như vậy có thể được giới hạn bởi một hình vuông, vì hình tròn có thể bao quanh một hình vuông; nhiều nhất (tôi nghĩ) 1 điểm của ngôi sao sẽ chạm vào hình vuông. Có thể có một tài sản hình vuông chứa một ngôi sao đối xứng hoàn toàn, với trung tâm của ngôi sao ở trung tâm của hình vuông.

Nếu tôi muốn tạo ra một hình dạng như vậy, tôi có thể sử dụng phần mềm giá rẻ nào, và quy trình cơ bản sẽ là gì? Vì tôi đang tìm kiếm sự đối xứng xuyên tâm, tôi tưởng tượng bắt đầu với một hình ngũ giác hoàn hảo là chìa khóa. Tôi hy vọng phần khó nhất của quy trình là đảm bảo rằng tất cả 10 cạnh của ngôi sao có chiều dài bằng nhau.

Đây là một phương pháp đơn giản sử dụng Inkscape (dot) org miễn phí và Nguồn mở.

Vấn đề chính là tâm quay của một ngôi sao khác với tâm quay của hộp giới hạn của nó. Vì vậy, để có được mọi thứ xoay đối xứng, bạn cần đặt ngôi sao bên trong một hình vuông và khớp với cả hai tâm quay.

1. Trên thanh công cụ chụp nhanh ở cạnh phải của cửa sổ ứng dụng, bật Snapping, Snap Nodes, Snap Node Snap, Trung tâm xoay vòng của Snap Item.

2. Nhấp và kéo một hướng dẫn ngang và dọc từ thước kẻ và đảm bảo các nút giao nhau.

3. Sử dụng công cụ đa giác được đặt thành tùy chọn sao và 5 góc, vẽ một ngôi sao năm cánh. Áp dụng một nét và không điền để làm cho nó dễ nhìn.

4. Nhấp và kéo hình dạng ngôi sao qua điểm gốc bạn đã tạo và cho phép nó chụp vào tâm xoay.

5. Chọn công cụ hình chữ nhật, di chuột qua gốc tọa độ cho đến khi nó hiển thị, nhấn giữ phím shift + CTRL khi bạn nhấp và kéo để tạo một hình vuông chính giữa xung quanh gốc.

6. Nhóm cả hình vuông và ngôi sao.

7. Khi bạn đã hoàn thành, bạn có thể xóa nét của hình vuông, áp dụng tô màu cho ngôi sao, sau đó xuất dưới dạng PNG bằng cách sử dụng tùy chọn "Ẩn tất cả ngoại trừ được chọn". Kết quả là một PNG có nền vuông trong suốt với cả hai tâm xoay của hình vuông và ngôi sao ở cùng một vị trí.

Nếu bạn muốn Inkscape SVG, nó ở đây

Một ngôi sao 5 cánh IS đối xứng hoàn toàn - Vấn đề ở đây là tâm quay bị lệch bởi khoảng cách dọc (trong ví dụ này) của điểm trên cùng và 2 điểm dưới cùng.

Vì vậy, làm thế nào để giải quyết vấn đề CỦA BẠN ... Tôi không biết loại UI nào bạn đang làm việc hoặc loại tài sản nào có thể sử dụng được trong đó - Nhưng giả sử bạn có thể sử dụng hình vuông .PNG với nền trong suốt.

Tôi chỉ đơn giản là lưu PNG ra ngoài với tâm xuyên tâm của ngôi sao được căn chỉnh với tâm đường chéo của nền, sau đó khi bạn xoay, nó sẽ giữ ở giữa.

Để tạo ra hình dạng này, tôi đã sử dụng Illustrator, không có cách nào rẻ, nhưng có sẵn các gói Vector miễn phí / giá rẻ. Tôi đã vẽ 2 vòng tròn, một cho đường kính ngoài của ngôi sao, một cho bên trong. Sau đó, tôi đặt ra 5 đường giao nhau giữa tâm và mỗi đường được xoay 72 độ so với nhau.

Sau đó, tôi đã vẽ các đường để kết nối các điểm bên ngoài với các điểm bên trong nơi các điểm này giao nhau với các vòng tròn. Đơn giản!

Như một vấn đề thực tế, như bạn đã nhận thấy, không có ngôi sao năm mặt đối xứng bằng nhau nào tồn tại, đáp ứng yêu cầu có trung tâm nơi đặt tâm của hộp sao. Hệ thống hình ảnh có xu hướng cắt bỏ phần thừa đi.

Trung tâm của một đối tượng là một điều phức tạp. Trung tâm của một hộp giới hạn là hiếm khi nơi trung tâm của một đối tượng. Thật không may, trung tâm là một khái niệm lan tỏa, do đó, bất kể người ta sẽ chọn làm số liệu trung tâm nào, đôi khi bạn sẽ hiểu sai. (thảo luận thêm về điều này có thể được tìm thấy ở đây .)

Bây giờ các hệ thống gần như phổ biến đi ra một cách dễ dàng và xác định trung tâm hộp giới hạn là trung tâm đối tượng. Điều đó tốt, nếu bạn muốn một trung tâm khác chỉ bao quanh đối tượng của bạn bằng một hộp hoặc vòng tròn vô hình, thì nó đủ lớn và là trung tâm nơi bạn muốn. Nó có thể chạm vào một cạnh nếu bạn thích nhưng điều đó không cần thiết (cũng không nhất thiết phải là đại diện nhỏ gọn nhất hoặc không có vấn đề).

Hình 1 : Xoay quanh trung tâm bb.

Ngoài ra, bạn có thể sử dụng các nhóm để tìm trung tâm. Về cơ bản lưu trữ vị trí của trung tâm, vì vậy bây giờ nó không còn quan trọng hình dạng của hình ảnh. Và đây là một ví dụ SVG trực tiếp về việc sử dụng phương pháp nhóm.

Dù bạn có vẻ dễ dàng hơn, phương pháp sau này nhỏ gọn hơn trong các trường hợp phức tạp hoặc trường hợp bạn coi trung tâm nằm ở rìa ảnh, vì bạn chỉ cần lưu trữ 2 phao. Trong khi đó, nếu bạn có một bitmap với nhiều không gian trống, bạn sẽ lãng phí nhiều bộ nhớ hơn.

Bạn có thể sử dụng SVG cơ bản này để tạo một trình duyệt trong trình duyệt của mình, không yêu cầu công cụ nào khác:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 100 100">
    <defs> 
        <!-- change the two 20 values to make rays thicker or thinner -->
        <path id="ray" d="M-20,0 L0,-50 L20,0 Z"/>
    </defs>

    <g style="stroke:none; fill: black" transform="translate(50,50)">
        <!-- five points of star -->
        <use xlink:href="#ray"/>
        <use transform="rotate(72)" xlink:href="#ray"/>
        <use transform="rotate(144)" xlink:href="#ray"/>
        <use transform="rotate(216)" xlink:href="#ray"/>
        <use transform="rotate(288)" xlink:href="#ray"/>
        <!-- star will be centred on this circle in the green bounding box -->
        <circle r="1" fill="red" stroke="none"/>
        <rect x="-50" y="-50" width="100" height="100" fill="none" stroke="green"/>
    </g>

</svg>

Nó định nghĩa một hình tam giác để sử dụng làm tia, tạo ra năm bản sao của nó ở góc xoay 72 độ (360/5) xung quanh điểm trung tâm của hình vuông.

Vẽ một vòng tròn, sau đó vẽ một hợp âm không đi qua trung tâm. Sau đó nhóm chúng và xoay nhóm qua 72 độ, gấp bốn lần, sao chép nó mỗi lần. Voila, một ngôi sao. Bây giờ bạn có thể hủy nhóm tất cả các nhóm của mình, phóng to và tham gia các dòng tại mỗi điểm và xóa các dòng dư.

Vấn đề bạn gặp phải đó là hình vuông giới hạn không nằm ở trung tâm của ngôi sao. Để khắc phục điều này, bạn chỉ cần giữ một trong các vòng tròn ban đầu, làm cho nó trở nên vô hình bằng cách không cho nó đột quỵ và điền vào, và nhóm nó với ngôi sao. Hộp giới hạn xung quanh vòng tròn này bây giờ sẽ đồng tâm với ngôi sao của bạn và bạn có thể xoay nó vào nội dung trái tim của bạn.

Sử dụng ứng dụng Mac Phác thảo, hành động 'Chèn hình -> Sao' dường như thực hiện chính xác những gì tôi yêu cầu khi kéo ban đầu. Chỉ cần chắc chắn rằng bạn không thay đổi kích thước nó! Bạn thậm chí có thể đặt bán kính bên trong. Tôi đã sử dụng 38%.