Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

/api/icon/getDynamicIcon 样式改进 #12949

Merged
merged 10 commits into from
Oct 28, 2024
Merged

/api/icon/getDynamicIcon 样式改进 #12949

merged 10 commits into from
Oct 28, 2024

Conversation

Achuan-2
Copy link
Member

@Achuan-2 Achuan-2 commented Oct 27, 2024

  1. type=7 倒数日图标文字始终垂直居中
    之前的代码里,倒数日的天数不同,所在的位置会有点不同
    通过在svg设置dominant-baseline:middle;和调整y的位置来让图标中的文字始终垂直居中
    修改前:倒数日天数少的时候,天数位置偏上,天数多的时候,天数位置偏下
    PixPin_2024-10-28_01-17-01

PixPin_2024-10-28_01-16-11

修改后效果:始终居中
PixPin_2024-10-28_01-15-15
PixPin_2024-10-28_01-15-33

	return fmt.Sprintf(`
    <svg id="dynamic_icon_type7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 504.5">
        <path id="bottom" d="M512,447.5c0,32-25,57-57,57H57c-32,0-57-25-57-57V120.5c0-31,25-57,57-57h398c32,0,57,26,57,57v327Z" style="fill: #ecf2f7;"/>
        <path id="top" d="M39,0h434c21.52,0,39,17.48,39,39v146H0V39C0,17.48,17.48,0,39,0Z" style="fill: %s;"/>
        <text id="year" transform="translate(46.1 78.92)" style="fill: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei'; font-size: 60px;">%d</text>
        <text id="day" transform="translate(43.58 148.44)" style="fill: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei'; font-size: 60px;">%s</text>
        <text id="passStr" transform="translate(400 148.44)" style="fill: #fff; text-anchor: middle;font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei'; font-size: 71.18px;">%s</text>
        <text id="diffDays" x="260" y="65%%" style="font-size: %.0fpx; fill: #66757f; text-anchor: middle; dominant-baseline:middle;font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei'; ">%s</text>
        <text id="dayStr" transform="translate(260 472.5)" style="font-size: 64px; text-anchor: middle; fill: #66757f; font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei';">%s</text>
    </svg>`, colorScheme.Primary, dateInfo["year"], dateInfo["date"], tipText, fontSize, diffDaysText, dayStr)
}
  1. type=8 文字图标fontsize动态变化规则改进,之前代码忘记改了,导致英文字体偏小,动态变化规则不对。并调整文字居中。
// Type 8: 文字图标
func generateTypeEightSVG(color, content string) string {
	colorScheme := getColorScheme(color)

	// 动态变化字体大小
	isChinese := regexp.MustCompile(`[\p{Han}]`).MatchString(content)
	var fontSize float64
	if isChinese {
		switch {
		case len([]rune(content)) == 1:
			fontSize = 320
		default:
				fontSize = 480 / float64(len([]rune(content)))
		}
	} else {
	switch {
		case len([]rune(content)) == 1:
			fontSize = 480
		case len([]rune(content)) == 2:
			fontSize = 300
		default:
				fontSize = 750 / float64(len([]rune(content)))
	}
	}

	return fmt.Sprintf(`
    <svg id="dynamic_icon_type8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 511">
        <path d="M39,0h434c20.97,0,38,17.03,38,38v412c0,33.11-26.89,60-60,60H60c-32.56,0-59-26.44-59-59V38C1,17.03,18.03,0,39,0Z" style="fill: %s;"/>
        <text x="50%%" y="55%%" style="font-size: %.2fpx; fill: #fff; text-anchor: middle; dominant-baseline:middle;font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei'; ">%s</text>
    </svg>
    `, colorScheme.Primary, fontSize, content)
}
  1. 所有type的水平居中文字使用x="50%"进行水平居中,效果比用像素px来指定好
  2. type=3 显示年月图标,年文字fontsize增加
  3. type=7 倒数日算法改进,支持超过106751天的倒数正数

@Achuan-2 Achuan-2 changed the title /api/icon/getDynamicIcon type=7 倒数日图标文字始终垂直居中 /api/icon/getDynamicIcon 样式改进 Oct 27, 2024
@88250 88250 merged commit c22a98b into siyuan-note:dev Oct 28, 2024
@Achuan-2 Achuan-2 deleted the patch-2 branch October 28, 2024 04:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants