利休纹章蓝图
将上传的参考图像或文字概念,转化为极简主义的纹章徽章和日本家纹图案,并以建筑风格的圆规与直尺构造图纸形式呈现,所有输出均为纯SVG格式。每个输出都包含一个中央半透明剪影,叠加其同步的几何构造圆和延伸切线,一个渐变的毫米网格,一个简洁的设计概念说明,以及右下角的一个实心成品纹章预览。
捆绑资源
assets/rikyu_origami_crane_kamon.svg:完整的参考SVG海报,展示了折纸灵感翱翔鹤家纹,包括渐变的10像素/50像素毫米网格、<defs><g id="crest-shape">双状态实例化、同步的密切圆及其半径标注、延伸的直尺射线、Rikyu页眉标记和编辑概念页脚。scripts/build_crane_svg.py:参考Python生成器脚本,演示如何从单个原始构造注册表计算精确的圆弧端点(x = cx + r * cos(theta),y = cy + r * sin(theta))、真正的连续螺旋切口以及延伸的切线/正割线投影(P1 +/- 1200 * u)。
使用时机
- 用户上传图像(照片、雕像、动物、物体或参考海报)并要求将其转换或复制为利休风格的SVG几何草图或构造蓝图。
- 用户想要一个利休风格的几何构造海报、日本家纹蓝图或黄金比例徽标表格(SVG格式)。
- 用户要求设计动物、神话生物、植物图案或抽象符号,并带有可见的圆规与直尺构造线和圆。
步骤
1. 将输入图像或概念解构为几何基元
在编写SVG路径之前,先从上传的图像或主题中提取底层的数学骨架:
-
选择框架原型:
- 封闭圆形家纹:将主体包裹在外圆环内(
r="165"至r="185"),适用于有翼、盘绕、旋转或回旋的图案(例如日本桥有翼麒麟或assets/rikyu_origami_crane_kamon.svg中的折纸翱翔鹤)。 - 独立纹章徽章:将主体锚定在坚实的水平基线上(相对于中心
y="120"),并围绕一个主要对角轴线构建,适用于站立的动物、雕像或建筑形式(例如岩石上的咆哮雄狮)。
- 封闭圆形家纹:将主体包裹在外圆环内(
-
提炼为扁平的最小团块:将照片的阴影和复杂纹理转换为4到8个高对比度、扁平的几何剪影岛,由均匀的负空间通道(全尺寸下
6px至10px宽)分隔,而不是内部的草图线条。 -
构建原始构造注册表:使用明确的圆弧(
cx, cy, r)定义每个主要轮廓曲线,并使用线端点(x1, y1, x2, y2)在局部坐标空间(以(0, 0)为中心,范围[-185, 185])中定义每个直边、基线或姿态轴线。首先记录这些坐标,以便剪影<path>和构造叠加层共享相同的几何形状。
2. 设置SVG画布和渐变的毫米网格
使用垂直海报宽高比(viewBox="0 0 800 1000"):
-
颜色令牌:
- 背景纸:
#F4F1EA - 子网格(
10px):#E2DDD3(stroke-width="0.6") - 主网格(
50px):#D2CCC0(stroke-width="0.9") - 外框和预览边框细线:
#C6C0B4(stroke-width="1") - 半透明中心图案:
fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25" - 构造圆和延伸射线:
stroke="#5C574F" stroke-width="0.75" stroke-opacity="0.72" - 实心成品纹章和页眉标记:
#3A3631 - 概念正文:
#6E6A63
- 背景纸:
-
网格淡出遮罩:对网格层应用一个
<linearGradient>遮罩(y1="0"到y2="1"),使毫米网格覆盖上部的蓝图区域(y="40"到y="740"),并在y="640"到y="750"之间逐渐淡出到纯色纸张背景。
3. 构建可复用的纹章 <g id="crest-shape">
在 <defs> 内部以 (0, 0) 为中心定义纹章几何形状为 <g id="crest-shape">,以便在无几何偏移的情况下实例化两次:
- 中央蓝图实例:通过
<use href="#crest-shape" transform="translate(400, 385)" fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"/>实例化。 - 右下角成品纹章实例:通过
<use href="#crest-shape" transform="translate(660, 860) scale(0.32)" fill="#3A3631" stroke="none"/>在预览框内实例化。
使用直接从原始构造注册表计算出的精确圆弧命令(A r r 0 large-arc-flag sweep-flag x y)和直线段(L x y)构建所有 <path> 元素(x = cx + r * cos(theta),y = cy + r * sin(theta))。使用复合路径(fill-rule="evenodd")或 <mask> 剪切路径来处理负空间通道和内部螺旋卷曲,以便半透明的中央状态和实心预览都能清晰渲染。
4. 渲染同步的构造圆和延伸射线
将所有构造几何图形裁剪到内部框架内(<clipPath id="blueprint-clip"><rect x="40" y="40" width="720" height="720"/></clipPath>),并将它们分组在 transform="translate(400, 385)" 下:
- 密切构造圆:对于原始构造注册表中的每个圆弧(通常14到24个圆,半径从
r="10"到r="240"),绘制<circle cx="..." cy="..." r="..." fill="none" stroke="#5C574F" stroke-width="0.82" stroke-opacity="0.76"/>。 - 中心十字准线和半径标注:在每个圆心
(cx, cy)处,渲染一个7px的十字准线(M cx-3.5 cy H cx+3.5 M cx cy-3.5 V cy+3.5),使用stroke="#4A463F" stroke-width="0.85",并在关键主圆上添加水平半径标注线(从(cx, cy)到(cx+r, cy))和一个6px的垂直端点标记。 - 延伸的正割线和切线:对于每条直边、基线和主要姿态轴线(通常12到20条线),将线方向向量
(dx, dy)投影到整个画布上(P1 - 1200 * u到P1 + 1200 * u,其中u是单位向量),以便clip-path="url(#blueprint-clip)"在框架边界处整齐地修剪每条射线。
5. 编排编辑页眉和页脚布局
-
外框:绘制
<rect x="40" y="40" width="720" height="920" fill="none" stroke="#C6C0B4" stroke-width="1"/>。 -
顶部页眉(
y="85"):将最小化的剪影图标和衬线品牌标题(默认Rikyu,或用户指定的标题)围绕x="400"居中放置。 -
左下角概念块(
x="76",y="810"):- 以大写无衬线字体渲染
CONCEPT(font-size="13",letter-spacing="2.8",font-weight="600",fill="#4A463F")。 - 在其下方(
y="846"),放置3到4行<text>,解释上传图像的姿态、主轴和扁平几何团块如何被提炼成纹章(使用中文、日文或英文,以匹配用户偏好)。
- 以大写无衬线字体渲染
-
右下角预览框:
- 绘制内嵌方形
<rect x="560" y="760" width="200" height="200" fill="#F4F1EA" stroke="#C6C0B4" stroke-width="1"/>。 - 渲染以
(660, 860)为中心的实心缩放#crest-shape。
- 绘制内嵌方形
注意事项
- 永远不要绘制任意的装饰性圆:每个构造圆和延伸射线必须在数学上与剪影的实际曲线或边缘相切或相交。直接从
(cx, cy, r)推导路径弧端点,使构造圆准确地贴合剪影轮廓。 - 避免在半透明组内使用不透明的纸色描边:如果使用
#F4F1EA描边来雕刻负空间,对组应用fill-opacity="0.38"会使描边在网格上显现出来。相反,应使用单独的闭合<path>岛、复合路径(fill-rule="evenodd")或SVG<mask>来处理负空间通道。 - 保持清晰的负空间宽度和开放的背景平衡:在全尺寸下(
[-185, 185])保持间隙在6px和10px之间,以便在右下角预览框中缩小到0.32时不会闭合,并在头部和尾部周围保留足够的开放负空间,使纹章看起来像一个标志性的徽章,而不是一个径向轮盘。