diff --git a/package.json b/package.json index 57dc403..656dfef 100644 --- a/package.json +++ b/package.json @@ -36,10 +36,13 @@ "command": "node tasks/esbuild-packages.js", "files": [ "tasks/esbuild-packages.js", - "src/components/**.ts", - "src/lib/**.ts" + "src/components/**/*.ts", + "src/lib/**/*.ts" ], - "output": [] + "output": [], + "dependencies": [ + "build-ts-with-config" + ] }, "build-ts-with-config": { "command": "yarn tsc --build tsconfig-all.json", @@ -52,9 +55,13 @@ "command": "node ./tasks/build-widgets.js", "files": [ "tasks/build-widgets.js", - "src/widgets/**.ts" + "src/components/**/*.ts", + "src/widgets/**/*.ts" ], - "output": [] + "output": [], + "dependencies": [ + "build-ts-modules" + ] } }, "lint-staged": { diff --git a/src/components/clock/README.md b/src/components/clock/README.md index 071b554..69114b4 100644 --- a/src/components/clock/README.md +++ b/src/components/clock/README.md @@ -26,3 +26,18 @@ star-clock 属性： 时钟整体布局设计为自适应布局，在测试时只需在外层 div 中设置默认 width 和 height，可自适应显示时钟大小。 `html demo
` + +## SVG 平滑渲染 + +### SVG 的渲染模式: + +- auto, 默认。浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度，而非平滑度和速度。 +- optimizeSpeed，偏渲染速度。浏览器会关闭反锯齿模式。（速度快，适合界面快速加载，适合低配置） +- crispEdges，偏渲染锐利。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐，更加清晰锐利的边缘。（增加锐度，适合棱角分明的图标，例如直线，长方形等） +- geometricPrecision，偏渲染平滑。（增加平滑，适合曲线，圆形图标等） + +手动指定时的使用方式，添加`shape-rendering`属性及对应值: + +`` + +在 Firefox 平台上实测，像 clock 中使用的时针、分针、秒针，使用 svg+geometricPrecision 渲染时的效果离 png 仍有距离，锯齿感明显。 diff --git a/src/components/clock/clock-style.ts b/src/components/clock/clock-style.ts index 446f4bf..31ff55e 100644 --- a/src/components/clock/clock-style.ts +++ b/src/components/clock/clock-style.ts @@ -1,16 +1,18 @@ import {css, CSSResult, unsafeCSS} from 'lit' -const darkHour = unsafeCSS(new URL('./svg/dark_hour.svg', import.meta.url).href) +const darkHour = unsafeCSS( + new URL('./resources/dark_hour.png', import.meta.url).href +) const darkMinute = unsafeCSS( - new URL('./svg/dark_minute.svg', import.meta.url).href + new URL('./resources/dark_minute.png', import.meta.url).href ) const lightHour = unsafeCSS( - new URL('./svg/light_hour.svg', import.meta.url).href + new URL('./resources/light_hour.png', import.meta.url).href ) const lightMinute = unsafeCSS( - new URL('./svg/light_minute.svg', import.meta.url).href + new URL('./resources/light_minute.png', import.meta.url).href ) const sharedSecond = unsafeCSS( - new URL('./svg/second.svg', import.meta.url).href + new URL('./resources/second.png', import.meta.url).href ) export const sharedStyles: CSSResult = css` @media (prefers-color-scheme: light) { diff --git a/src/components/clock/resources/dark_hour.png b/src/components/clock/resources/dark_hour.png new file mode 100644 index 0000000..d5effae Binary files /dev/null and b/src/components/clock/resources/dark_hour.png differ diff --git a/src/components/clock/resources/dark_hour.svg b/src/components/clock/resources/dark_hour.svg new file mode 100644 index 0000000..fa34a0c --- /dev/null +++ b/src/components/clock/resources/dark_hour.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/components/clock/resources/dark_minute.png b/src/components/clock/resources/dark_minute.png new file mode 100644 index 0000000..fb5814b Binary files /dev/null and b/src/components/clock/resources/dark_minute.png differ diff --git a/src/components/clock/resources/dark_minute.svg b/src/components/clock/resources/dark_minute.svg new file mode 100644 index 0000000..8d5dae2 --- /dev/null +++ b/src/components/clock/resources/dark_minute.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/components/clock/resources/light_hour.png b/src/components/clock/resources/light_hour.png new file mode 100644 index 0000000..5383796 Binary files /dev/null and b/src/components/clock/resources/light_hour.png differ diff --git a/src/components/clock/resources/light_hour.svg b/src/components/clock/resources/light_hour.svg new file mode 100644 index 0000000..7e8fbe5 --- /dev/null +++ b/src/components/clock/resources/light_hour.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/components/clock/resources/light_minute.png b/src/components/clock/resources/light_minute.png new file mode 100644 index 0000000..385b3d9 Binary files /dev/null and b/src/components/clock/resources/light_minute.png differ diff --git a/src/components/clock/resources/light_minute.svg b/src/components/clock/resources/light_minute.svg new file mode 100644 index 0000000..b3f93f7 --- /dev/null +++ b/src/components/clock/resources/light_minute.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/components/clock/resources/second.png b/src/components/clock/resources/second.png new file mode 100644 index 0000000..b50e712 Binary files /dev/null and b/src/components/clock/resources/second.png differ diff --git a/src/components/clock/resources/second.svg b/src/components/clock/resources/second.svg new file mode 100644 index 0000000..85eb771 --- /dev/null +++ b/src/components/clock/resources/second.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/components/clock/resources/svg2png.sh b/src/components/clock/resources/svg2png.sh new file mode 100755 index 0000000..158d781 --- /dev/null +++ b/src/components/clock/resources/svg2png.sh @@ -0,0 +1,9 @@ +#!/bin/bash + +# inkscape 是一款 SVG 编辑工具 +# 安装方式: apt install inkscape +inkscape dark_hour.svg -e dark_hour.png +inkscape dark_minute.svg -e dark_minute.png +inkscape light_hour.svg -e light_hour.png +inkscape light_minute.svg -e light_minute.png +inkscape second.svg -e second.png \ No newline at end of file diff --git a/src/components/clock/svg/dark_hour.svg b/src/components/clock/svg/dark_hour.svg deleted file mode 100644 index c6b3577..0000000 --- a/src/components/clock/svg/dark_hour.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/clock/svg/dark_minute.svg b/src/components/clock/svg/dark_minute.svg deleted file mode 100644 index 94914e8..0000000 --- a/src/components/clock/svg/dark_minute.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/clock/svg/light_hour.svg b/src/components/clock/svg/light_hour.svg deleted file mode 100644 index 6710c67..0000000 --- a/src/components/clock/svg/light_hour.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/clock/svg/light_minute.svg b/src/components/clock/svg/light_minute.svg deleted file mode 100644 index 8578b0b..0000000 --- a/src/components/clock/svg/light_minute.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/clock/svg/second.svg b/src/components/clock/svg/second.svg deleted file mode 100644 index 94c66ef..0000000 --- a/src/components/clock/svg/second.svg +++ /dev/null @@ -1,3 +0,0 @@ - - -