655 lines
29 KiB
JavaScript
655 lines
29 KiB
JavaScript
/**
|
|
* 棋盘食材 · 仿真插画 SVG（渐变 + 高光 + 阴影，开心消消乐式 2.5D）
|
|
*/
|
|
import { svgToDataUrl } from '../utils/svgDataUrl.js'
|
|
|
|
function gid(key, suffix) {
|
|
return `f-${String(key).replace(/[^a-z0-9]/gi, '')}-${suffix}`
|
|
}
|
|
|
|
function wrap(key, body) {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">${body}</svg>`
|
|
}
|
|
|
|
function shadow(key) {
|
|
const id = gid(key, 'sh')
|
|
return `<filter id="${id}"><feDropShadow dx="0" dy="2.5" stdDeviation="2.2" flood-color="#1a1a2e" flood-opacity="0.28"/></filter>`
|
|
}
|
|
|
|
function shine(x, y, rx, ry) {
|
|
return `<ellipse cx="${x}" cy="${y}" rx="${rx}" ry="${ry}" fill="#fff" opacity="0.38"/>`
|
|
}
|
|
|
|
/** 圆形水果 */
|
|
function artRound(key, base, dark, light, extra = '') {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs>
|
|
<radialGradient id="${g}" cx="36%" cy="30%" r="68%">
|
|
<stop offset="0%" stop-color="${light}"/>
|
|
<stop offset="55%" stop-color="${base}"/>
|
|
<stop offset="100%" stop-color="${dark}"/>
|
|
</radialGradient>
|
|
${shadow(key)}
|
|
</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="36" rx="21" ry="23" fill="url(#${g})"/>
|
|
${shine(24, 28, 7, 5)}
|
|
<path d="M32 13 Q35 9 37 15" stroke="#5d4037" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
<ellipse cx="38" cy="15" rx="5.5" ry="3" fill="#66bb6a" transform="rotate(28 38 15)"/>
|
|
${extra}
|
|
</g>`)
|
|
}
|
|
|
|
/** 叶菜 */
|
|
function artLeafy(key, light, mid, dark) {
|
|
const g1 = gid(key, 'g1')
|
|
const g2 = gid(key, 'g2')
|
|
return wrap(key, `
|
|
<defs>
|
|
<linearGradient id="${g1}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${mid}"/>
|
|
</linearGradient>
|
|
<linearGradient id="${g2}" x1="0%" y1="100%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="${mid}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>
|
|
${shadow(key)}
|
|
</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M32 8 C18 18 14 34 20 48 C24 54 32 56 32 56 C32 56 40 54 44 48 C50 34 46 18 32 8Z" fill="url(#${g1})"/>
|
|
<path d="M32 14 C26 22 24 32 28 42 C30 46 32 48 32 48 C32 48 34 46 36 42 C40 32 38 22 32 14Z" fill="url(#${g2})" opacity="0.85"/>
|
|
${shine(26, 24, 6, 8)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 西兰花 */
|
|
function artBroccoli(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs>
|
|
<radialGradient id="${g}" cx="50%" cy="40%" r="55%">
|
|
<stop offset="0%" stop-color="#7cb342"/><stop offset="100%" stop-color="#33691e"/>
|
|
</radialGradient>
|
|
${shadow(key)}
|
|
</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<rect x="28" y="38" width="8" height="16" rx="3" fill="#558b2f"/>
|
|
<circle cx="22" cy="28" r="9" fill="url(#${g})"/><circle cx="32" cy="22" r="10" fill="url(#${g})"/>
|
|
<circle cx="42" cy="28" r="9" fill="url(#${g})"/><circle cx="32" cy="32" r="8" fill="#689f38"/>
|
|
${shine(28, 20, 5, 4)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 长条（黄瓜/香蕉/玉米） */
|
|
function artLong(key, base, dark, light, type = 'cucumber') {
|
|
const g = gid(key, 'g')
|
|
if (type === 'banana') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M18 46 Q14 30 28 14 Q38 8 46 16 Q52 24 44 38 Q36 52 22 50 Q16 48 18 46Z" fill="url(#${g})"/>
|
|
<path d="M24 42 Q20 32 30 20" stroke="${dark}" stroke-width="1.2" fill="none" opacity="0.5"/>
|
|
${shine(30, 26, 5, 3)}
|
|
</g>`)
|
|
}
|
|
if (type === 'corn') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${base}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="34" rx="14" ry="22" fill="url(#${g})"/>
|
|
<g fill="${dark}" opacity="0.55">${Array.from({ length: 5 }, (_, r) =>
|
|
Array.from({ length: 4 }, (_, c) =>
|
|
`<circle cx="${22 + c * 5}" cy="${20 + r * 5}" r="1.2"/>`
|
|
).join('')
|
|
).join('')}</g>
|
|
<path d="M32 10 L34 18 M32 10 L30 18" stroke="#558b2f" stroke-width="2" stroke-linecap="round"/>
|
|
${shine(26, 26, 5, 8)}
|
|
</g>`)
|
|
}
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="32" rx="10" ry="24" fill="url(#${g})" transform="rotate(-12 32 32)"/>
|
|
<ellipse cx="28" cy="22" rx="3" ry="5" fill="#fff" opacity="0.25" transform="rotate(-12 28 22)"/>
|
|
</g>`)
|
|
}
|
|
|
|
/** 茄子 */
|
|
function artEggplant(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="20%" y1="0%" x2="80%" y2="100%">
|
|
<stop offset="0%" stop-color="#9575cd"/><stop offset="100%" stop-color="#4527a0"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="38" rx="13" ry="20" fill="url(#${g})"/>
|
|
<path d="M32 18 Q34 12 32 8 Q30 12 32 18" fill="#558b2f"/>
|
|
${shine(26, 32, 5, 7)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 番茄 */
|
|
function artTomato(key) {
|
|
return artRound(key, '#e53935', '#b71c1c', '#ef5350',
|
|
'<path d="M24 16 Q32 12 40 16" stroke="#2e7d32" stroke-width="2.5" fill="none" stroke-linecap="round"/>')
|
|
}
|
|
|
|
/** 甜椒 */
|
|
function artPepper(key, color, dark) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="30%" y1="0%" x2="70%" y2="100%">
|
|
<stop offset="0%" stop-color="${color}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M32 10 Q26 14 24 24 Q22 38 28 48 Q32 54 36 48 Q42 38 40 24 Q38 14 32 10Z" fill="url(#${g})"/>
|
|
<path d="M30 12 Q32 8 34 12" stroke="#33691e" stroke-width="2" fill="none"/>
|
|
${shine(28, 26, 5, 6)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 洋葱 */
|
|
function artOnion(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="45%" cy="35%" r="60%">
|
|
<stop offset="0%" stop-color="#ffe0b2"/><stop offset="100%" stop-color="#bc8f5a"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="36" rx="18" ry="20" fill="url(#${g})"/>
|
|
<path d="M32 16 Q28 22 32 28 Q36 22 32 16" fill="#d7ccc8"/>
|
|
${shine(24, 30, 6, 5)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 葡萄串 */
|
|
function artGrapes(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="65%">
|
|
<stop offset="0%" stop-color="#ba68c8"/><stop offset="100%" stop-color="#6a1b9a"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M32 10 L32 18" stroke="#558b2f" stroke-width="2"/>
|
|
<ellipse cx="32" cy="22" rx="4" ry="4.5" fill="url(#${g})"/>
|
|
<ellipse cx="26" cy="28" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="38" cy="28" rx="4" ry="4.5" fill="url(#${g})"/>
|
|
<ellipse cx="22" cy="34" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="32" cy="34" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="42" cy="34" rx="4" ry="4.5" fill="url(#${g})"/>
|
|
<ellipse cx="28" cy="40" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="36" cy="40" rx="4" ry="4.5" fill="url(#${g})"/>
|
|
${shine(28, 24, 3, 2)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 樱桃 */
|
|
function artCherry(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="35%" cy="30%" r="70%">
|
|
<stop offset="0%" stop-color="#f06292"/><stop offset="100%" stop-color="#880e4f"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M32 12 Q24 18 22 26 M32 12 Q40 18 42 26" stroke="#558b2f" stroke-width="2" fill="none"/>
|
|
<circle cx="22" cy="32" r="9" fill="url(#${g})"/><circle cx="42" cy="32" r="9" fill="url(#${g})"/>
|
|
${shine(19, 29, 3, 2)}${shine(39, 29, 3, 2)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 草莓 */
|
|
function artStrawberry(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="50%" y1="0%" x2="50%" y2="100%">
|
|
<stop offset="0%" stop-color="#ef5350"/><stop offset="100%" stop-color="#c62828"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M32 14 Q18 28 22 46 Q26 54 32 56 Q38 54 42 46 Q46 28 32 14Z" fill="url(#${g})"/>
|
|
<path d="M22 16 Q32 10 42 16 Q32 20 22 16Z" fill="#43a047"/>
|
|
${shine(26, 28, 4, 6)}
|
|
<g fill="#ffeb3b" opacity="0.85">${[28, 34, 38, 30, 36].map((x, i) =>
|
|
`<circle cx="${x}" cy="${32 + (i % 3) * 5}" r="1.1"/>`
|
|
).join('')}</g>
|
|
</g>`)
|
|
}
|
|
|
|
/** 豆类 */
|
|
function artBeans(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#d7ccc8"/><stop offset="100%" stop-color="#8d6e63"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="24" cy="32" rx="9" ry="12" fill="url(#${g})" transform="rotate(-20 24 32)"/>
|
|
<ellipse cx="36" cy="30" rx="9" ry="12" fill="url(#${g})" transform="rotate(15 36 30)"/>
|
|
<ellipse cx="32" cy="42" rx="9" ry="12" fill="url(#${g})" transform="rotate(-5 32 42)"/>
|
|
</g>`)
|
|
}
|
|
|
|
/** 饮品杯 */
|
|
function artCup(key, liquid, cup = '#eceff1', type = 'glass') {
|
|
const g = gid(key, 'g')
|
|
if (type === 'bottle') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="${liquid}"/><stop offset="100%" stop-color="${cup}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<rect x="24" y="14" width="16" height="6" rx="2" fill="#b0bec5"/>
|
|
<path d="M22 20 L24 52 Q32 56 40 52 L42 20Z" fill="url(#${g})"/>
|
|
${shine(28, 30, 4, 10)}
|
|
</g>`)
|
|
}
|
|
if (type === 'wine') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="100%" x2="0%" y2="0%">
|
|
<stop offset="0%" stop-color="#4a0e16"/><stop offset="100%" stop-color="${liquid}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M28 18 L26 38 Q32 46 38 38 L36 18Z" fill="url(#${g})"/>
|
|
<rect x="30" y="38" width="4" height="12" fill="#cfd8dc"/>
|
|
<ellipse cx="32" cy="52" rx="8" ry="2" fill="#cfd8dc"/>
|
|
</g>`)
|
|
}
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="${liquid}"/><stop offset="100%" stop-color="${cup}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M18 24 L20 48 Q32 54 44 48 L46 24Z" fill="#eceff1" stroke="#b0bec5" stroke-width="1"/>
|
|
<path d="M20 28 L22 46 Q32 50 42 46 L44 28Z" fill="url(#${g})"/>
|
|
${shine(26, 32, 4, 8)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 蘑菇 */
|
|
function artMushroom(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="40%" cy="35%" r="65%">
|
|
<stop offset="0%" stop-color="#a1887f"/><stop offset="100%" stop-color="#5d4037"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<rect x="28" y="34" width="8" height="16" rx="3" fill="#efebe9"/>
|
|
<ellipse cx="32" cy="30" rx="18" ry="14" fill="url(#${g})"/>
|
|
<ellipse cx="24" cy="26" rx="3" ry="2" fill="#efebe9" opacity="0.7"/>
|
|
<ellipse cx="36" cy="24" rx="2.5" ry="1.8" fill="#efebe9" opacity="0.7"/>
|
|
${shine(24, 24, 6, 4)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 芹菜 */
|
|
function artCelery(key) {
|
|
return artLeafy(key, '#aed581', '#7cb342', '#558b2f')
|
|
}
|
|
|
|
/** 四季豆 */
|
|
function artGreenBean(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#9ccc65"/><stop offset="100%" stop-color="#33691e"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="26" cy="32" rx="5" ry="18" fill="url(#${g})" transform="rotate(-15 26 32)"/>
|
|
<ellipse cx="38" cy="34" rx="5" ry="18" fill="url(#${g})" transform="rotate(12 38 34)"/>
|
|
</g>`)
|
|
}
|
|
|
|
/** 饭碗 */
|
|
function artRiceBowl(key, rice, bowl = '#e0e0e0', dark = '#bdbdbd') {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="${rice}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M12 36 Q32 58 52 36 L48 48 Q32 56 16 48Z" fill="${bowl}"/>
|
|
<ellipse cx="32" cy="36" rx="20" ry="8" fill="url(#${g})"/>
|
|
${shine(24, 34, 6, 3)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 薯类 */
|
|
function artRoot(key, base, dark, light) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="40%" cy="35%" r="65%">
|
|
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="36" rx="16" ry="20" fill="url(#${g})"/>
|
|
<path d="M22 28 Q32 22 42 28" stroke="${base}" stroke-width="1.5" fill="none" opacity="0.4"/>
|
|
${shine(24, 30, 5, 6)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 肉类 */
|
|
function artMeat(key, base, dark, type = 'steak') {
|
|
const g = gid(key, 'g')
|
|
if (type === 'chicken') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="30" cy="38" rx="14" ry="16" fill="url(#${g})"/>
|
|
<ellipse cx="38" cy="28" rx="8" ry="10" fill="url(#${g})"/>
|
|
<circle cx="42" cy="24" r="3" fill="#efebe9"/>
|
|
${shine(26, 32, 5, 6)}
|
|
</g>`)
|
|
}
|
|
if (type === 'fish') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="34" rx="20" ry="12" fill="url(#${g})"/>
|
|
<path d="M52 34 L60 28 L60 40Z" fill="${dark}"/>
|
|
<circle cx="22" cy="32" r="2.5" fill="#fff"/>
|
|
${shine(28, 30, 6, 4)}
|
|
</g>`)
|
|
}
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M16 40 Q20 22 36 20 Q50 20 48 38 Q46 50 32 52 Q18 52 16 40Z" fill="url(#${g})"/>
|
|
<ellipse cx="28" cy="32" rx="4" ry="3" fill="#efebe9" opacity="0.5"/>
|
|
${shine(26, 28, 6, 4)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 虾/蟹 */
|
|
function artSeafood(key, type = 'shrimp') {
|
|
const g = gid(key, 'g')
|
|
if (type === 'crab') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ff7043"/><stop offset="100%" stop-color="#bf360c"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="36" rx="14" ry="12" fill="url(#${g})"/>
|
|
<circle cx="28" cy="32" r="2" fill="#fff"/><circle cx="36" cy="32" r="2" fill="#fff"/>
|
|
<path d="M18 30 L10 24 M18 38 L10 44 M46 30 L54 24 M46 38 L54 44" stroke="#bf360c" stroke-width="2.5" stroke-linecap="round"/>
|
|
</g>`)
|
|
}
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ff8a65"/><stop offset="100%" stop-color="#e64a19"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M16 40 Q28 16 48 28 Q42 36 38 44 Q28 52 16 40Z" fill="url(#${g})"/>
|
|
${shine(30, 28, 5, 4)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 菠萝 */
|
|
function artPineapple(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffca28"/><stop offset="100%" stop-color="#f57f17"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="38" rx="16" ry="18" fill="url(#${g})"/>
|
|
<g stroke="#e65100" stroke-width="1" opacity="0.45">${[-8, 0, 8].map(o =>
|
|
`<line x1="${24 + o}" y1="24" x2="${24 + o}" y2="52"/>`
|
|
).join('')}</g>
|
|
<path d="M24 18 L32 8 L40 18" fill="#43a047"/>
|
|
${shine(26, 32, 5, 6)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 奇异果 */
|
|
function artKiwi(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#dce775"/><stop offset="60%" stop-color="#9ccc65"/><stop offset="100%" stop-color="#558b2f"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<circle cx="32" cy="34" r="18" fill="#8d6e63"/>
|
|
<circle cx="32" cy="34" r="14" fill="url(#${g})"/>
|
|
<circle cx="32" cy="34" r="4" fill="#fff" opacity="0.5"/>
|
|
${shine(26, 28, 4, 3)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 蜜瓜 */
|
|
function artMelon(key) {
|
|
return artRound(key, '#aed581', '#689f38', '#c5e1a5', '')
|
|
}
|
|
|
|
/** 蜂蜜 */
|
|
function artHoney(key) {
|
|
return artCup(key, '#ffb300', '#ff8f00', 'bottle')
|
|
}
|
|
|
|
/** 面包类 */
|
|
function artBread(key, base, dark, type = 'loaf') {
|
|
const g = gid(key, 'g')
|
|
if (type === 'donut') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<circle cx="32" cy="34" r="18" fill="url(#${g})"/>
|
|
<circle cx="32" cy="34" r="7" fill="#fff5f5"/>
|
|
<path d="M20 28 Q32 18 44 28" stroke="#f48fb1" stroke-width="4" fill="none" stroke-linecap="round"/>
|
|
${shine(24, 28, 5, 4)}
|
|
</g>`)
|
|
}
|
|
if (type === 'mantou') {
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="70%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="38" rx="16" ry="14" fill="url(#${g})"/>
|
|
<path d="M18 34 Q32 26 46 34" stroke="${dark}" stroke-width="1" fill="none" opacity="0.3"/>
|
|
${shine(24, 32, 6, 4)}
|
|
</g>`)
|
|
}
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<rect x="14" y="22" width="36" height="28" rx="8" fill="url(#${g})"/>
|
|
${shine(22, 28, 8, 5)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 面条 */
|
|
function artNoodle(key, soup = '#d7ccc8') {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="${soup}"/><stop offset="100%" stop-color="#a1887f"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="32" cy="42" rx="20" ry="10" fill="#eceff1"/>
|
|
<ellipse cx="32" cy="38" rx="18" ry="8" fill="url(#${g})"/>
|
|
<path d="M20 36 Q26 32 32 36 Q38 40 44 36" stroke="#ffe082" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<path d="M22 40 Q30 44 38 40" stroke="#ffe082" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</g>`)
|
|
}
|
|
|
|
/** 南瓜 */
|
|
function artPumpkin(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="40%" cy="35%" r="65%">
|
|
<stop offset="0%" stop-color="#ffb74d"/><stop offset="100%" stop-color="#e65100"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<ellipse cx="24" cy="36" rx="10" ry="16" fill="url(#${g})"/>
|
|
<ellipse cx="32" cy="34" rx="11" ry="18" fill="url(#${g})"/>
|
|
<ellipse cx="40" cy="36" rx="10" ry="16" fill="url(#${g})"/>
|
|
<path d="M32 16 Q34 10 32 8" stroke="#558b2f" stroke-width="2.5" fill="none"/>
|
|
${shine(26, 28, 5, 6)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 薯条 */
|
|
function artFries(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffe082"/><stop offset="100%" stop-color="#f9a825"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M18 48 L22 24 L46 24 L50 48Z" fill="#ef5350"/>
|
|
${[26, 32, 38, 44].map(x => `<rect x="${x}" y="18" width="4" height="22" rx="2" fill="url(#${g})"/>`).join('')}
|
|
</g>`)
|
|
}
|
|
|
|
/** 西瓜 */
|
|
function artWatermelon(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ef5350"/><stop offset="100%" stop-color="#c62828"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M12 40 Q32 8 52 40 Q32 56 12 40Z" fill="#2e7d32"/>
|
|
<path d="M16 40 Q32 14 48 40 Q32 52 16 40Z" fill="url(#${g})"/>
|
|
${[24, 32, 40].map(x => `<circle cx="${x}" cy="36" r="1.2" fill="#212121"/>`).join('')}
|
|
${shine(24, 30, 4, 3)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 糖果 */
|
|
function artCandy(key, base, dark, type = 'lollipop') {
|
|
const g = gid(key, 'g')
|
|
if (type === 'wrap') {
|
|
return wrap(key, `
|
|
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</linearGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<rect x="20" y="22" width="24" height="20" rx="4" fill="url(#${g})"/>
|
|
<path d="M20 26 L16 30 L20 34 M44 26 L48 30 L44 34" stroke="${dark}" stroke-width="2" fill="none"/>
|
|
</g>`)
|
|
}
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="35%" cy="30%" r="70%">
|
|
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<circle cx="32" cy="28" r="14" fill="url(#${g})"/>
|
|
<rect x="30" y="40" width="4" height="14" rx="2" fill="#eceff1"/>
|
|
${shine(26, 24, 4, 3)}
|
|
</g>`)
|
|
}
|
|
|
|
/** 糯米团 */
|
|
function artDango(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="70%">
|
|
<stop offset="0%" stop-color="#f8bbd0"/><stop offset="100%" stop-color="#ec407a"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<circle cx="22" cy="36" r="8" fill="#fff"/>
|
|
<circle cx="32" cy="32" r="8" fill="url(#${g})"/>
|
|
<circle cx="42" cy="36" r="8" fill="#fff"/>
|
|
<rect x="14" y="44" width="36" height="3" rx="1.5" fill="#8d6e63"/>
|
|
</g>`)
|
|
}
|
|
|
|
/** 爆米花 */
|
|
function artPopcorn(key) {
|
|
const g = gid(key, 'g')
|
|
return wrap(key, `
|
|
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="70%">
|
|
<stop offset="0%" stop-color="#fff9c4"/><stop offset="100%" stop-color="#fff176"/>
|
|
</radialGradient>${shadow(key)}</defs>
|
|
<g filter="url(#${gid(key, 'sh')})">
|
|
<path d="M16 48 L20 36 L48 36 L52 48Z" fill="#ef5350"/>
|
|
<circle cx="24" cy="30" r="7" fill="url(#${g})"/><circle cx="34" cy="24" r="8" fill="url(#${g})"/>
|
|
<circle cx="44" cy="30" r="7" fill="url(#${g})"/><circle cx="32" cy="32" r="6" fill="url(#${g})"/>
|
|
</g>`)
|
|
}
|
|
|
|
const FOOD_ART = {
|
|
lettuce: () => artLeafy('lettuce', '#c5e1a5', '#81c784', '#388e3c'),
|
|
broccoli: () => artBroccoli('broccoli'),
|
|
apple: () => artRound('apple', '#e53935', '#b71c1c', '#ef5350'),
|
|
cucumber: () => artLong('cucumber', '#66bb6a', '#2e7d32', '#a5d6a7'),
|
|
eggplant: () => artEggplant('eggplant'),
|
|
tomato: () => artTomato('tomato'),
|
|
pepper: () => artPepper('pepper', '#43a047', '#1b5e20'),
|
|
onion: () => artOnion('onion'),
|
|
pear: () => artRound('pear', '#c0ca33', '#827717', '#dce775', ''),
|
|
orange: () => artRound('orange', '#fb8c00', '#e65100', '#ffb74d'),
|
|
peach: () => artRound('peach', '#ff8a65', '#e64a19', '#ffab91'),
|
|
cherry: () => artCherry('cherry'),
|
|
grape: () => artGrapes('grape'),
|
|
strawberry: () => artStrawberry('strawberry'),
|
|
soybean: () => artBeans('soybean'),
|
|
milk: () => artCup('milk', '#eceff1', '#b0bec5'),
|
|
tea: () => artCup('tea', '#a1887f', '#6d4c41'),
|
|
mushroom: () => artMushroom('mushroom'),
|
|
celery: () => artCelery('celery'),
|
|
greenBean: () => artGreenBean('greenBean'),
|
|
brownRice: () => artRiceBowl('brownRice', '#bcaaa4', '#8d6e63', '#6d4c41'),
|
|
sweetPotato: () => artRoot('sweetPotato', '#c75b39', '#8d2600', '#e57373'),
|
|
taro: () => artRoot('taro', '#b39ddb', '#5e35b1', '#d1c4e9'),
|
|
fish: () => artMeat('fish', '#4fc3f7', '#0277bd', 'fish'),
|
|
chicken: () => artMeat('chicken', '#ffb74d', '#e65100', 'chicken'),
|
|
beef: () => artMeat('beef', '#c0504d', '#7f0000', 'steak'),
|
|
leanMeat: () => artMeat('leanMeat', '#b5654d', '#8d4000', 'steak'),
|
|
shrimp: () => artSeafood('shrimp', 'shrimp'),
|
|
crab: () => artSeafood('crab', 'crab'),
|
|
banana: () => artLong('banana', '#fdd835', '#f9a825', '#fff176', 'banana'),
|
|
mango: () => artRound('mango', '#ffb300', '#ff6f00', '#ffca28'),
|
|
pineapple: () => artPineapple('pineapple'),
|
|
kiwi: () => artKiwi('kiwi'),
|
|
melon: () => artMelon('melon'),
|
|
honey: () => artHoney('honey'),
|
|
wine: () => artCup('wine', '#9b2c3b', '#4a0e16', 'wine'),
|
|
beer: () => artCup('beer', '#ffb300', '#ff8f00'),
|
|
coffee: () => artCup('coffee', '#6f4e37', '#3e2723'),
|
|
corn: () => artLong('corn', '#f9c513', '#f57f17', '#fff176', 'corn'),
|
|
udon: () => artNoodle('udon', '#d9b88f'),
|
|
whiteRice: () => artRiceBowl('whiteRice', '#f5f5f5', '#eeeeee', '#bdbdbd'),
|
|
whiteBread: () => artBread('whiteBread', '#d9a85c', '#a1887f', 'loaf'),
|
|
mantou: () => artBread('mantou', '#ece0c8', '#bcaaa4', 'mantou'),
|
|
youtiao: () => artBread('youtiao', '#d4943f', '#a1660a', 'loaf'),
|
|
donut: () => artBread('donut', '#e87fb0', '#ad1457', 'donut'),
|
|
popcorn: () => artPopcorn('popcorn'),
|
|
ramen: () => artNoodle('ramen', '#e0a96d'),
|
|
pumpkin: () => artPumpkin('pumpkin'),
|
|
bakedPotato: () => artFries('bakedPotato'),
|
|
watermelon: () => artWatermelon('watermelon'),
|
|
sugar: () => artCandy('sugar', '#ff79b0', '#c2185b', 'lollipop'),
|
|
maltose: () => artCandy('maltose', '#ffa726', '#e65100', 'wrap'),
|
|
soda: () => artCup('soda', '#c62828', '#880e0e', 'bottle'),
|
|
orangeJuice: () => artCup('orangeJuice', '#ff9f1c', '#e65100', 'bottle'),
|
|
stickyRice: () => artDango('stickyRice')
|
|
}
|
|
|
|
const imgCache = {}
|
|
|
|
/** 获取食材插画 data URL（带缓存） */
|
|
export function getFoodImg(key) {
|
|
if (imgCache[key]) return imgCache[key]
|
|
const builder = FOOD_ART[key]
|
|
if (!builder) return ''
|
|
imgCache[key] = svgToDataUrl(builder())
|
|
return imgCache[key]
|
|
}
|
|
|
|
export function warmUpFoodImgs(keys) {
|
|
keys.forEach((k) => getFoodImg(k))
|
|
}
|