@eva/plugin-renderer-nine-patch 2.0.1-beta.3 → 2.0.1-beta.31
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.
|
@@ -38,16 +38,79 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
/**
|
|
42
|
+
* 九宫格组件
|
|
43
|
+
*
|
|
44
|
+
* NinePatch 组件用于实现可拉伸的图片，保持边角不变形。
|
|
45
|
+
* 将图片分为 9 个区域，拉伸时只拉伸中间区域，边角保持原始比例，
|
|
46
|
+
* 适用于按钮、对话框、面板等需要自适应尺寸的 UI 元素。
|
|
47
|
+
*
|
|
48
|
+
* 九宫格原理：
|
|
49
|
+
* ```
|
|
50
|
+
* +-------+-------+-------+
|
|
51
|
+
* | 左上 | 上 | 右上 |
|
|
52
|
+
* +-------+-------+-------+
|
|
53
|
+
* | 左 | 中间 | 右 |
|
|
54
|
+
* +-------+-------+-------+
|
|
55
|
+
* | 左下 | 下 | 右下 |
|
|
56
|
+
* +-------+-------+-------+
|
|
57
|
+
* ```
|
|
58
|
+
* 拉伸时，四个角保持不变，四条边单向拉伸，中间区域双向拉伸。
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* ```typescript
|
|
62
|
+
* // 创建可拉伸的按钮背景
|
|
63
|
+
* const button = new GameObject('button');
|
|
64
|
+
* button.addComponent(new NinePatch({
|
|
65
|
+
* resource: 'buttonBg', // 按钮背景资源
|
|
66
|
+
* spriteName: 'btn_normal.png',
|
|
67
|
+
* leftWidth: 20, // 左边不拉伸区域宽度
|
|
68
|
+
* topHeight: 20, // 顶部不拉伸区域高度
|
|
69
|
+
* rightWidth: 20, // 右边不拉伸区域宽度
|
|
70
|
+
* bottomHeight: 20 // 底部不拉伸区域高度
|
|
71
|
+
* }));
|
|
72
|
+
*
|
|
73
|
+
* // 设置按钮尺寸（自动拉伸）
|
|
74
|
+
* button.transform.size = { width: 200, height: 60 };
|
|
75
|
+
*
|
|
76
|
+
* // 创建对话框背景
|
|
77
|
+
* const dialog = new GameObject('dialog');
|
|
78
|
+
* dialog.addComponent(new NinePatch({
|
|
79
|
+
* resource: 'dialogBg',
|
|
80
|
+
* leftWidth: 30,
|
|
81
|
+
* topHeight: 30,
|
|
82
|
+
* rightWidth: 30,
|
|
83
|
+
* bottomHeight: 30
|
|
84
|
+
* }));
|
|
85
|
+
* dialog.transform.size = { width: 400, height: 300 };
|
|
86
|
+
* ```
|
|
87
|
+
*/
|
|
41
88
|
class NinePatch$2 extends eva_js.Component {
|
|
42
89
|
constructor() {
|
|
43
90
|
super(...arguments);
|
|
91
|
+
/** 图片资源名称 */
|
|
44
92
|
this.resource = '';
|
|
93
|
+
/** 精灵图集中的图片名称 */
|
|
45
94
|
this.spriteName = '';
|
|
95
|
+
/** 左边不拉伸区域的宽度 */
|
|
46
96
|
this.leftWidth = 0;
|
|
97
|
+
/** 顶部不拉伸区域的高度 */
|
|
47
98
|
this.topHeight = 0;
|
|
99
|
+
/** 右边不拉伸区域的宽度 */
|
|
48
100
|
this.rightWidth = 0;
|
|
101
|
+
/** 底部不拉伸区域的高度 */
|
|
49
102
|
this.bottomHeight = 0;
|
|
50
103
|
}
|
|
104
|
+
/**
|
|
105
|
+
* 初始化组件
|
|
106
|
+
* @param obj - 初始化参数
|
|
107
|
+
* @param obj.resource - 资源名称
|
|
108
|
+
* @param obj.spriteName - 精灵名称
|
|
109
|
+
* @param obj.leftWidth - 左边固定宽度
|
|
110
|
+
* @param obj.topHeight - 顶部固定高度
|
|
111
|
+
* @param obj.rightWidth - 右边固定宽度
|
|
112
|
+
* @param obj.bottomHeight - 底部固定高度
|
|
113
|
+
*/
|
|
51
114
|
init(obj) {
|
|
52
115
|
this.resource = obj.resource;
|
|
53
116
|
this.spriteName = obj.spriteName;
|
|
@@ -57,6 +120,7 @@ class NinePatch$2 extends eva_js.Component {
|
|
|
57
120
|
this.bottomHeight = obj.bottomHeight;
|
|
58
121
|
}
|
|
59
122
|
}
|
|
123
|
+
/** 组件名称 */
|
|
60
124
|
NinePatch$2.componentName = 'NinePatch';
|
|
61
125
|
__decorate([
|
|
62
126
|
inspectorDecorator.type('string')
|
|
@@ -81,7 +145,7 @@ __decorate([
|
|
|
81
145
|
inspectorDecorator.step(1)
|
|
82
146
|
], NinePatch$2.prototype, "bottomHeight", void 0);
|
|
83
147
|
|
|
84
|
-
const resourceKeySplit = '_s|r|c_';
|
|
148
|
+
const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
|
|
85
149
|
let NinePatch = class NinePatch extends pluginRenderer.Renderer {
|
|
86
150
|
constructor() {
|
|
87
151
|
super(...arguments);
|
|
@@ -144,6 +208,7 @@ let NinePatch = class NinePatch extends pluginRenderer.Renderer {
|
|
|
144
208
|
component.ninePatch = np;
|
|
145
209
|
this.containerManager
|
|
146
210
|
.getContainer(changed.gameObject.id)
|
|
211
|
+
// @ts-ignore
|
|
147
212
|
.addChildAt(np, 0);
|
|
148
213
|
});
|
|
149
214
|
}
|
|
@@ -7,15 +7,80 @@ import { Renderer } from '@eva/plugin-renderer';
|
|
|
7
7
|
import { RendererManager } from '@eva/plugin-renderer';
|
|
8
8
|
import { RendererSystem } from '@eva/plugin-renderer';
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* 九宫格组件
|
|
12
|
+
*
|
|
13
|
+
* NinePatch 组件用于实现可拉伸的图片，保持边角不变形。
|
|
14
|
+
* 将图片分为 9 个区域，拉伸时只拉伸中间区域，边角保持原始比例，
|
|
15
|
+
* 适用于按钮、对话框、面板等需要自适应尺寸的 UI 元素。
|
|
16
|
+
*
|
|
17
|
+
* 九宫格原理：
|
|
18
|
+
* ```
|
|
19
|
+
* +-------+-------+-------+
|
|
20
|
+
* | 左上 | 上 | 右上 |
|
|
21
|
+
* +-------+-------+-------+
|
|
22
|
+
* | 左 | 中间 | 右 |
|
|
23
|
+
* +-------+-------+-------+
|
|
24
|
+
* | 左下 | 下 | 右下 |
|
|
25
|
+
* +-------+-------+-------+
|
|
26
|
+
* ```
|
|
27
|
+
* 拉伸时，四个角保持不变，四条边单向拉伸，中间区域双向拉伸。
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```typescript
|
|
31
|
+
* // 创建可拉伸的按钮背景
|
|
32
|
+
* const button = new GameObject('button');
|
|
33
|
+
* button.addComponent(new NinePatch({
|
|
34
|
+
* resource: 'buttonBg', // 按钮背景资源
|
|
35
|
+
* spriteName: 'btn_normal.png',
|
|
36
|
+
* leftWidth: 20, // 左边不拉伸区域宽度
|
|
37
|
+
* topHeight: 20, // 顶部不拉伸区域高度
|
|
38
|
+
* rightWidth: 20, // 右边不拉伸区域宽度
|
|
39
|
+
* bottomHeight: 20 // 底部不拉伸区域高度
|
|
40
|
+
* }));
|
|
41
|
+
*
|
|
42
|
+
* // 设置按钮尺寸（自动拉伸）
|
|
43
|
+
* button.transform.size = { width: 200, height: 60 };
|
|
44
|
+
*
|
|
45
|
+
* // 创建对话框背景
|
|
46
|
+
* const dialog = new GameObject('dialog');
|
|
47
|
+
* dialog.addComponent(new NinePatch({
|
|
48
|
+
* resource: 'dialogBg',
|
|
49
|
+
* leftWidth: 30,
|
|
50
|
+
* topHeight: 30,
|
|
51
|
+
* rightWidth: 30,
|
|
52
|
+
* bottomHeight: 30
|
|
53
|
+
* }));
|
|
54
|
+
* dialog.transform.size = { width: 400, height: 300 };
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
10
57
|
export declare class NinePatch extends Component<NinePatchParams> {
|
|
58
|
+
/** 组件名称 */
|
|
11
59
|
static componentName: string;
|
|
60
|
+
/** 九宫格精灵实例 */
|
|
12
61
|
ninePatch: NinePatch_2;
|
|
62
|
+
/** 图片资源名称 */
|
|
13
63
|
resource: string;
|
|
64
|
+
/** 精灵图集中的图片名称 */
|
|
14
65
|
spriteName: string;
|
|
66
|
+
/** 左边不拉伸区域的宽度 */
|
|
15
67
|
leftWidth: number;
|
|
68
|
+
/** 顶部不拉伸区域的高度 */
|
|
16
69
|
topHeight: number;
|
|
70
|
+
/** 右边不拉伸区域的宽度 */
|
|
17
71
|
rightWidth: number;
|
|
72
|
+
/** 底部不拉伸区域的高度 */
|
|
18
73
|
bottomHeight: number;
|
|
74
|
+
/**
|
|
75
|
+
* 初始化组件
|
|
76
|
+
* @param obj - 初始化参数
|
|
77
|
+
* @param obj.resource - 资源名称
|
|
78
|
+
* @param obj.spriteName - 精灵名称
|
|
79
|
+
* @param obj.leftWidth - 左边固定宽度
|
|
80
|
+
* @param obj.topHeight - 顶部固定高度
|
|
81
|
+
* @param obj.rightWidth - 右边固定宽度
|
|
82
|
+
* @param obj.bottomHeight - 底部固定高度
|
|
83
|
+
*/
|
|
19
84
|
init(obj?: NinePatchParams): void;
|
|
20
85
|
}
|
|
21
86
|
|
|
@@ -34,16 +34,79 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
/**
|
|
38
|
+
* 九宫格组件
|
|
39
|
+
*
|
|
40
|
+
* NinePatch 组件用于实现可拉伸的图片，保持边角不变形。
|
|
41
|
+
* 将图片分为 9 个区域，拉伸时只拉伸中间区域，边角保持原始比例，
|
|
42
|
+
* 适用于按钮、对话框、面板等需要自适应尺寸的 UI 元素。
|
|
43
|
+
*
|
|
44
|
+
* 九宫格原理：
|
|
45
|
+
* ```
|
|
46
|
+
* +-------+-------+-------+
|
|
47
|
+
* | 左上 | 上 | 右上 |
|
|
48
|
+
* +-------+-------+-------+
|
|
49
|
+
* | 左 | 中间 | 右 |
|
|
50
|
+
* +-------+-------+-------+
|
|
51
|
+
* | 左下 | 下 | 右下 |
|
|
52
|
+
* +-------+-------+-------+
|
|
53
|
+
* ```
|
|
54
|
+
* 拉伸时，四个角保持不变，四条边单向拉伸，中间区域双向拉伸。
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```typescript
|
|
58
|
+
* // 创建可拉伸的按钮背景
|
|
59
|
+
* const button = new GameObject('button');
|
|
60
|
+
* button.addComponent(new NinePatch({
|
|
61
|
+
* resource: 'buttonBg', // 按钮背景资源
|
|
62
|
+
* spriteName: 'btn_normal.png',
|
|
63
|
+
* leftWidth: 20, // 左边不拉伸区域宽度
|
|
64
|
+
* topHeight: 20, // 顶部不拉伸区域高度
|
|
65
|
+
* rightWidth: 20, // 右边不拉伸区域宽度
|
|
66
|
+
* bottomHeight: 20 // 底部不拉伸区域高度
|
|
67
|
+
* }));
|
|
68
|
+
*
|
|
69
|
+
* // 设置按钮尺寸（自动拉伸）
|
|
70
|
+
* button.transform.size = { width: 200, height: 60 };
|
|
71
|
+
*
|
|
72
|
+
* // 创建对话框背景
|
|
73
|
+
* const dialog = new GameObject('dialog');
|
|
74
|
+
* dialog.addComponent(new NinePatch({
|
|
75
|
+
* resource: 'dialogBg',
|
|
76
|
+
* leftWidth: 30,
|
|
77
|
+
* topHeight: 30,
|
|
78
|
+
* rightWidth: 30,
|
|
79
|
+
* bottomHeight: 30
|
|
80
|
+
* }));
|
|
81
|
+
* dialog.transform.size = { width: 400, height: 300 };
|
|
82
|
+
* ```
|
|
83
|
+
*/
|
|
37
84
|
class NinePatch$2 extends Component {
|
|
38
85
|
constructor() {
|
|
39
86
|
super(...arguments);
|
|
87
|
+
/** 图片资源名称 */
|
|
40
88
|
this.resource = '';
|
|
89
|
+
/** 精灵图集中的图片名称 */
|
|
41
90
|
this.spriteName = '';
|
|
91
|
+
/** 左边不拉伸区域的宽度 */
|
|
42
92
|
this.leftWidth = 0;
|
|
93
|
+
/** 顶部不拉伸区域的高度 */
|
|
43
94
|
this.topHeight = 0;
|
|
95
|
+
/** 右边不拉伸区域的宽度 */
|
|
44
96
|
this.rightWidth = 0;
|
|
97
|
+
/** 底部不拉伸区域的高度 */
|
|
45
98
|
this.bottomHeight = 0;
|
|
46
99
|
}
|
|
100
|
+
/**
|
|
101
|
+
* 初始化组件
|
|
102
|
+
* @param obj - 初始化参数
|
|
103
|
+
* @param obj.resource - 资源名称
|
|
104
|
+
* @param obj.spriteName - 精灵名称
|
|
105
|
+
* @param obj.leftWidth - 左边固定宽度
|
|
106
|
+
* @param obj.topHeight - 顶部固定高度
|
|
107
|
+
* @param obj.rightWidth - 右边固定宽度
|
|
108
|
+
* @param obj.bottomHeight - 底部固定高度
|
|
109
|
+
*/
|
|
47
110
|
init(obj) {
|
|
48
111
|
this.resource = obj.resource;
|
|
49
112
|
this.spriteName = obj.spriteName;
|
|
@@ -53,6 +116,7 @@ class NinePatch$2 extends Component {
|
|
|
53
116
|
this.bottomHeight = obj.bottomHeight;
|
|
54
117
|
}
|
|
55
118
|
}
|
|
119
|
+
/** 组件名称 */
|
|
56
120
|
NinePatch$2.componentName = 'NinePatch';
|
|
57
121
|
__decorate([
|
|
58
122
|
type('string')
|
|
@@ -77,7 +141,7 @@ __decorate([
|
|
|
77
141
|
step(1)
|
|
78
142
|
], NinePatch$2.prototype, "bottomHeight", void 0);
|
|
79
143
|
|
|
80
|
-
const resourceKeySplit = '_s|r|c_';
|
|
144
|
+
const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
|
|
81
145
|
let NinePatch = class NinePatch extends Renderer {
|
|
82
146
|
constructor() {
|
|
83
147
|
super(...arguments);
|
|
@@ -140,6 +204,7 @@ let NinePatch = class NinePatch extends Renderer {
|
|
|
140
204
|
component.ninePatch = np;
|
|
141
205
|
this.containerManager
|
|
142
206
|
.getContainer(changed.gameObject.id)
|
|
207
|
+
// @ts-ignore
|
|
143
208
|
.addChildAt(np, 0);
|
|
144
209
|
});
|
|
145
210
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-nine-patch",
|
|
3
|
-
"version": "2.0.1-beta.
|
|
3
|
+
"version": "2.0.1-beta.31",
|
|
4
4
|
"description": "@eva/plugin-renderer-nine-patch",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-nine-patch.esm.js",
|
|
@@ -19,8 +19,8 @@
|
|
|
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.31",
|
|
23
|
+
"@eva/renderer-adapter": "2.0.1-beta.31",
|
|
24
|
+
"@eva/eva.js": "2.0.1-beta.31"
|
|
25
25
|
}
|
|
26
26
|
}
|