组件：水印标签

水印标签组件用于在指定元素（或整个页面）上添加背景水印文字，通常用于版权保护、文档标识、内部文件标记等场景。水印以半透明文字平铺在目标元素背景上，可自定义文字内容、字号、颜色、旋转角度、间距等，且不影响用户与目标元素的交互。

典型使用场景：

内部文档/管理后台添加“机密”“内部使用”等水印
版权保护，防止截图盗用
状态标记（如“草稿”“已归档”）
品牌标识（在页面背景添加品牌名）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置水印文字内容	`文本`	`水印标签1.文本 = "机密文档"`
设置水印字号（像素）	`字号`	`水印标签1.字号 = 18`
设置水印颜色（建议半透明）	`颜色`	`水印标签1.颜色 = "rgba(0,0,0,0.06)"`
设置旋转角度（度）	`旋转角度`	`水印标签1.旋转角度 = -30`
设置水印横向间距（像素）	`横向间距`	`水印标签1.横向间距 = 40`
设置水印纵向间距（像素）	`纵向间距`	`水印标签1.纵向间距 = 120`
设置起始偏移位置	`偏移X` / `偏移Y`	`水印标签1.偏移X = 10`
设置层级（z-index）	`层级`	`水印标签1.层级 = 99`
绑定目标元素	`置目标元素(元素)`	`水印标签1.置目标元素(面板1)`
隐藏水印	`隐藏()`	`水印标签1.隐藏()`
刷新重绘	`刷新()`	`水印标签1.刷新()`
销毁组件	`销毁()`	`水印标签1.销毁()`

样式美化参考

水印本身是文字平铺，其外观主要通过以下属性调整：

文字样式：文本 决定显示内容，字号 控制大小，颜色 控制透明度（建议使用 rgba 半透明色，如 rgba(0,0,0,0.05)），字体（继承自视图）可设置字体族。
布局排列：旋转角度 使水印倾斜（通常为负值），横向间距 和 纵向间距 控制水印之间的疏密程度。
位置偏移：偏移X 和 偏移Y 可调整水印网格的整体起始位置，避免与内容重叠。
层级：层级（z-index）控制水印与目标元素其他内容的叠放顺序，默认 9，通常无需修改。

基础示例

在一个卡片元素上添加“VcnStudio 机密”水印。

' 创建目标卡片（一个面板）
变量 卡片 = 创建 卡片框()
卡片.左边 = 50
卡片.顶边 = 50
卡片.宽度 = 400
卡片.高度 = 300
卡片.标题 = "内部文档"
卡片.内容 = "<p>这里包含敏感信息，仅供内部使用。</p>"
添加组件(卡片)

' 创建水印并绑定到卡片
变量 水印 = 创建 水印标签()
水印.文本 = "VcnStudio 机密"
水印.字号 = 18
水印.颜色 = "rgba(0,0,0,0.06)"
水印.旋转角度 = -25
水印.横向间距 = 30
水印.纵向间距 = 100
水印.层级 = 5
水印.置目标元素(卡片)
添加组件(水印)

综合示例：为整个页面添加“草稿”水印

本示例为整个页面（body）添加“草稿”水印，用于标识当前版本为草稿状态。

' 创建水印
变量 页面水印 = 创建 水印标签()
页面水印.文本 = "草 稿"
页面水印.字号 = 24
页面水印.颜色 = "rgba(255,77,79,0.08)"
页面水印.旋转角度 = -30
页面水印.横向间距 = 50
页面水印.纵向间距 = 150
页面水印.层级 = 999
' 将水印添加到整个页面（body）
' 使用查找元素ByID或直接取body对象
变量 body元素 = 取本窗口对象().document.body
页面水印.置目标元素(body元素)
添加组件(页面水印)

' 添加一个切换按钮，用于显示/隐藏水印
变量 切换按钮 = 创建 按钮()
切换按钮.左边 = 50
切换按钮.顶边 = 30
切换按钮.文本 = "隐藏水印"
切换按钮.宽度 = 120
切换按钮.高度 = 36
切换按钮.背景颜色 = "#1890ff"
切换按钮.文本颜色 = "#ffffff"
切换按钮.边框圆角 = "6px"
添加组件(切换按钮)

变量 水印可见 = 真
切换按钮.置被单击回调((源对象) => {
    如果(水印可见)
        页面水印.隐藏()
        切换按钮.文本 = "显示水印"
    否则
        ' 隐藏后无法直接显示，需要重新刷新（但隐藏没有对应的显示方法，可重新设置目标元素并刷新）
        ' 注意：隐藏只是添加了 display:none，可重新调用刷新或重新设置目标元素
        ' 更简单：重新设置目标元素并刷新
        页面水印.置目标元素(body元素)
        页面水印.刷新()
        切换按钮.文本 = "隐藏水印"
    结束 如果
    水印可见 = !水印可见
})

属性详解

文本

类型： 文本型
说明： 设置或获取水印显示的文字内容。可以为任意字符串，支持中文、英文、数字等。

字号

类型： 数值型
说明： 设置或获取水印文字的字体大小，单位为像素（px）。默认 16。

颜色

类型： 文本型
说明： 设置或获取水印文字的颜色，建议使用半透明色以避免遮挡背景内容，如 "rgba(0,0,0,0.06)"。支持所有 CSS 颜色值。默认 "rgba(0,0,0,0.08)"。

旋转角度

类型： 数值型
说明： 设置或获取水印文字的旋转角度（度），负值表示逆时针旋转。默认 -22。常用范围 -45 到 -15。

横向间距

类型： 数值型
说明： 设置或获取水印之间在水平方向上的间隔距离，单位为像素。默认 24。

纵向间距

类型： 数值型
说明： 设置或获取水印之间在垂直方向上的间隔距离，单位为像素。默认 96。

偏移X

类型： 数值型
说明： 设置或获取水印网格在水平方向上的起始偏移量，单位为像素。默认 0。可用于微调水印位置，避免与特定内容重叠。

偏移Y

类型： 数值型
说明： 设置或获取水印网格在垂直方向上的起始偏移量，单位为像素。默认 0。

层级

类型： 数值型
说明： 设置或获取水印的 z-index 值，控制水印与目标元素其他内容的叠放次序。默认 9。如果目标元素内部已有较高层级的元素，可适当提高此值。

函数详解

置目标元素(元素)

功能： 指定水印要覆盖的目标元素。水印将作为该元素的背景层平铺显示。
参数： 元素，可以是视图组件实例（如 卡片1）、原生 DOM 元素（如 body）或选择器字符串（如 "#container"）。
返回值： 无。
示例： 水印标签1.置目标元素(面板1)

取目标元素()

功能： 获取当前绑定的目标元素。
返回值： 原生 DOM 元素，若未设置则返回 空。
示例： 变量目标 = 水印标签1.取目标元素()

隐藏()

功能： 隐藏水印（将水印的显示模式设为 none）。水印仍然存在于 DOM 中，可通过后续操作重新显示（但需注意，隐藏后若需重新显示，可调用 刷新() 或重新设置目标元素）。
返回值： 无。
示例： 水印标签1.隐藏()

刷新()

功能： 重新渲染水印。当水印的属性（如文本、颜色、间距等）发生改变后，调用此方法使更改生效。也可用于隐藏后重新显示（重新设置目标元素并刷新）。
返回值： 无。
示例： 水印标签1.刷新()

销毁()

功能： 完全销毁水印组件，从 DOM 中移除水印元素，释放相关资源。调用后组件不可再用。
返回值： 无。
示例： 水印标签1.销毁()

⚠️ 注意事项

目标元素必须存在：调用 置目标元素 时，目标元素必须已经添加到 DOM 中（即已调用 添加组件 或已存在于页面），否则水印无法显示。
半透明颜色建议：水印应使用半透明颜色（如 rgba(0,0,0,0.05)），以便既能辨认又不影响内容的可读性。
水印与交互：水印位于目标元素的背景层，不会阻止鼠标事件（如点击、选择文本等），用户仍可与目标元素正常交互。
刷新时机：修改水印属性后，需调用 刷新() 使更改生效。若只是修改 文本、颜色 等，调用 刷新() 即可更新。
隐藏与显示：隐藏() 仅隐藏水印，但水印仍然在 DOM 中。若要重新显示，可重新调用 置目标元素 并 刷新()，或直接修改 可视 属性（但建议使用提供的方法）。
层级冲突：如果目标元素内有其他固定定位或高 z-index 的元素，水印可能被遮挡，可适当提高 层级 值。
性能：水印通过 Canvas 或 CSS 背景实现（具体实现由框架决定），通常性能良好，但若页面较大且水印密集，可能略有影响。
跨域/安全：水印仅用于前端视觉标识，不能替代真正的版权保护措施。

轻语言网站开发SDK文档