feat: New Component Watermark #39064

JarvisArt · 2022-11-28T17:31:45Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	Watermark component
🇨🇳 Chinese	水印组件

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

github-actions · 2022-11-28T17:31:58Z

JarvisArt · 2022-11-28T17:53:27Z

文档缺个 cover
WaterMark 改为 Watermark 个人觉得更规范点
关于是否去掉 width 与 height，建议还是留着这两个属性，因为文本旋转后的宽高不好计算。如果接受旋转前的宽高可后面再做支持，当水印为 content 和未指定宽高则自动算出 content 的宽高。
水印的实现遵循下图规范，offset 是指水印距离容器左上角的偏移量，并不会影响 width / height 和 gapX / gapY

4.rotate 基于水印中心点旋转（不是右上角），下图是rotate={45}

接下来的优化项：

提供可视化自定义配置demo
content 水印未指定宽高时自动算出 content 的宽高
水印交叉类型的支持

codecov · 2022-11-28T18:12:44Z

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (c5b55e4) compared to base (816cf10).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           feature    #39064    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          550       552     +2     
  Lines         9431      9563   +132     
  Branches      2681      2713    +32     
==========================================
+ Hits          9431      9563   +132

Impacted Files	Coverage Δ
components/watermark/index.tsx	`100.00% <100.00%> (ø)`
components/watermark/useMutationObserver.ts	`100.00% <100.00%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

components/watermark/index.en-US.md

components/watermark/index.tsx

components/watermark/index.zh-CN.md

MadCcc · 2022-11-30T09:19:04Z

这个也换成 Ant Design 吧

JarvisArt · 2022-11-30T09:21:33Z

这个也换成 Ant Design 吧

这是个图片来着，要让设计师换一下

MadCcc · 2022-11-30T10:00:06Z

https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original
缩略图用这个

* docs: add watermark docs * docs: add watermark demo * test: add watermark test * test: add watermark snapshot * chore: add jest-canvas-mock

* docs: update docs * docs: update demo * test: update snapshot

MadCcc

完成度好高

components/watermark/index.zh-CN.md

components/watermark/index.tsx

afc163 · 2022-12-08T02:41:23Z

用 shadow dom 实现是不是更不容易被样式覆盖？

yoyo837 · 2022-12-08T03:00:21Z

用 shadow dom 实现是不是更不容易被样式覆盖？

shadow dom 是样式隔离的吧?

JarvisArt · 2022-12-08T03:00:26Z

用 shadow dom 实现是不是更不容易被样式覆盖？

shadow 有样式隔离，MutationObserver 能否监听 shadow DOM 的变化，这个我再研究下，先列为代办项。
这次先精简一点。

yoyo837 · 2022-12-08T03:01:38Z

用 shadow dom 实现是不是更不容易被样式覆盖？

shadow 有样式隔离，MutationObserver 能否监听 shadow DOM 的变化，这个我再研究下，先列为代办项。这次先精简一点。

attachShadow({ mode: 'closed' })?

JarvisArt · 2022-12-08T03:24:28Z

刚看了下，Shadow DOM 在是需要挂载在一个插槽(dom)下的，这个插槽还是可以被样式覆盖。

yoyo837 · 2022-12-08T03:26:19Z

刚看了下，Shadow DOM 在是需要挂载在一个插槽(dom)下的，这个插槽还是可以被样式覆盖。

最外层, 也就是 :host 是可以覆盖的.

yoyo837 · 2022-12-08T03:28:00Z

把主要内容包在里层, 外层当容器, 任由其控制, 没办法.

JarvisArt · 2022-12-08T03:28:49Z

把主要内容包在里层, 外层当容器, 任由其控制, 没办法.

是的

li-jia-nan · 2022-12-08T03:44:20Z

🎉🎉🎉

crazyair · 2022-12-21T03:33:24Z

有打算支持盲水印吗 /~https://github.com/pansyjs/watermark/blob/master/packages/core/src/types.ts#L40
https://watermark.xingkang.wang/configurator
https://watermark.xingkang.wang/guide/decryption

JarvisArt · 2022-12-21T03:47:07Z

盲水印

盲水印我的理解它就是透明度更低的水印内容。

crazyair · 2022-12-21T03:48:15Z

盲水印

盲水印我的理解它就是透明度更低的水印内容。

对，网页背景水印只有盲水印，暗水印是针对原图做的。

JarvisArt · 2022-12-21T03:53:38Z

对，网页背景水印只有盲水印，暗水印是针对原图做的。

这样设置下文本的透明度就可以实现了

crazyair · 2022-12-21T03:55:02Z

如果需要明、盲都支持呢？要2个content 吗

JarvisArt · 2022-12-21T03:56:46Z

如果需要明、盲都支持呢？要2个content 吗

这种场景会很多吗，如果不多可以包两个，或者采用 image 的形式

crazyair · 2022-12-21T03:58:28Z

包2个可行。image 的话无法服务端动态配置。

JarvisArt · 2022-12-21T04:01:33Z

包2个可行。image 的话无法服务端动态配置。

嗯嗯，现在初期阶段api精简一点

li-jia-nan · 2023-08-10T08:21:54Z

ant-design-vue

走错仓库啦

codeball-ai-writer bot added the codeball:needs-review label Nov 28, 2022

JarvisArt closed this Nov 28, 2022

JarvisArt reopened this Nov 28, 2022

JarvisArt force-pushed the feat/Watermark branch from 43d7e39 to 5d3e7aa Compare November 28, 2022 18:11

JarvisArt force-pushed the feat/Watermark branch 2 times, most recently from 38ae83f to 46d566b Compare November 29, 2022 03:00

MadCcc reviewed Nov 30, 2022

View reviewed changes

JarvisArt force-pushed the feat/Watermark branch from 46d566b to 6a74fac Compare December 2, 2022 10:56

codeball-ai-writer bot added codeball:needs-careful-review and removed codeball:needs-review labels Dec 2, 2022

feat: New Component Watermark

de556f0

* docs: add watermark docs * docs: add watermark demo * test: add watermark test * test: add watermark snapshot * chore: add jest-canvas-mock

JarvisArt force-pushed the feat/Watermark branch from 6a74fac to de556f0 Compare December 2, 2022 12:48

JarvisArt requested review from MadCcc and removed request for MadCcc December 2, 2022 13:18

JarvisArt force-pushed the feat/Watermark branch from 9c218b1 to 601316a Compare December 4, 2022 11:39

feat: Watermark calculates the width and height of content by default

6a159d3

* docs: update docs * docs: update demo * test: update snapshot

JarvisArt force-pushed the feat/Watermark branch from 601316a to 6a159d3 Compare December 4, 2022 12:00

Merge branch 'feat/Watermark' into 'feature'

9b34836

MadCcc reviewed Dec 7, 2022

View reviewed changes

components/watermark/index.zh-CN.md Show resolved Hide resolved

afc163 reviewed Dec 7, 2022

View reviewed changes

components/watermark/index.zh-CN.md Outdated Show resolved Hide resolved

afc163 reviewed Dec 7, 2022

View reviewed changes

components/watermark/index.tsx Show resolved Hide resolved

JarvisArt added 2 commits December 7, 2022 14:51

docs: update docs

a8df874

Merge branch 'feature' into feat/Watermark

0348571

JarvisArt requested review from MadCcc and afc163 and removed request for MadCcc and afc163 December 8, 2022 02:36

MadCcc approved these changes Dec 8, 2022

View reviewed changes

MadCcc merged commit 6f83c63 into ant-design:feature Dec 8, 2022

xrkffgg mentioned this pull request Dec 19, 2022

docs: add 5.1.0 changelog #39667

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: New Component Watermark #39064

feat: New Component Watermark #39064

JarvisArt commented Nov 28, 2022 •

edited

Loading

github-actions bot commented Nov 28, 2022 •

edited

Loading

JarvisArt commented Nov 28, 2022 •

edited

Loading

codecov bot commented Nov 28, 2022 •

edited

Loading

MadCcc commented Nov 30, 2022

JarvisArt commented Nov 30, 2022

MadCcc commented Nov 30, 2022 •

edited

Loading

MadCcc left a comment

afc163 commented Dec 8, 2022

yoyo837 commented Dec 8, 2022 •

edited

Loading

JarvisArt commented Dec 8, 2022

yoyo837 commented Dec 8, 2022

JarvisArt commented Dec 8, 2022

yoyo837 commented Dec 8, 2022

yoyo837 commented Dec 8, 2022

JarvisArt commented Dec 8, 2022

li-jia-nan commented Dec 8, 2022

crazyair commented Dec 21, 2022 •

edited

Loading

JarvisArt commented Dec 21, 2022

crazyair commented Dec 21, 2022

JarvisArt commented Dec 21, 2022

crazyair commented Dec 21, 2022

JarvisArt commented Dec 21, 2022

crazyair commented Dec 21, 2022

JarvisArt commented Dec 21, 2022

li-jia-nan commented Aug 10, 2023

feat: New Component Watermark #39064

feat: New Component Watermark #39064

Conversation

JarvisArt commented Nov 28, 2022 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

github-actions bot commented Nov 28, 2022 • edited Loading

JarvisArt commented Nov 28, 2022 • edited Loading

codecov bot commented Nov 28, 2022 • edited Loading

Codecov Report

MadCcc commented Nov 30, 2022

JarvisArt commented Nov 30, 2022

MadCcc commented Nov 30, 2022 • edited Loading

MadCcc left a comment

Choose a reason for hiding this comment

afc163 commented Dec 8, 2022

yoyo837 commented Dec 8, 2022 • edited Loading

JarvisArt commented Dec 8, 2022

yoyo837 commented Dec 8, 2022

JarvisArt commented Dec 8, 2022

yoyo837 commented Dec 8, 2022

yoyo837 commented Dec 8, 2022

JarvisArt commented Dec 8, 2022

li-jia-nan commented Dec 8, 2022

crazyair commented Dec 21, 2022 • edited Loading

JarvisArt commented Dec 21, 2022

crazyair commented Dec 21, 2022

JarvisArt commented Dec 21, 2022

crazyair commented Dec 21, 2022

JarvisArt commented Dec 21, 2022

crazyair commented Dec 21, 2022

JarvisArt commented Dec 21, 2022

li-jia-nan commented Aug 10, 2023

JarvisArt commented Nov 28, 2022 •

edited

Loading

github-actions bot commented Nov 28, 2022 •

edited

Loading

JarvisArt commented Nov 28, 2022 •

edited

Loading

codecov bot commented Nov 28, 2022 •

edited

Loading

MadCcc commented Nov 30, 2022 •

edited

Loading

yoyo837 commented Dec 8, 2022 •

edited

Loading

crazyair commented Dec 21, 2022 •

edited

Loading