@eva/plugin-renderer-mask 2.0.1-beta.26 → 2.0.1-beta.28
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.
|
@@ -48,17 +48,77 @@ exports.MASK_TYPE = void 0;
|
|
|
48
48
|
MASK_TYPE["Img"] = "Img";
|
|
49
49
|
MASK_TYPE["Sprite"] = "Sprite";
|
|
50
50
|
})(exports.MASK_TYPE || (exports.MASK_TYPE = {}));
|
|
51
|
+
/**
|
|
52
|
+
* 遮罩组件
|
|
53
|
+
*
|
|
54
|
+
* Mask 组件用于裁剪游戏对象的显示区域，只显示遮罩形状内的内容。
|
|
55
|
+
* 支持多种遮罩形状（矩形、圆形、多边形、图片、精灵等），
|
|
56
|
+
* 适用于头像裁剪、窗口遮罩、特殊形状显示等场景。
|
|
57
|
+
*
|
|
58
|
+
* 遮罩类型：
|
|
59
|
+
* - Circle - 圆形遮罩
|
|
60
|
+
* - Ellipse - 椭圆形遮罩
|
|
61
|
+
* - Rect - 矩形遮罩
|
|
62
|
+
* - RoundedRect - 圆角矩形遮罩
|
|
63
|
+
* - Polygon - 多边形遮罩
|
|
64
|
+
* - Img - 图片遮罩（基于图片 alpha 通道）
|
|
65
|
+
* - Sprite - 精灵遮罩
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```typescript
|
|
69
|
+
* // 圆形头像遮罩
|
|
70
|
+
* const avatar = new GameObject('avatar');
|
|
71
|
+
* avatar.addComponent(new Img({ resource: 'userAvatar' }));
|
|
72
|
+
* avatar.addComponent(new Mask({
|
|
73
|
+
* type: MASK_TYPE.Circle,
|
|
74
|
+
* style: {
|
|
75
|
+
* x: 50, // 圆心 x
|
|
76
|
+
* y: 50, // 圆心 y
|
|
77
|
+
* radius: 50 // 半径
|
|
78
|
+
* }
|
|
79
|
+
* }));
|
|
80
|
+
*
|
|
81
|
+
* // 矩形遮罩
|
|
82
|
+
* avatar.addComponent(new Mask({
|
|
83
|
+
* type: MASK_TYPE.Rect,
|
|
84
|
+
* style: {
|
|
85
|
+
* x: 0, y: 0,
|
|
86
|
+
* width: 100,
|
|
87
|
+
* height: 100
|
|
88
|
+
* }
|
|
89
|
+
* }));
|
|
90
|
+
*
|
|
91
|
+
* // 使用图片作为遮罩
|
|
92
|
+
* avatar.addComponent(new Mask({
|
|
93
|
+
* type: MASK_TYPE.Img,
|
|
94
|
+
* resource: 'maskImage' // alpha 通道作为遮罩
|
|
95
|
+
* }));
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
51
98
|
class Mask$2 extends eva_js.Component {
|
|
52
99
|
constructor() {
|
|
53
100
|
super(...arguments);
|
|
101
|
+
/** 遮罩样式配置 */
|
|
102
|
+
// @decorators.IDEProp 复杂编辑后续添加
|
|
54
103
|
this.style = {};
|
|
104
|
+
/** 遮罩图片资源名称（用于 Img 类型） */
|
|
55
105
|
this.resource = '';
|
|
106
|
+
/** 遮罩精灵名称（用于 Sprite 类型） */
|
|
56
107
|
this.spriteName = '';
|
|
57
108
|
}
|
|
109
|
+
/**
|
|
110
|
+
* 初始化组件
|
|
111
|
+
* @param obj - 初始化参数
|
|
112
|
+
* @param obj.type - 遮罩类型
|
|
113
|
+
* @param obj.style - 遮罩样式
|
|
114
|
+
* @param obj.resource - 遮罩资源（可选）
|
|
115
|
+
* @param obj.spriteName - 精灵名称（可选）
|
|
116
|
+
*/
|
|
58
117
|
init(obj) {
|
|
59
118
|
Object.assign(this, obj);
|
|
60
119
|
}
|
|
61
120
|
}
|
|
121
|
+
/** 组件名称 */
|
|
62
122
|
Mask$2.componentName = 'Mask';
|
|
63
123
|
__decorate([
|
|
64
124
|
inspectorDecorator.type('string')
|
|
@@ -67,7 +127,7 @@ __decorate([
|
|
|
67
127
|
inspectorDecorator.type('string')
|
|
68
128
|
], Mask$2.prototype, "spriteName", void 0);
|
|
69
129
|
|
|
70
|
-
const resourceKeySplit = '_s|r|c_';
|
|
130
|
+
const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
|
|
71
131
|
const propertyForGraphics = {
|
|
72
132
|
Circle: ['x', 'y', 'radius'],
|
|
73
133
|
Ellipse: ['x', 'y', 'width', 'height'],
|
|
@@ -215,6 +275,7 @@ let Mask = class Mask extends pluginRenderer.Renderer {
|
|
|
215
275
|
for (const key of propertyForGraphics[component.type]) {
|
|
216
276
|
params.push(component.style[key]);
|
|
217
277
|
}
|
|
278
|
+
// @ts-ignore
|
|
218
279
|
graphics[functionForGraphics[component.type]](...params);
|
|
219
280
|
graphics.fill(0x000000);
|
|
220
281
|
}
|
|
@@ -8,13 +8,74 @@ import { RendererSystem } from '@eva/plugin-renderer';
|
|
|
8
8
|
import { Sprite } from '@eva/renderer-adapter';
|
|
9
9
|
import type { Sprite as Sprite_2 } from 'pixi.js';
|
|
10
10
|
|
|
11
|
+
/**
|
|
12
|
+
* 遮罩组件
|
|
13
|
+
*
|
|
14
|
+
* Mask 组件用于裁剪游戏对象的显示区域，只显示遮罩形状内的内容。
|
|
15
|
+
* 支持多种遮罩形状（矩形、圆形、多边形、图片、精灵等），
|
|
16
|
+
* 适用于头像裁剪、窗口遮罩、特殊形状显示等场景。
|
|
17
|
+
*
|
|
18
|
+
* 遮罩类型：
|
|
19
|
+
* - Circle - 圆形遮罩
|
|
20
|
+
* - Ellipse - 椭圆形遮罩
|
|
21
|
+
* - Rect - 矩形遮罩
|
|
22
|
+
* - RoundedRect - 圆角矩形遮罩
|
|
23
|
+
* - Polygon - 多边形遮罩
|
|
24
|
+
* - Img - 图片遮罩（基于图片 alpha 通道）
|
|
25
|
+
* - Sprite - 精灵遮罩
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```typescript
|
|
29
|
+
* // 圆形头像遮罩
|
|
30
|
+
* const avatar = new GameObject('avatar');
|
|
31
|
+
* avatar.addComponent(new Img({ resource: 'userAvatar' }));
|
|
32
|
+
* avatar.addComponent(new Mask({
|
|
33
|
+
* type: MASK_TYPE.Circle,
|
|
34
|
+
* style: {
|
|
35
|
+
* x: 50, // 圆心 x
|
|
36
|
+
* y: 50, // 圆心 y
|
|
37
|
+
* radius: 50 // 半径
|
|
38
|
+
* }
|
|
39
|
+
* }));
|
|
40
|
+
*
|
|
41
|
+
* // 矩形遮罩
|
|
42
|
+
* avatar.addComponent(new Mask({
|
|
43
|
+
* type: MASK_TYPE.Rect,
|
|
44
|
+
* style: {
|
|
45
|
+
* x: 0, y: 0,
|
|
46
|
+
* width: 100,
|
|
47
|
+
* height: 100
|
|
48
|
+
* }
|
|
49
|
+
* }));
|
|
50
|
+
*
|
|
51
|
+
* // 使用图片作为遮罩
|
|
52
|
+
* avatar.addComponent(new Mask({
|
|
53
|
+
* type: MASK_TYPE.Img,
|
|
54
|
+
* resource: 'maskImage' // alpha 通道作为遮罩
|
|
55
|
+
* }));
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
11
58
|
export declare class Mask extends Component<MaskParams> {
|
|
59
|
+
/** 组件名称 */
|
|
12
60
|
static componentName: string;
|
|
61
|
+
/** 上一次的遮罩类型 */
|
|
13
62
|
_lastType: MaskParams['type'];
|
|
63
|
+
/** 遮罩类型 */
|
|
14
64
|
type: MaskParams['type'];
|
|
65
|
+
/** 遮罩样式配置 */
|
|
15
66
|
style?: MaskParams['style'];
|
|
67
|
+
/** 遮罩图片资源名称（用于 Img 类型） */
|
|
16
68
|
resource?: string;
|
|
69
|
+
/** 遮罩精灵名称（用于 Sprite 类型） */
|
|
17
70
|
spriteName?: string;
|
|
71
|
+
/**
|
|
72
|
+
* 初始化组件
|
|
73
|
+
* @param obj - 初始化参数
|
|
74
|
+
* @param obj.type - 遮罩类型
|
|
75
|
+
* @param obj.style - 遮罩样式
|
|
76
|
+
* @param obj.resource - 遮罩资源（可选）
|
|
77
|
+
* @param obj.spriteName - 精灵名称（可选）
|
|
78
|
+
*/
|
|
18
79
|
init(obj?: MaskParams): void;
|
|
19
80
|
}
|
|
20
81
|
|
|
@@ -44,17 +44,77 @@ var MASK_TYPE$1;
|
|
|
44
44
|
MASK_TYPE["Img"] = "Img";
|
|
45
45
|
MASK_TYPE["Sprite"] = "Sprite";
|
|
46
46
|
})(MASK_TYPE$1 || (MASK_TYPE$1 = {}));
|
|
47
|
+
/**
|
|
48
|
+
* 遮罩组件
|
|
49
|
+
*
|
|
50
|
+
* Mask 组件用于裁剪游戏对象的显示区域，只显示遮罩形状内的内容。
|
|
51
|
+
* 支持多种遮罩形状（矩形、圆形、多边形、图片、精灵等），
|
|
52
|
+
* 适用于头像裁剪、窗口遮罩、特殊形状显示等场景。
|
|
53
|
+
*
|
|
54
|
+
* 遮罩类型：
|
|
55
|
+
* - Circle - 圆形遮罩
|
|
56
|
+
* - Ellipse - 椭圆形遮罩
|
|
57
|
+
* - Rect - 矩形遮罩
|
|
58
|
+
* - RoundedRect - 圆角矩形遮罩
|
|
59
|
+
* - Polygon - 多边形遮罩
|
|
60
|
+
* - Img - 图片遮罩（基于图片 alpha 通道）
|
|
61
|
+
* - Sprite - 精灵遮罩
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* ```typescript
|
|
65
|
+
* // 圆形头像遮罩
|
|
66
|
+
* const avatar = new GameObject('avatar');
|
|
67
|
+
* avatar.addComponent(new Img({ resource: 'userAvatar' }));
|
|
68
|
+
* avatar.addComponent(new Mask({
|
|
69
|
+
* type: MASK_TYPE.Circle,
|
|
70
|
+
* style: {
|
|
71
|
+
* x: 50, // 圆心 x
|
|
72
|
+
* y: 50, // 圆心 y
|
|
73
|
+
* radius: 50 // 半径
|
|
74
|
+
* }
|
|
75
|
+
* }));
|
|
76
|
+
*
|
|
77
|
+
* // 矩形遮罩
|
|
78
|
+
* avatar.addComponent(new Mask({
|
|
79
|
+
* type: MASK_TYPE.Rect,
|
|
80
|
+
* style: {
|
|
81
|
+
* x: 0, y: 0,
|
|
82
|
+
* width: 100,
|
|
83
|
+
* height: 100
|
|
84
|
+
* }
|
|
85
|
+
* }));
|
|
86
|
+
*
|
|
87
|
+
* // 使用图片作为遮罩
|
|
88
|
+
* avatar.addComponent(new Mask({
|
|
89
|
+
* type: MASK_TYPE.Img,
|
|
90
|
+
* resource: 'maskImage' // alpha 通道作为遮罩
|
|
91
|
+
* }));
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
47
94
|
class Mask$2 extends Component {
|
|
48
95
|
constructor() {
|
|
49
96
|
super(...arguments);
|
|
97
|
+
/** 遮罩样式配置 */
|
|
98
|
+
// @decorators.IDEProp 复杂编辑后续添加
|
|
50
99
|
this.style = {};
|
|
100
|
+
/** 遮罩图片资源名称（用于 Img 类型） */
|
|
51
101
|
this.resource = '';
|
|
102
|
+
/** 遮罩精灵名称（用于 Sprite 类型） */
|
|
52
103
|
this.spriteName = '';
|
|
53
104
|
}
|
|
105
|
+
/**
|
|
106
|
+
* 初始化组件
|
|
107
|
+
* @param obj - 初始化参数
|
|
108
|
+
* @param obj.type - 遮罩类型
|
|
109
|
+
* @param obj.style - 遮罩样式
|
|
110
|
+
* @param obj.resource - 遮罩资源（可选）
|
|
111
|
+
* @param obj.spriteName - 精灵名称（可选）
|
|
112
|
+
*/
|
|
54
113
|
init(obj) {
|
|
55
114
|
Object.assign(this, obj);
|
|
56
115
|
}
|
|
57
116
|
}
|
|
117
|
+
/** 组件名称 */
|
|
58
118
|
Mask$2.componentName = 'Mask';
|
|
59
119
|
__decorate([
|
|
60
120
|
type('string')
|
|
@@ -63,7 +123,7 @@ __decorate([
|
|
|
63
123
|
type('string')
|
|
64
124
|
], Mask$2.prototype, "spriteName", void 0);
|
|
65
125
|
|
|
66
|
-
const resourceKeySplit = '_s|r|c_';
|
|
126
|
+
const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
|
|
67
127
|
const propertyForGraphics = {
|
|
68
128
|
Circle: ['x', 'y', 'radius'],
|
|
69
129
|
Ellipse: ['x', 'y', 'width', 'height'],
|
|
@@ -211,6 +271,7 @@ let Mask = class Mask extends Renderer {
|
|
|
211
271
|
for (const key of propertyForGraphics[component.type]) {
|
|
212
272
|
params.push(component.style[key]);
|
|
213
273
|
}
|
|
274
|
+
// @ts-ignore
|
|
214
275
|
graphics[functionForGraphics[component.type]](...params);
|
|
215
276
|
graphics.fill(0x000000);
|
|
216
277
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-mask",
|
|
3
|
-
"version": "2.0.1-beta.
|
|
3
|
+
"version": "2.0.1-beta.28",
|
|
4
4
|
"description": "@eva/plugin-renderer-mask",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-mask.esm.js",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"homepage": "https://eva.js.org",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@eva/inspector-decorator": "^0.0.5",
|
|
22
|
-
"@eva/plugin-renderer": "2.0.1-beta.
|
|
23
|
-
"@eva/renderer-adapter": "2.0.1-beta.
|
|
24
|
-
"@eva/eva.js": "2.0.1-beta.
|
|
22
|
+
"@eva/plugin-renderer": "2.0.1-beta.28",
|
|
23
|
+
"@eva/renderer-adapter": "2.0.1-beta.28",
|
|
24
|
+
"@eva/eva.js": "2.0.1-beta.28",
|
|
25
25
|
"pixi.js": "^8.8.1"
|
|
26
26
|
}
|
|
27
27
|
}
|