danyang-match/scripts/generate_tabbar_icons.py

#!/usr/bin/env python3
"""生成善缘丹阳小程序底部导航 SVG 与透明 PNG。"""

from pathlib import Path
import math

from PIL import Image, ImageDraw

ROOT = Path(__file__).resolve().parents[1] / "miniapp" / "assets" / "tabbar"
COLORS = {"normal": "#999999", "active": "#E96B6B"}
TITLES = {
    "home": "爱心小屋",
    "discover": "双人缘分",
    "message": "爱心对话",
    "activity": "公益日历",
    "mine": "个人守护",
}

SVG_BODY = {
    "home": """<path d="M18 38 40.5 19 63 38"/><rect x="22" y="35" width="37" height="28" rx="7"/><path d="M31 63V49h19v14"/><path class="heart" d="M40.5 54c-5-3.4-7-5.4-7-8.2 0-2.3 1.8-4.1 4.1-4.1 1.3 0 2.4.6 2.9 1.6.6-1 1.7-1.6 3-1.6 2.3 0 4.1 1.8 4.1 4.1 0 2.8-2.1 4.8-7.1 8.2Z"/>""",
    "discover": """<circle cx="26" cy="29" r="7"/><circle cx="55" cy="29" r="7"/><path d="M14 55c1-10 6-15 15-15 4 0 7 1 9 3M67 55c-1-10-6-15-15-15-4 0-7 1-9 3"/><path class="heart" d="M40.5 58c-6.8-4.5-10-7.6-10-11.2 0-3 2.3-5.3 5.3-5.3 2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3 0 5.3 2.3 5.3 5.3 0 3.6-3.2 6.7-10 11.2Z"/>""",
    "message": """<path d="M23 60 15 66l2.4-11.2A12 12 0 0 1 14 46V29a12 12 0 0 1 12-12h29a12 12 0 0 1 12 12v17a12 12 0 0 1-12 12H27c-1.4 0-2.7.7-4 2Z"/><path class="heart" d="M40.5 48c-7.5-5-11-8.4-11-12.4 0-3.3 2.6-5.9 5.9-5.9 2.2 0 4.1 1.1 5.1 2.8 1.1-1.7 3-2.8 5.2-2.8 3.3 0 5.9 2.6 5.9 5.9 0 4-3.6 7.4-11.1 12.4Z"/>""",
    "activity": """<rect x="17" y="20" width="47" height="44" rx="8"/><path d="M17 33h47M28 15v10M53 15v10"/><path class="heart" d="M40.5 57c-6.5-4.3-9.5-7.2-9.5-10.7 0-2.9 2.3-5.1 5.1-5.1 1.9 0 3.5.9 4.4 2.4.9-1.5 2.5-2.4 4.5-2.4 2.8 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-9.6 10.7Z"/>""",
    "mine": """<circle cx="40.5" cy="27" r="8"/><path d="M20 64c.7-14 8-21 20.5-21S60.3 50 61 64"/><path class="heart" d="M40.5 59c-5.2-3.5-7.7-5.8-7.7-8.6 0-2.3 1.9-4.2 4.2-4.2 1.6 0 2.8.8 3.5 2 .8-1.2 2-2 3.6-2 2.3 0 4.2 1.9 4.2 4.2 0 2.8-2.5 5.1-7.8 8.6Z"/>""",
}


def svg(name: str, active: bool) -> str:
    color = COLORS["active" if active else "normal"]
    fill = color if active else "none"
    return f"""<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
  <title>{TITLES[name]}</title>
  <g stroke="{color}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">{SVG_BODY[name]}</g>
  <style>.heart{{fill:{fill};stroke:{color}}}.badge{{fill:white}}</style>
</svg>
"""


def heart_points(cx: float, cy: float, scale: float):
    points = []
    for degree in range(0, 361, 3):
        angle = math.radians(degree)
        x = scale * 16 * math.sin(angle) ** 3
        y = -scale * (13 * math.cos(angle) - 5 * math.cos(2 * angle) - 2 * math.cos(3 * angle) - math.cos(4 * angle))
        points.append((cx + x, cy + y))
    return points


def render(name: str, size: int, active: bool) -> Image.Image:
    aa = 4
    factor = size / 81 * aa
    image = Image.new("RGBA", (size * aa, size * aa), (255, 255, 255, 0))
    draw = ImageDraw.Draw(image)
    color = COLORS["active" if active else "normal"]
    width = max(1, round(4 * factor))
    p = lambda value: round(value * factor)

    def line(points):
        draw.line([(p(x), p(y)) for x, y in points], fill=color, width=width, joint="curve")

    def ellipse(box, fill=None):
        draw.ellipse(tuple(p(v) for v in box), outline=color, fill=fill, width=width)

    def rounded(box, radius):
        draw.rounded_rectangle(tuple(p(v) for v in box), radius=p(radius), outline=color, width=width)

    def heart(cx, cy, scale):
        points = [(p(x), p(y)) for x, y in heart_points(cx, cy, scale)]
        if active:
            draw.polygon(points, fill=color)
        else:
            draw.line(points, fill=color, width=width, joint="curve")

    if name == "home":
        line([(18, 38), (40.5, 19), (63, 38)])
        rounded((22, 35, 59, 63), 7)
        line([(31, 63), (31, 49), (50, 49), (50, 63)])
        heart(40.5, 47.5, .32)
    elif name == "discover":
        ellipse((19, 22, 33, 36))
        ellipse((48, 22, 62, 36))
        draw.arc((p(14), p(39), p(43), p(67)), 190, 315, fill=color, width=width)
        draw.arc((p(38), p(39), p(67), p(67)), 225, 350, fill=color, width=width)
        heart(40.5, 48, .48)
    elif name == "message":
        rounded((14, 17, 67, 58), 12)
        line([(27, 58), (15, 66), (18, 53)])
        heart(40.5, 37, .52)
    elif name == "activity":
        rounded((17, 20, 64, 64), 8)
        line([(17, 33), (64, 33)])
        line([(28, 15), (28, 25)])
        line([(53, 15), (53, 25)])
        heart(40.5, 48, .45)
    else:
        ellipse((32.5, 19, 48.5, 35))
        draw.arc((p(20), p(39), p(61), p(78)), 185, 355, fill=color, width=width)
        heart(40.5, 52, .36)

    return image.resize((size, size), Image.Resampling.LANCZOS)


def main():
    (ROOT / "svg").mkdir(parents=True, exist_ok=True)
    for name in TITLES:
        for active in (False, True):
            state = "-active" if active else ""
            (ROOT / "svg" / f"{name}{state}.svg").write_text(svg(name, active), encoding="utf-8")
            for size, suffix in ((81, ""), (162, "_2x"), (243, "_3x")):
                render(name, size, active).save(ROOT / f"{name}{state}{suffix}.png")
    print("已生成 10 个 SVG 和 30 个 PNG 导航图标")


if __name__ == "__main__":
    main()