@xingwangzhe/tags-cloud: موتور ابر برچسب سهبعدی چندحالته ساختهشده بر ریاضیات محض
GitHub: xingwangzhe/tags-cloud · دمو: tagscloud.needhelp.icu · npm: @xingwangzhe/tags-cloud · MIT
ابر برچسب برای بیش از دو دهه جزء اصلی تجسم وب بوده. @xingwangzhe/tags-cloud بازتعریف کاملی از مفهوم ابر برچسب سهبعدی است که از پایه بازسازی شده.
بنیاد ریاضی: سه ستون رندرینگ سهبعدی
توزیع کره فیبوناچی
الگوریتم کره فیبوناچی توزیعی از نقاط تولید میکند که به طور قابل توجهی یکنواخت در سطح کره است. از نسبت طلایی (\varphi \approx 1.618) استفاده میکند. برای کره به شعاع (R) با (N) نقطه:
[ \phi_i = \arccos\left(-1 + \frac{2i + 1}{N}\right), \quad \theta_i = \sqrt{N\pi} \cdot \phi_i ]
چرخش سهبعدی: ضرب ماتریس
(R_y(\alpha)) و (R_x(\beta)) برای چرخش به ترتیب حول محورهای Y و X:
[ \begin{pmatrix} x’ \ y’ \ z’ \end{pmatrix} = R_y(\alpha) \begin{pmatrix} x \ y \ z \end{pmatrix} ]
طرحریزی پرسپکتیو
نسبت مقیاس: (\text{per} = \frac{2 \cdot \text{depth}}{2 \cdot \text{depth} + z})، کدورت: (\text{alpha} = \min(1, \max(0, \text{per}^2 - 0.25)))
شش نوع برچسب
متن، تصویر، SVG، HTML، ویدئو، Element—همگی با هم در یک فضای سهبعدی میچرخند.
| نوع | فرمت ورودی | رندرر |
|---|---|---|
| متن | string | Canvas 2D |
| تصویر | { type:“image”, src } | Canvas 2D |
| SVG | { type:“svg”, content } | DOM |
| HTML | { type:“html”, html } | DOM |
اندازه بسته
| فرمت | اندازه |
|---|---|
| ESM | ~۱۲KB |
| Gzip | ~۳KB |