feat(watermark): new component #2341
Conversation
Signed-off-by: Sepush <[email protected]>
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/tusimple/naive-ui/4tmDE98frZVx27SwWq1uP9gEWEx4 |
Codecov Report
@@ Coverage Diff @@
## main #2341 +/- ##
==========================================
+ Coverage 64.22% 64.27% +0.04%
==========================================
Files 936 942 +6
Lines 18656 18721 +65
Branches 4550 4560 +10
==========================================
+ Hits 11982 12033 +51
- Misses 5779 5792 +13
- Partials 895 896 +1
Continue to review full report at Codecov.
|
|
清晰度有问题，应该调整一下渲染精度 |
看起来是在高分辨率屏幕上的缩放问题 我研究一下 |
|
可以康康效果 不知道还模糊不 我没有 mac function setupCanvas (canvas: HTMLCanvasElement): CanvasRenderingContext2D|null {
const dpr = window.devicePixelRatio || 1
const rect = canvas.getBoundingClientRect()
canvas.width = rect.width * dpr
canvas.height = rect.height * dpr
const ctx = canvas.getContext('2d')
ctx?.scale(dpr, dpr)
return ctx
} |
|
另一个问题 是因为用了canvas所以之前那种写法的 ssr 测试的写法行不通了 所以暂时没写测试 |
canvas 可以 mock 一下 |
|
被 watermark 盖住的东西无法选中了 |
因为我css加了 |
好 我去看看怎么写 |
这还真不好说，可以给个选项吧 很多公司水印只是为了防止员工拍照 |
|
不能耽误他们工作 |
好的 |
| const canvasOffsetTop = offsetTop || gapY / 2 | ||
| canvas.width = canvasWidth | ||
| canvas.height = canvasHeight | ||
| if (ctx) { |
There was a problem hiding this comment.
真要检查应该在一开始获取 canvas context 的时候就检查，不应该等到现在了
There was a problem hiding this comment.
getContext 的返回类型可能为 null 这个地方更像是一个 type guard 其实每个出现ctx的地方用 ctx?.xxx 也行 但是每次都写有点麻烦
src/watermark/src/Watermark.tsx
Outdated
| fontFamily: { | ||
| type: String, | ||
| default: 'sans-serif' | ||
| }, | ||
| fontWeight: { | ||
| type: [String, Number] as PropType<'normal' | 'light' | 'weight' | number>, | ||
| default: 'normal' | ||
| }, | ||
| fontSize: { | ||
| type: [Number, String] as PropType<number | string>, | ||
| default: 16 | ||
| }, | ||
| fontStyle: { | ||
| type: [String, Number] as PropType< | ||
| 'normal' | 'italic' | 'oblique' | number | ||
| >, | ||
| default: 'normal' | ||
| } |
* feat(watermark): new component Signed-off-by: Sepush <[email protected]> * changelog * fix(watermark): render * feat(watermark): add selectable prop&test case * refactor(watermark): use useThemeVars
Signed-off-by: Sepush [email protected]
close #1745