From 8dbaf328a57bcd6a3d4df3b365f3a2e20b731a07 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Thu, 22 Dec 2022 16:14:52 +0800 Subject: [PATCH] =?UTF-8?q?(improve)=E5=B0=86=E6=97=B6=E9=92=9F=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84=E5=9B=BE=E7=89=87=E4=BB=8Esvg=E6=9B=BF?= =?UTF-8?q?=E6=8D=A2=E6=88=90png=EF=BC=8C=E6=8F=90=E5=8D=87=E6=8A=97?= =?UTF-8?q?=E9=94=AF=E9=BD=BF=E6=95=88=E6=9E=9C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 17 ++++++++++++----- src/components/clock/README.md | 15 +++++++++++++++ src/components/clock/clock-style.ts | 12 +++++++----- src/components/clock/resources/dark_hour.png | Bin 0 -> 715 bytes src/components/clock/resources/dark_hour.svg | 4 ++++ src/components/clock/resources/dark_minute.png | Bin 0 -> 1164 bytes src/components/clock/resources/dark_minute.svg | 4 ++++ src/components/clock/resources/light_hour.png | Bin 0 -> 395 bytes src/components/clock/resources/light_hour.svg | 4 ++++ .../clock/resources/light_minute.png | Bin 0 -> 1127 bytes .../clock/resources/light_minute.svg | 4 ++++ src/components/clock/resources/second.png | Bin 0 -> 214 bytes src/components/clock/resources/second.svg | 4 ++++ src/components/clock/resources/svg2png.sh | 9 +++++++++ src/components/clock/svg/dark_hour.svg | 3 --- src/components/clock/svg/dark_minute.svg | 3 --- src/components/clock/svg/light_hour.svg | 3 --- src/components/clock/svg/light_minute.svg | 3 --- src/components/clock/svg/second.svg | 3 --- 19 files changed, 63 insertions(+), 25 deletions(-) create mode 100644 src/components/clock/resources/dark_hour.png create mode 100644 src/components/clock/resources/dark_hour.svg create mode 100644 src/components/clock/resources/dark_minute.png create mode 100644 src/components/clock/resources/dark_minute.svg create mode 100644 src/components/clock/resources/light_hour.png create mode 100644 src/components/clock/resources/light_hour.svg create mode 100644 src/components/clock/resources/light_minute.png create mode 100644 src/components/clock/resources/light_minute.svg create mode 100644 src/components/clock/resources/second.png create mode 100644 src/components/clock/resources/second.svg create mode 100755 src/components/clock/resources/svg2png.sh delete mode 100644 src/components/clock/svg/dark_hour.svg delete mode 100644 src/components/clock/svg/dark_minute.svg delete mode 100644 src/components/clock/svg/light_hour.svg delete mode 100644 src/components/clock/svg/light_minute.svg delete mode 100644 src/components/clock/svg/second.svg 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 0000000000000000000000000000000000000000..d5effae1af16d90b62ed5a53f187cd0910295f81 GIT binary patch literal 715 zcmV;+0yO=JP)+k$kPHPXRzg zK7Q|hO`|I`k8vroA2_f7YDTbw(p3 zH48ZB4nW(svp~}{2cRg5DZ>DO#bQzRz<$4k!LmvNz@l*ejXPGD1<;Ke z^Rl9wTX7cUDO?1|I~o>+3m**_Jm6>_EWoWocTp4upitF?Y`5F1<#PGU0HA4_E5?h$ z63#itcu`oQZCl59QCOlVijtO5A7j7YJ6a}pqTpzmdND{kS}v0qA%v2~?-{`DnWN>T zCJHV~fuv&yAvLM87(yg@H3;OA5_(M84B-3RmFS%3Bbdd;+v|f9#ce= + + \ 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 0000000000000000000000000000000000000000..fb5814b127acca4b1763bd38c0478cc1ea35bd8c GIT binary patch literal 1164 zcmV;71atd|P)1^@s6(1HlE00004b3#c}2nYxW zd>^n9xXk0DF<`)9x)hT?8{d+q=_U(`^tXopd|fZ{K^} z)iZCJ5Y^@7-o5(n{QP_!#xya&%};+&=-1JuZ{6%f0DKcJaQNrq z;(`JF0*6I-+I@Eb_~7y5cL6#b0YImZ9({O!1h}`I%Xn~CZMzx18vx#Kvj9EXrT}dg z;9D63bk<}6v*^cm0PpjX)F%My@_?op14L^XoCV-YNvbJ;W&sT+B*C%4;Kl&9Oe4i$ zNJ84QA&C>F!4^YmmXHT95|Ri!%K&B;|x8HfAYp+L|S#Bq2m zz?9xV`7KHqZ&7m{k_%_dlBP}nhqDB#>?Nc<80%0giK;y$0hWg(!0?a;9E2?saD9E< z03ZWEi^akXfaP*&$pHY|-rmXp*laeF0Po-10owN7BtTE@b^w2zPh+7%#A5((Kz8$l zT2r^dItDM34D&vfF#xEM_d@v?AU>b>La8(nLo>|~QdtMEg2|xC?EtVIxo^whTnsP* z;*KJc?)=Nd-HO z`Y{}%ZAlbMnw}-@Q(14?yswTKxPW2Lv>C2;6#ru3;)s?fK+G_0I`mubp@c!>ZY}W; zuY;Aw1`5=zG=RP4n*`8aFO`_4$TXFBh$U&kI-u6W{w$RMsB(*Y5ML zrvC?k)&l4)C8;U_a0P%yRf!gh#caKGcLe~fUf;}kyFVJ_;kG>~20U1;g!P@j zivip1vG8%5KYcr_w%rI@r*DU)^H$h8eLF1gMK~m_A_m_IQ_<$>ih&ucajrCCP$ygz zO!{in3m4^#z~H=ad|*~6DSuoyMtI@)z-*d#IQ=k1}RpGKE6Ev}Kd|);? z9<>Zi!dmc99~f#qu&QuTFc}amTo!#|Nd@65f(UB`1C)eI0^%^9A&iPGN?vDG)2d9u zC21@aD})PEK*sr7O_g=wr)gl-)wyS0XaNSMpgSSVqwkc3(f z&`JQ23YSFC9RXGDX+W52JW%IhJvngDL@QR{Ww|1K$wauSV7THV*Iog5Q84_MKmYiB zK>+al`A_eo(Vqc)l>TA-*1Go7XJ= + + \ 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 0000000000000000000000000000000000000000..5383796b5fb0afa4412cb07e1b8cbf5030854fda GIT binary patch literal 395 zcmV;60d)R}P)a;O8qLj!Kg0CU$N z6sP9W9}p^RmG&Fy9y$y#QuiH3S$dR_rVjro`aWcml#~xe(E^a9xlz0Pl}kTBo5EJ< z)S)wAfE}VE#Q@QfhFW?$OKpHl1W*`B=Lq0rB)vueZvqnFBk+OX{yrp + + \ 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 0000000000000000000000000000000000000000..385b3d91e2f304964c2d85210f72e3653b6aff61 GIT binary patch literal 1127 zcmV-t1ep7YP)1^@s6(1HlE00004b3#c}2nYxW zdACHxsXBBOoo@SGz4xkX=iLyB zdiqoj&(go&0(1ueAad_oIR575O*+qKni6m(tGfVwIsAg?>oZwJ0AJ-_asEL>7=ll6 zu>_xq2=4)Y{{5df0o>RF05^X6?d2PLfb=@V%HeI3;t64y5H~Rol zI!NLQr9?ge8U+xjLP_f&HGuT9fF||(fF@i$rFj4Z6_Xh6Iq)pljKxH3PfO`&pN^XGrYScwHm6LT!4<1MZfD{0UNEiSoC#qloz_VxD zGYkOd=g$`bo6X-NpzGoypugUZfOI&Ym2%~Xw{Ra6X0d~$S7QfhmMOKn zGYkMR88qzD&bEUReFjRxC8cf=fY6mL89GcTX^-52QVCF!%)lrVfS@GGu|)xZh0-pH znkgZ8J4{4t&$nIW$1(!|vl1HyM7m;1C@EN=l{$ zf^%?F4P+55&bu_F1jCBLx1xEtT=G+EdcFM`yp-GYFaR16A$t5+S{$x6 z1_0KlM=f`6|6!rCt#=SPtq;tAx7MeTkGjST=(;9yf3O^Va`guxa_Z~=={a(aW|m56 z6FC{;+t8um$dr_S$1W5Jw`|Euxtc_g%NJ&gltLF-l$U9H0HNrjghY{zUoksM6j>}u zCIeFPQ3`^{!9$5DvMKKk2#Tz}#MuL+$d)uVQbJ^5y9O4DYO!$lWI)U-3Z$0V_RYPeBox^aL5Ct-#wAMx9XO@PrU;tP6GbM+90-UkrX-VF zATkUQbZjA)a>;XB5!o0)w|}1ynM@HhHxQ>wZVkYt0B%ZhzI-s3tQmqQ4oXiLMEA{v z1oufq!Y{wBz7yd6h4bIPd+X>UCZhhe;A4P(oINV|p-uRNh!O+9dnd<#u1~LjK)@Fu tJOZ!+up;0gfX~-2jy}A7`}i*a_zzdUdkq2>7ZCse002ovPDHLkV1l?~-v$5x literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..b50e712e1b7c11a745d89c63f40ae7cd9a60b0f2 GIT binary patch literal 214 zcmeAS@N?(olHy`uVBq!ia0vp^EI_=9gAGV_J%9HABv9<+8NvYsH5@4&Kt5-IM`SSr z1K$x4W}K?cCk+&oEOCt}3C>R|DNig)WhgH%*UQYyE>2D?NY%?PN}v7CMhd7X*we)^ z#G~`=2}8jK0}+;sd+m2Hd5-6AUDH*qRR}{80W<&Y~-!elF{r5}E*q CbV0uW literal 0 HcmV?d00001 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 @@ - - -