leafer-x-watermark 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -9
- package/dist/index.d.mts +1 -2
- package/dist/index.mjs +2 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -64,9 +64,9 @@ const watermark = new Watermark({
|
|
|
64
64
|
fill: 'rgba(255, 0, 0, 0.1)',
|
|
65
65
|
fontSize: 20,
|
|
66
66
|
}),
|
|
67
|
-
tileMode: true,
|
|
68
|
-
tileSize: 100,
|
|
69
|
-
tileGap: 20,
|
|
67
|
+
tileMode: true, // 开启平铺
|
|
68
|
+
tileSize: 100, // 100% 原始大小
|
|
69
|
+
tileGap: 20, // 20% 间距
|
|
70
70
|
tileRotation: -30, // 旋转 -30 度
|
|
71
71
|
width: 800,
|
|
72
72
|
height: 600,
|
|
@@ -84,7 +84,7 @@ const watermark = new Watermark({
|
|
|
84
84
|
fontSize: 14,
|
|
85
85
|
}),
|
|
86
86
|
tileMode: true,
|
|
87
|
-
tileStagger: 50,
|
|
87
|
+
tileStagger: 50, // 50% 错位偏移
|
|
88
88
|
tileGap: 10,
|
|
89
89
|
width: 800,
|
|
90
90
|
height: 600,
|
|
@@ -121,8 +121,8 @@ const watermark = new Watermark({
|
|
|
121
121
|
| `tileContent` | string | - | 水印内容,LeaferJS 元素的 JSON 字符串 |
|
|
122
122
|
| `tileMode` | boolean | `true` | 平铺模式:`true` 平铺,`false` 拉伸 |
|
|
123
123
|
| `tileSize` | number | `100` | 显示比例(%),100 为原始大小 |
|
|
124
|
-
| `tileGap` | number | `0` |
|
|
125
|
-
| `tileStagger` | number | `0` |
|
|
124
|
+
| `tileGap` | `number \| { x?: number, y?: number }` | `0` | 间距比例(%),支持统一数值或分别设置 x/y 间距 |
|
|
125
|
+
| `tileStagger` | `number \| { type?: 'x' \| 'y', offset: number }` | `0` | 错位偏移,支持数值(0-100)或详细配置 |
|
|
126
126
|
| `tileRotation` | number | `0` | 水印旋转角度(度) |
|
|
127
127
|
|
|
128
128
|
### 属性说明
|
|
@@ -160,13 +160,15 @@ JSON.stringify({
|
|
|
160
160
|
|
|
161
161
|
间距基于显示尺寸的百分比计算:
|
|
162
162
|
- `tileGap: 10` 表示间距为水印宽/高的 10%
|
|
163
|
+
- 支持分别设置:`{ x: 20, y: 10 }`
|
|
163
164
|
|
|
164
165
|
#### tileStagger
|
|
165
166
|
|
|
166
|
-
|
|
167
|
+
错位排列效果,支持数值 (0-100) 或对象配置:
|
|
168
|
+
- `tileStagger: 50` = 水平方向(x)相邻行偏移 50%
|
|
169
|
+
- `{ type: 'y', offset: 50 }` = 垂直方向(y)相邻列偏移 50%
|
|
167
170
|
- `0` = 无错位
|
|
168
|
-
- `
|
|
169
|
-
- `100` = 相邻行偏移 100%(等于一个完整水印宽度)
|
|
171
|
+
- `100` = 完全错位(等于一个完整水印尺寸)
|
|
170
172
|
|
|
171
173
|
## 💡 使用场景
|
|
172
174
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IRectData, IUI, IRectInputData,
|
|
1
|
+
import { IRectData, IUI, IRectInputData, IObject, IJSONOptions } from '@leafer-ui/interface';
|
|
2
2
|
import { RectData, Rect } from '@leafer-ui/core';
|
|
3
3
|
|
|
4
4
|
type IStaggerType = 'x' | 'y';
|
|
@@ -79,7 +79,6 @@ declare class Watermark<TConstructorData = IWatermarkInputData> extends Rect<TCo
|
|
|
79
79
|
private createTileItem;
|
|
80
80
|
regenerateImage(): void;
|
|
81
81
|
updateFill(): void;
|
|
82
|
-
toJSON(options?: IJSONOptions): IUIJSONData;
|
|
83
82
|
}
|
|
84
83
|
|
|
85
84
|
declare function normalizeStagger(stagger: IStagger): INormalizedStagger;
|
package/dist/index.mjs
CHANGED
|
@@ -132,7 +132,6 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
132
132
|
installStaggerPattern();
|
|
133
133
|
const debug = Debug.get("leafer-x-watermark");
|
|
134
134
|
class ProcessorData extends RectData {
|
|
135
|
-
__leaf;
|
|
136
135
|
_tileContent;
|
|
137
136
|
setTileContent(value) {
|
|
138
137
|
this._tileContent = value;
|
|
@@ -165,14 +164,12 @@ class ProcessorData extends RectData {
|
|
|
165
164
|
}
|
|
166
165
|
__getData() {
|
|
167
166
|
const data = super.__getData();
|
|
168
|
-
|
|
169
|
-
delete data.fill;
|
|
167
|
+
delete data.fill;
|
|
170
168
|
return data;
|
|
171
169
|
}
|
|
172
170
|
__getInputData(names, options) {
|
|
173
171
|
const data = super.__getInputData(names, options);
|
|
174
|
-
|
|
175
|
-
delete data.fill;
|
|
172
|
+
delete data.fill;
|
|
176
173
|
return data;
|
|
177
174
|
}
|
|
178
175
|
}
|
|
@@ -267,11 +264,6 @@ let Watermark = class extends Rect {
|
|
|
267
264
|
}
|
|
268
265
|
});
|
|
269
266
|
}
|
|
270
|
-
toJSON(options) {
|
|
271
|
-
const data = super.toJSON(options);
|
|
272
|
-
const { fill, ...cleanData } = data;
|
|
273
|
-
return cleanData;
|
|
274
|
-
}
|
|
275
267
|
};
|
|
276
268
|
__decorateClass([
|
|
277
269
|
dataProcessor(ProcessorData)
|