@eva/plugin-renderer-nine-patch 2.1.0-beta.3 → 2.1.0-beta.4
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/dist/EVA.plugin.renderer.ninePatch.js +171 -0
- package/dist/EVA.plugin.renderer.ninePatch.min.js +1 -0
- package/dist/plugin-renderer-nine-patch.cjs.js +252 -0
- package/dist/plugin-renderer-nine-patch.cjs.prod.js +1 -0
- package/dist/plugin-renderer-nine-patch.d.ts +112 -0
- package/dist/plugin-renderer-nine-patch.esm.js +247 -0
- package/package.json +4 -4
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
globalThis.EVA = globalThis.EVA || {};
|
|
2
|
+
globalThis.EVA.plugin = globalThis.EVA.plugin || {};
|
|
3
|
+
globalThis.EVA.plugin.renderer = globalThis.EVA.plugin.renderer || {};
|
|
4
|
+
var _EVA_IIFE_ninePatch = function (exports, eva_js, pluginRenderer, rendererAdapter) {
|
|
5
|
+
'use strict';
|
|
6
|
+
function __decorate(decorators, target, key, desc) {
|
|
7
|
+
var c = arguments.length,
|
|
8
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
9
|
+
d;
|
|
10
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
11
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
12
|
+
}
|
|
13
|
+
function __metadata(metadataKey, metadataValue) {
|
|
14
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
|
|
15
|
+
}
|
|
16
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
17
|
+
function adopt(value) {
|
|
18
|
+
return value instanceof P ? value : new P(function (resolve) {
|
|
19
|
+
resolve(value);
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
23
|
+
function fulfilled(value) {
|
|
24
|
+
try {
|
|
25
|
+
step(generator.next(value));
|
|
26
|
+
} catch (e) {
|
|
27
|
+
reject(e);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
function rejected(value) {
|
|
31
|
+
try {
|
|
32
|
+
step(generator["throw"](value));
|
|
33
|
+
} catch (e) {
|
|
34
|
+
reject(e);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
function step(result) {
|
|
38
|
+
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
39
|
+
}
|
|
40
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
44
|
+
var e = new Error(message);
|
|
45
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
46
|
+
};
|
|
47
|
+
class NinePatch$2 extends eva_js.Component {
|
|
48
|
+
constructor() {
|
|
49
|
+
super(...arguments);
|
|
50
|
+
this.resource = '';
|
|
51
|
+
this.spriteName = '';
|
|
52
|
+
this.leftWidth = 0;
|
|
53
|
+
this.topHeight = 0;
|
|
54
|
+
this.rightWidth = 0;
|
|
55
|
+
this.bottomHeight = 0;
|
|
56
|
+
}
|
|
57
|
+
init(obj) {
|
|
58
|
+
if (!obj) return;
|
|
59
|
+
this.resource = obj.resource;
|
|
60
|
+
this.spriteName = obj.spriteName;
|
|
61
|
+
this.leftWidth = obj.leftWidth;
|
|
62
|
+
this.topHeight = obj.topHeight;
|
|
63
|
+
this.rightWidth = obj.rightWidth;
|
|
64
|
+
this.bottomHeight = obj.bottomHeight;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
NinePatch$2.componentName = 'NinePatch';
|
|
68
|
+
__decorate([eva_js.type('string'), __metadata("design:type", String)], NinePatch$2.prototype, "resource", void 0);
|
|
69
|
+
__decorate([eva_js.type('string'), __metadata("design:type", String)], NinePatch$2.prototype, "spriteName", void 0);
|
|
70
|
+
__decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], NinePatch$2.prototype, "leftWidth", void 0);
|
|
71
|
+
__decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], NinePatch$2.prototype, "topHeight", void 0);
|
|
72
|
+
__decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], NinePatch$2.prototype, "rightWidth", void 0);
|
|
73
|
+
__decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], NinePatch$2.prototype, "bottomHeight", void 0);
|
|
74
|
+
const resourceKeySplit = '_s|r|c_';
|
|
75
|
+
let NinePatch = class NinePatch extends pluginRenderer.Renderer {
|
|
76
|
+
constructor() {
|
|
77
|
+
super(...arguments);
|
|
78
|
+
this.name = 'NinePatch';
|
|
79
|
+
this.ninePatch = {};
|
|
80
|
+
}
|
|
81
|
+
init() {
|
|
82
|
+
this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
|
|
83
|
+
this.renderSystem.rendererManager.register(this);
|
|
84
|
+
}
|
|
85
|
+
rendererUpdate(gameObject) {
|
|
86
|
+
const {
|
|
87
|
+
width,
|
|
88
|
+
height
|
|
89
|
+
} = gameObject.transform.size;
|
|
90
|
+
if (this.ninePatch[gameObject.id]) {
|
|
91
|
+
this.ninePatch[gameObject.id].width = width;
|
|
92
|
+
this.ninePatch[gameObject.id].height = height;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
componentChanged(changed) {
|
|
96
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
97
|
+
if (changed.componentName === 'NinePatch') {
|
|
98
|
+
if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
|
|
99
|
+
this.add(changed);
|
|
100
|
+
} else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
|
|
101
|
+
this.remove(changed);
|
|
102
|
+
} else {
|
|
103
|
+
this.remove(changed);
|
|
104
|
+
this.add(changed);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
add(changed) {
|
|
110
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
111
|
+
const component = changed.component;
|
|
112
|
+
const gameObjectId = changed.gameObject.id;
|
|
113
|
+
const asyncId = this.increaseAsyncId(gameObjectId);
|
|
114
|
+
const {
|
|
115
|
+
type,
|
|
116
|
+
data,
|
|
117
|
+
instance
|
|
118
|
+
} = yield eva_js.resource.getResource(component.resource);
|
|
119
|
+
if (!this.validateAsyncId(gameObjectId, asyncId)) return;
|
|
120
|
+
if (!data) {
|
|
121
|
+
console.error(`GameObject:${changed.gameObject.name}'s NinePatch resource load error`);
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
let img;
|
|
125
|
+
if (type === eva_js.RESOURCE_TYPE.SPRITE && component.spriteName) {
|
|
126
|
+
if (!instance) {
|
|
127
|
+
console.error(`GameObjectNinePatch Sprite resource rely on the Sprite system`);
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
img = instance[component.resource + resourceKeySplit + component.spriteName];
|
|
131
|
+
} else {
|
|
132
|
+
img = data.image;
|
|
133
|
+
}
|
|
134
|
+
const {
|
|
135
|
+
leftWidth,
|
|
136
|
+
topHeight,
|
|
137
|
+
rightWidth,
|
|
138
|
+
bottomHeight
|
|
139
|
+
} = component;
|
|
140
|
+
const np = new rendererAdapter.NinePatch(img, leftWidth, topHeight, rightWidth, bottomHeight);
|
|
141
|
+
this.ninePatch[changed.gameObject.id] = np;
|
|
142
|
+
component.ninePatch = np;
|
|
143
|
+
this.containerManager.getContainer(changed.gameObject.id).addChildAt(np, 0);
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
remove(changed) {
|
|
147
|
+
const gameObjectId = changed.gameObject.id;
|
|
148
|
+
this.increaseAsyncId(gameObjectId);
|
|
149
|
+
const sprite = this.ninePatch[gameObjectId];
|
|
150
|
+
if (sprite) {
|
|
151
|
+
this.containerManager.getContainer(changed.gameObject.id).removeChild(sprite);
|
|
152
|
+
delete this.ninePatch[changed.gameObject.id];
|
|
153
|
+
sprite.destroy({
|
|
154
|
+
children: true
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
NinePatch.systemName = 'NinePatch';
|
|
160
|
+
NinePatch = __decorate([eva_js.decorators.componentObserver({
|
|
161
|
+
NinePatch: ['resource', 'spriteName', 'leftWidth', 'topHeight', 'rightWidth', 'bottomHeight']
|
|
162
|
+
})], NinePatch);
|
|
163
|
+
var NinePatch$1 = NinePatch;
|
|
164
|
+
exports.NinePatch = NinePatch$2;
|
|
165
|
+
exports.NinePatchSystem = NinePatch$1;
|
|
166
|
+
Object.defineProperty(exports, '__esModule', {
|
|
167
|
+
value: true
|
|
168
|
+
});
|
|
169
|
+
return exports;
|
|
170
|
+
}({}, EVA, EVA.plugin.renderer, EVA.rendererAdapter);
|
|
171
|
+
globalThis.EVA.plugin.renderer.ninePatch = globalThis.EVA.plugin.renderer.ninePatch || _EVA_IIFE_ninePatch;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_ninePatch=function(e,t,i,r){"use strict";function n(e,t,i,r){var n,o=arguments.length,s=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var h=e.length-1;h>=0;h--)(n=e[h])&&(s=(o<3?n(s):o>3?n(t,i,s):n(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s}function o(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(e,t,i,r){return new(i||(i=Promise))(function(n,o){function s(e){try{c(r.next(e))}catch(e){o(e)}}function h(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(s,h)}c((r=r.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class h extends t.Component{constructor(){super(...arguments),this.resource="",this.spriteName="",this.leftWidth=0,this.topHeight=0,this.rightWidth=0,this.bottomHeight=0}init(e){e&&(this.resource=e.resource,this.spriteName=e.spriteName,this.leftWidth=e.leftWidth,this.topHeight=e.topHeight,this.rightWidth=e.rightWidth,this.bottomHeight=e.bottomHeight)}}h.componentName="NinePatch",n([t.type("string"),o("design:type",String)],h.prototype,"resource",void 0),n([t.type("string"),o("design:type",String)],h.prototype,"spriteName",void 0),n([t.type("number"),t.step(1),o("design:type",Number)],h.prototype,"leftWidth",void 0),n([t.type("number"),t.step(1),o("design:type",Number)],h.prototype,"topHeight",void 0),n([t.type("number"),t.step(1),o("design:type",Number)],h.prototype,"rightWidth",void 0),n([t.type("number"),t.step(1),o("design:type",Number)],h.prototype,"bottomHeight",void 0);let c=class extends i.Renderer{constructor(){super(...arguments),this.name="NinePatch",this.ninePatch={}}init(){this.renderSystem=this.game.getSystem(i.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const{width:t,height:i}=e.transform.size;this.ninePatch[e.id]&&(this.ninePatch[e.id].width=t,this.ninePatch[e.id].height=i)}componentChanged(e){return s(this,void 0,void 0,function*(){"NinePatch"===e.componentName&&(e.type===t.OBSERVER_TYPE.ADD?this.add(e):e.type===t.OBSERVER_TYPE.REMOVE?this.remove(e):(this.remove(e),this.add(e)))})}add(e){return s(this,void 0,void 0,function*(){const i=e.component,n=e.gameObject.id,o=this.increaseAsyncId(n),{type:s,data:h,instance:c}=yield t.resource.getResource(i.resource);if(!this.validateAsyncId(n,o))return;if(!h)return void console.error(`GameObject:${e.gameObject.name}'s NinePatch resource load error`);let a;if(s===t.RESOURCE_TYPE.SPRITE&&i.spriteName){if(!c)return void console.error("GameObjectNinePatch Sprite resource rely on the Sprite system");a=c[i.resource+"_s|r|c_"+i.spriteName]}else a=h.image;const{leftWidth:d,topHeight:p,rightWidth:g,bottomHeight:u}=i,l=new r.NinePatch(a,d,p,g,u);this.ninePatch[e.gameObject.id]=l,i.ninePatch=l,this.containerManager.getContainer(e.gameObject.id).addChildAt(l,0)})}remove(e){const t=e.gameObject.id;this.increaseAsyncId(t);const i=this.ninePatch[t];i&&(this.containerManager.getContainer(e.gameObject.id).removeChild(i),delete this.ninePatch[e.gameObject.id],i.destroy({children:!0}))}};c.systemName="NinePatch",c=n([t.decorators.componentObserver({NinePatch:["resource","spriteName","leftWidth","topHeight","rightWidth","bottomHeight"]})],c);var a=c;return e.NinePatch=h,e.NinePatchSystem=a,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA,EVA.plugin.renderer,EVA.rendererAdapter);globalThis.EVA.plugin.renderer.ninePatch=globalThis.EVA.plugin.renderer.ninePatch||_EVA_IIFE_ninePatch;
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var eva_js = require('@eva/eva.js');
|
|
6
|
+
var pluginRenderer = require('@eva/plugin-renderer');
|
|
7
|
+
var rendererAdapter = require('@eva/renderer-adapter');
|
|
8
|
+
|
|
9
|
+
/******************************************************************************
|
|
10
|
+
Copyright (c) Microsoft Corporation.
|
|
11
|
+
|
|
12
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
13
|
+
purpose with or without fee is hereby granted.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
16
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
17
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
18
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
19
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
20
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
21
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
22
|
+
***************************************************************************** */
|
|
23
|
+
|
|
24
|
+
function __decorate(decorators, target, key, desc) {
|
|
25
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
26
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
27
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
28
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function __metadata(metadataKey, metadataValue) {
|
|
32
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
36
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
37
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
38
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
39
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
40
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
41
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
46
|
+
var e = new Error(message);
|
|
47
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* 九宫格组件
|
|
52
|
+
*
|
|
53
|
+
* NinePatch 组件用于实现可拉伸的图片，保持边角不变形。
|
|
54
|
+
* 将图片分为 9 个区域，拉伸时只拉伸中间区域，边角保持原始比例，
|
|
55
|
+
* 适用于按钮、对话框、面板等需要自适应尺寸的 UI 元素。
|
|
56
|
+
*
|
|
57
|
+
* 九宫格原理：
|
|
58
|
+
* ```
|
|
59
|
+
* +-------+-------+-------+
|
|
60
|
+
* | 左上 | 上 | 右上 |
|
|
61
|
+
* +-------+-------+-------+
|
|
62
|
+
* | 左 | 中间 | 右 |
|
|
63
|
+
* +-------+-------+-------+
|
|
64
|
+
* | 左下 | 下 | 右下 |
|
|
65
|
+
* +-------+-------+-------+
|
|
66
|
+
* ```
|
|
67
|
+
* 拉伸时，四个角保持不变，四条边单向拉伸，中间区域双向拉伸。
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* ```typescript
|
|
71
|
+
* // 创建可拉伸的按钮背景
|
|
72
|
+
* const button = new GameObject('button');
|
|
73
|
+
* button.addComponent(new NinePatch({
|
|
74
|
+
* resource: 'buttonBg', // 按钮背景资源
|
|
75
|
+
* spriteName: 'btn_normal.png',
|
|
76
|
+
* leftWidth: 20, // 左边不拉伸区域宽度
|
|
77
|
+
* topHeight: 20, // 顶部不拉伸区域高度
|
|
78
|
+
* rightWidth: 20, // 右边不拉伸区域宽度
|
|
79
|
+
* bottomHeight: 20 // 底部不拉伸区域高度
|
|
80
|
+
* }));
|
|
81
|
+
*
|
|
82
|
+
* // 设置按钮尺寸（自动拉伸）
|
|
83
|
+
* button.transform.size = { width: 200, height: 60 };
|
|
84
|
+
*
|
|
85
|
+
* // 创建对话框背景
|
|
86
|
+
* const dialog = new GameObject('dialog');
|
|
87
|
+
* dialog.addComponent(new NinePatch({
|
|
88
|
+
* resource: 'dialogBg',
|
|
89
|
+
* leftWidth: 30,
|
|
90
|
+
* topHeight: 30,
|
|
91
|
+
* rightWidth: 30,
|
|
92
|
+
* bottomHeight: 30
|
|
93
|
+
* }));
|
|
94
|
+
* dialog.transform.size = { width: 400, height: 300 };
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
class NinePatch$2 extends eva_js.Component {
|
|
98
|
+
constructor() {
|
|
99
|
+
super(...arguments);
|
|
100
|
+
/** 图片资源名称 */
|
|
101
|
+
this.resource = '';
|
|
102
|
+
/** 精灵图集中的图片名称 */
|
|
103
|
+
this.spriteName = '';
|
|
104
|
+
/** 左边不拉伸区域的宽度 */
|
|
105
|
+
this.leftWidth = 0;
|
|
106
|
+
/** 顶部不拉伸区域的高度 */
|
|
107
|
+
this.topHeight = 0;
|
|
108
|
+
/** 右边不拉伸区域的宽度 */
|
|
109
|
+
this.rightWidth = 0;
|
|
110
|
+
/** 底部不拉伸区域的高度 */
|
|
111
|
+
this.bottomHeight = 0;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* 初始化组件
|
|
115
|
+
* @param obj - 初始化参数
|
|
116
|
+
* @param obj.resource - 资源名称
|
|
117
|
+
* @param obj.spriteName - 精灵名称
|
|
118
|
+
* @param obj.leftWidth - 左边固定宽度
|
|
119
|
+
* @param obj.topHeight - 顶部固定高度
|
|
120
|
+
* @param obj.rightWidth - 右边固定宽度
|
|
121
|
+
* @param obj.bottomHeight - 底部固定高度
|
|
122
|
+
*/
|
|
123
|
+
init(obj) {
|
|
124
|
+
if (!obj)
|
|
125
|
+
return;
|
|
126
|
+
this.resource = obj.resource;
|
|
127
|
+
this.spriteName = obj.spriteName;
|
|
128
|
+
this.leftWidth = obj.leftWidth;
|
|
129
|
+
this.topHeight = obj.topHeight;
|
|
130
|
+
this.rightWidth = obj.rightWidth;
|
|
131
|
+
this.bottomHeight = obj.bottomHeight;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
/** 组件名称 */
|
|
135
|
+
NinePatch$2.componentName = 'NinePatch';
|
|
136
|
+
__decorate([
|
|
137
|
+
eva_js.type('string'),
|
|
138
|
+
__metadata("design:type", String)
|
|
139
|
+
], NinePatch$2.prototype, "resource", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
eva_js.type('string'),
|
|
142
|
+
__metadata("design:type", String)
|
|
143
|
+
], NinePatch$2.prototype, "spriteName", void 0);
|
|
144
|
+
__decorate([
|
|
145
|
+
eva_js.type('number'),
|
|
146
|
+
eva_js.step(1),
|
|
147
|
+
__metadata("design:type", Number)
|
|
148
|
+
], NinePatch$2.prototype, "leftWidth", void 0);
|
|
149
|
+
__decorate([
|
|
150
|
+
eva_js.type('number'),
|
|
151
|
+
eva_js.step(1),
|
|
152
|
+
__metadata("design:type", Number)
|
|
153
|
+
], NinePatch$2.prototype, "topHeight", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
eva_js.type('number'),
|
|
156
|
+
eva_js.step(1),
|
|
157
|
+
__metadata("design:type", Number)
|
|
158
|
+
], NinePatch$2.prototype, "rightWidth", void 0);
|
|
159
|
+
__decorate([
|
|
160
|
+
eva_js.type('number'),
|
|
161
|
+
eva_js.step(1),
|
|
162
|
+
__metadata("design:type", Number)
|
|
163
|
+
], NinePatch$2.prototype, "bottomHeight", void 0);
|
|
164
|
+
|
|
165
|
+
const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
|
|
166
|
+
let NinePatch = class NinePatch extends pluginRenderer.Renderer {
|
|
167
|
+
constructor() {
|
|
168
|
+
super(...arguments);
|
|
169
|
+
this.name = 'NinePatch';
|
|
170
|
+
this.ninePatch = {};
|
|
171
|
+
}
|
|
172
|
+
init() {
|
|
173
|
+
this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
|
|
174
|
+
this.renderSystem.rendererManager.register(this);
|
|
175
|
+
}
|
|
176
|
+
rendererUpdate(gameObject) {
|
|
177
|
+
const { width, height } = gameObject.transform.size;
|
|
178
|
+
if (this.ninePatch[gameObject.id]) {
|
|
179
|
+
this.ninePatch[gameObject.id].width = width;
|
|
180
|
+
this.ninePatch[gameObject.id].height = height;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
componentChanged(changed) {
|
|
184
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
185
|
+
if (changed.componentName === 'NinePatch') {
|
|
186
|
+
if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
|
|
187
|
+
this.add(changed);
|
|
188
|
+
}
|
|
189
|
+
else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
|
|
190
|
+
this.remove(changed);
|
|
191
|
+
}
|
|
192
|
+
else {
|
|
193
|
+
this.remove(changed);
|
|
194
|
+
this.add(changed);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
add(changed) {
|
|
200
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
201
|
+
const component = changed.component;
|
|
202
|
+
const gameObjectId = changed.gameObject.id;
|
|
203
|
+
const asyncId = this.increaseAsyncId(gameObjectId);
|
|
204
|
+
const { type, data, instance } = yield eva_js.resource.getResource(component.resource);
|
|
205
|
+
if (!this.validateAsyncId(gameObjectId, asyncId))
|
|
206
|
+
return;
|
|
207
|
+
if (!data) {
|
|
208
|
+
console.error(`GameObject:${changed.gameObject.name}'s NinePatch resource load error`);
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
let img;
|
|
212
|
+
if (type === eva_js.RESOURCE_TYPE.SPRITE && component.spriteName) {
|
|
213
|
+
if (!instance) {
|
|
214
|
+
console.error(`GameObjectNinePatch Sprite resource rely on the Sprite system`);
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
img = instance[component.resource + resourceKeySplit + component.spriteName];
|
|
218
|
+
}
|
|
219
|
+
else {
|
|
220
|
+
img = data.image;
|
|
221
|
+
}
|
|
222
|
+
const { leftWidth, topHeight, rightWidth, bottomHeight } = component;
|
|
223
|
+
const np = new rendererAdapter.NinePatch(img, leftWidth, topHeight, rightWidth, bottomHeight);
|
|
224
|
+
this.ninePatch[changed.gameObject.id] = np;
|
|
225
|
+
component.ninePatch = np;
|
|
226
|
+
this.containerManager
|
|
227
|
+
.getContainer(changed.gameObject.id)
|
|
228
|
+
// @ts-ignore
|
|
229
|
+
.addChildAt(np, 0);
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
remove(changed) {
|
|
233
|
+
const gameObjectId = changed.gameObject.id;
|
|
234
|
+
this.increaseAsyncId(gameObjectId);
|
|
235
|
+
const sprite = this.ninePatch[gameObjectId];
|
|
236
|
+
if (sprite) {
|
|
237
|
+
this.containerManager.getContainer(changed.gameObject.id).removeChild(sprite);
|
|
238
|
+
delete this.ninePatch[changed.gameObject.id];
|
|
239
|
+
sprite.destroy({ children: true });
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
NinePatch.systemName = 'NinePatch';
|
|
244
|
+
NinePatch = __decorate([
|
|
245
|
+
eva_js.decorators.componentObserver({
|
|
246
|
+
NinePatch: ['resource', 'spriteName', 'leftWidth', 'topHeight', 'rightWidth', 'bottomHeight'],
|
|
247
|
+
})
|
|
248
|
+
], NinePatch);
|
|
249
|
+
var NinePatch$1 = NinePatch;
|
|
250
|
+
|
|
251
|
+
exports.NinePatch = NinePatch$2;
|
|
252
|
+
exports.NinePatchSystem = NinePatch$1;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/eva.js"),t=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter");function r(e,t,i,r){var n,o=arguments.length,s=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(s=(o<3?n(s):o>3?n(t,i,s):n(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s}function n(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function o(e,t,i,r){return new(i||(i=Promise))(function(n,o){function s(e){try{h(r.next(e))}catch(e){o(e)}}function c(e){try{h(r.throw(e))}catch(e){o(e)}}function h(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(s,c)}h((r=r.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class s extends e.Component{constructor(){super(...arguments),this.resource="",this.spriteName="",this.leftWidth=0,this.topHeight=0,this.rightWidth=0,this.bottomHeight=0}init(e){e&&(this.resource=e.resource,this.spriteName=e.spriteName,this.leftWidth=e.leftWidth,this.topHeight=e.topHeight,this.rightWidth=e.rightWidth,this.bottomHeight=e.bottomHeight)}}s.componentName="NinePatch",r([e.type("string"),n("design:type",String)],s.prototype,"resource",void 0),r([e.type("string"),n("design:type",String)],s.prototype,"spriteName",void 0),r([e.type("number"),e.step(1),n("design:type",Number)],s.prototype,"leftWidth",void 0),r([e.type("number"),e.step(1),n("design:type",Number)],s.prototype,"topHeight",void 0),r([e.type("number"),e.step(1),n("design:type",Number)],s.prototype,"rightWidth",void 0),r([e.type("number"),e.step(1),n("design:type",Number)],s.prototype,"bottomHeight",void 0);let c=class extends t.Renderer{constructor(){super(...arguments),this.name="NinePatch",this.ninePatch={}}init(){this.renderSystem=this.game.getSystem(t.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const{width:t,height:i}=e.transform.size;this.ninePatch[e.id]&&(this.ninePatch[e.id].width=t,this.ninePatch[e.id].height=i)}componentChanged(t){return o(this,void 0,void 0,function*(){"NinePatch"===t.componentName&&(t.type===e.OBSERVER_TYPE.ADD?this.add(t):t.type===e.OBSERVER_TYPE.REMOVE?this.remove(t):(this.remove(t),this.add(t)))})}add(t){return o(this,void 0,void 0,function*(){const r=t.component,n=t.gameObject.id,o=this.increaseAsyncId(n),{type:s,data:c,instance:h}=yield e.resource.getResource(r.resource);if(!this.validateAsyncId(n,o))return;if(!c)return void console.error(`GameObject:${t.gameObject.name}'s NinePatch resource load error`);let a;if(s===e.RESOURCE_TYPE.SPRITE&&r.spriteName){if(!h)return void console.error("GameObjectNinePatch Sprite resource rely on the Sprite system");a=h[r.resource+"_s|r|c_"+r.spriteName]}else a=c.image;const{leftWidth:d,topHeight:p,rightWidth:m,bottomHeight:u}=r,g=new i.NinePatch(a,d,p,m,u);this.ninePatch[t.gameObject.id]=g,r.ninePatch=g,this.containerManager.getContainer(t.gameObject.id).addChildAt(g,0)})}remove(e){const t=e.gameObject.id;this.increaseAsyncId(t);const i=this.ninePatch[t];i&&(this.containerManager.getContainer(e.gameObject.id).removeChild(i),delete this.ninePatch[e.gameObject.id],i.destroy({children:!0}))}};c.systemName="NinePatch",c=r([e.decorators.componentObserver({NinePatch:["resource","spriteName","leftWidth","topHeight","rightWidth","bottomHeight"]})],c);var h=c;exports.NinePatch=s,exports.NinePatchSystem=h;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { Component } from '@eva/eva.js';
|
|
2
|
+
import { ComponentChanged } from '@eva/eva.js';
|
|
3
|
+
import { ContainerManager } from '@eva/plugin-renderer';
|
|
4
|
+
import { GameObject } from '@eva/eva.js';
|
|
5
|
+
import { NinePatch as NinePatch_2 } from '@eva/renderer-adapter';
|
|
6
|
+
import { Renderer } from '@eva/plugin-renderer';
|
|
7
|
+
import { RendererManager } from '@eva/plugin-renderer';
|
|
8
|
+
import { RendererSystem } from '@eva/plugin-renderer';
|
|
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
|
+
*/
|
|
57
|
+
export declare class NinePatch extends Component<NinePatchParams> {
|
|
58
|
+
/** 组件名称 */
|
|
59
|
+
static componentName: string;
|
|
60
|
+
/** 九宫格精灵实例 */
|
|
61
|
+
ninePatch: NinePatch_2;
|
|
62
|
+
/** 图片资源名称 */
|
|
63
|
+
resource: string;
|
|
64
|
+
/** 精灵图集中的图片名称 */
|
|
65
|
+
spriteName: string;
|
|
66
|
+
/** 左边不拉伸区域的宽度 */
|
|
67
|
+
leftWidth: number;
|
|
68
|
+
/** 顶部不拉伸区域的高度 */
|
|
69
|
+
topHeight: number;
|
|
70
|
+
/** 右边不拉伸区域的宽度 */
|
|
71
|
+
rightWidth: number;
|
|
72
|
+
/** 底部不拉伸区域的高度 */
|
|
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
|
+
*/
|
|
84
|
+
init(obj?: NinePatchParams): void;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export declare interface NinePatchParams {
|
|
88
|
+
resource: string;
|
|
89
|
+
spriteName?: string;
|
|
90
|
+
leftWidth?: number;
|
|
91
|
+
topHeight?: number;
|
|
92
|
+
rightWidth?: number;
|
|
93
|
+
bottomHeight?: number;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export declare class NinePatchSystem extends Renderer {
|
|
97
|
+
static systemName: string;
|
|
98
|
+
name: string;
|
|
99
|
+
ninePatch: {
|
|
100
|
+
[propName: number]: NinePatch_2;
|
|
101
|
+
};
|
|
102
|
+
renderSystem: RendererSystem;
|
|
103
|
+
rendererManager: RendererManager;
|
|
104
|
+
containerManager: ContainerManager;
|
|
105
|
+
init(): void;
|
|
106
|
+
rendererUpdate(gameObject: GameObject): void;
|
|
107
|
+
componentChanged(changed: ComponentChanged): Promise<void>;
|
|
108
|
+
add(changed: ComponentChanged): Promise<void>;
|
|
109
|
+
remove(changed: ComponentChanged): void;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export { }
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
import { Component, type, step, decorators, OBSERVER_TYPE, resource, RESOURCE_TYPE } from '@eva/eva.js';
|
|
2
|
+
import { Renderer, RendererSystem } from '@eva/plugin-renderer';
|
|
3
|
+
import { NinePatch as NinePatch$3 } from '@eva/renderer-adapter';
|
|
4
|
+
|
|
5
|
+
/******************************************************************************
|
|
6
|
+
Copyright (c) Microsoft Corporation.
|
|
7
|
+
|
|
8
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
9
|
+
purpose with or without fee is hereby granted.
|
|
10
|
+
|
|
11
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
12
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
13
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
14
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
15
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
16
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
17
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
18
|
+
***************************************************************************** */
|
|
19
|
+
|
|
20
|
+
function __decorate(decorators, target, key, desc) {
|
|
21
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
22
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
23
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
24
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function __metadata(metadataKey, metadataValue) {
|
|
28
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
32
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
33
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
34
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
35
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
36
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
37
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
42
|
+
var e = new Error(message);
|
|
43
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* 九宫格组件
|
|
48
|
+
*
|
|
49
|
+
* NinePatch 组件用于实现可拉伸的图片，保持边角不变形。
|
|
50
|
+
* 将图片分为 9 个区域，拉伸时只拉伸中间区域，边角保持原始比例，
|
|
51
|
+
* 适用于按钮、对话框、面板等需要自适应尺寸的 UI 元素。
|
|
52
|
+
*
|
|
53
|
+
* 九宫格原理：
|
|
54
|
+
* ```
|
|
55
|
+
* +-------+-------+-------+
|
|
56
|
+
* | 左上 | 上 | 右上 |
|
|
57
|
+
* +-------+-------+-------+
|
|
58
|
+
* | 左 | 中间 | 右 |
|
|
59
|
+
* +-------+-------+-------+
|
|
60
|
+
* | 左下 | 下 | 右下 |
|
|
61
|
+
* +-------+-------+-------+
|
|
62
|
+
* ```
|
|
63
|
+
* 拉伸时，四个角保持不变，四条边单向拉伸，中间区域双向拉伸。
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```typescript
|
|
67
|
+
* // 创建可拉伸的按钮背景
|
|
68
|
+
* const button = new GameObject('button');
|
|
69
|
+
* button.addComponent(new NinePatch({
|
|
70
|
+
* resource: 'buttonBg', // 按钮背景资源
|
|
71
|
+
* spriteName: 'btn_normal.png',
|
|
72
|
+
* leftWidth: 20, // 左边不拉伸区域宽度
|
|
73
|
+
* topHeight: 20, // 顶部不拉伸区域高度
|
|
74
|
+
* rightWidth: 20, // 右边不拉伸区域宽度
|
|
75
|
+
* bottomHeight: 20 // 底部不拉伸区域高度
|
|
76
|
+
* }));
|
|
77
|
+
*
|
|
78
|
+
* // 设置按钮尺寸（自动拉伸）
|
|
79
|
+
* button.transform.size = { width: 200, height: 60 };
|
|
80
|
+
*
|
|
81
|
+
* // 创建对话框背景
|
|
82
|
+
* const dialog = new GameObject('dialog');
|
|
83
|
+
* dialog.addComponent(new NinePatch({
|
|
84
|
+
* resource: 'dialogBg',
|
|
85
|
+
* leftWidth: 30,
|
|
86
|
+
* topHeight: 30,
|
|
87
|
+
* rightWidth: 30,
|
|
88
|
+
* bottomHeight: 30
|
|
89
|
+
* }));
|
|
90
|
+
* dialog.transform.size = { width: 400, height: 300 };
|
|
91
|
+
* ```
|
|
92
|
+
*/
|
|
93
|
+
class NinePatch$2 extends Component {
|
|
94
|
+
constructor() {
|
|
95
|
+
super(...arguments);
|
|
96
|
+
/** 图片资源名称 */
|
|
97
|
+
this.resource = '';
|
|
98
|
+
/** 精灵图集中的图片名称 */
|
|
99
|
+
this.spriteName = '';
|
|
100
|
+
/** 左边不拉伸区域的宽度 */
|
|
101
|
+
this.leftWidth = 0;
|
|
102
|
+
/** 顶部不拉伸区域的高度 */
|
|
103
|
+
this.topHeight = 0;
|
|
104
|
+
/** 右边不拉伸区域的宽度 */
|
|
105
|
+
this.rightWidth = 0;
|
|
106
|
+
/** 底部不拉伸区域的高度 */
|
|
107
|
+
this.bottomHeight = 0;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* 初始化组件
|
|
111
|
+
* @param obj - 初始化参数
|
|
112
|
+
* @param obj.resource - 资源名称
|
|
113
|
+
* @param obj.spriteName - 精灵名称
|
|
114
|
+
* @param obj.leftWidth - 左边固定宽度
|
|
115
|
+
* @param obj.topHeight - 顶部固定高度
|
|
116
|
+
* @param obj.rightWidth - 右边固定宽度
|
|
117
|
+
* @param obj.bottomHeight - 底部固定高度
|
|
118
|
+
*/
|
|
119
|
+
init(obj) {
|
|
120
|
+
if (!obj)
|
|
121
|
+
return;
|
|
122
|
+
this.resource = obj.resource;
|
|
123
|
+
this.spriteName = obj.spriteName;
|
|
124
|
+
this.leftWidth = obj.leftWidth;
|
|
125
|
+
this.topHeight = obj.topHeight;
|
|
126
|
+
this.rightWidth = obj.rightWidth;
|
|
127
|
+
this.bottomHeight = obj.bottomHeight;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
/** 组件名称 */
|
|
131
|
+
NinePatch$2.componentName = 'NinePatch';
|
|
132
|
+
__decorate([
|
|
133
|
+
type('string'),
|
|
134
|
+
__metadata("design:type", String)
|
|
135
|
+
], NinePatch$2.prototype, "resource", void 0);
|
|
136
|
+
__decorate([
|
|
137
|
+
type('string'),
|
|
138
|
+
__metadata("design:type", String)
|
|
139
|
+
], NinePatch$2.prototype, "spriteName", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
type('number'),
|
|
142
|
+
step(1),
|
|
143
|
+
__metadata("design:type", Number)
|
|
144
|
+
], NinePatch$2.prototype, "leftWidth", void 0);
|
|
145
|
+
__decorate([
|
|
146
|
+
type('number'),
|
|
147
|
+
step(1),
|
|
148
|
+
__metadata("design:type", Number)
|
|
149
|
+
], NinePatch$2.prototype, "topHeight", void 0);
|
|
150
|
+
__decorate([
|
|
151
|
+
type('number'),
|
|
152
|
+
step(1),
|
|
153
|
+
__metadata("design:type", Number)
|
|
154
|
+
], NinePatch$2.prototype, "rightWidth", void 0);
|
|
155
|
+
__decorate([
|
|
156
|
+
type('number'),
|
|
157
|
+
step(1),
|
|
158
|
+
__metadata("design:type", Number)
|
|
159
|
+
], NinePatch$2.prototype, "bottomHeight", void 0);
|
|
160
|
+
|
|
161
|
+
const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
|
|
162
|
+
let NinePatch = class NinePatch extends Renderer {
|
|
163
|
+
constructor() {
|
|
164
|
+
super(...arguments);
|
|
165
|
+
this.name = 'NinePatch';
|
|
166
|
+
this.ninePatch = {};
|
|
167
|
+
}
|
|
168
|
+
init() {
|
|
169
|
+
this.renderSystem = this.game.getSystem(RendererSystem);
|
|
170
|
+
this.renderSystem.rendererManager.register(this);
|
|
171
|
+
}
|
|
172
|
+
rendererUpdate(gameObject) {
|
|
173
|
+
const { width, height } = gameObject.transform.size;
|
|
174
|
+
if (this.ninePatch[gameObject.id]) {
|
|
175
|
+
this.ninePatch[gameObject.id].width = width;
|
|
176
|
+
this.ninePatch[gameObject.id].height = height;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
componentChanged(changed) {
|
|
180
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
181
|
+
if (changed.componentName === 'NinePatch') {
|
|
182
|
+
if (changed.type === OBSERVER_TYPE.ADD) {
|
|
183
|
+
this.add(changed);
|
|
184
|
+
}
|
|
185
|
+
else if (changed.type === OBSERVER_TYPE.REMOVE) {
|
|
186
|
+
this.remove(changed);
|
|
187
|
+
}
|
|
188
|
+
else {
|
|
189
|
+
this.remove(changed);
|
|
190
|
+
this.add(changed);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
}
|
|
195
|
+
add(changed) {
|
|
196
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
197
|
+
const component = changed.component;
|
|
198
|
+
const gameObjectId = changed.gameObject.id;
|
|
199
|
+
const asyncId = this.increaseAsyncId(gameObjectId);
|
|
200
|
+
const { type, data, instance } = yield resource.getResource(component.resource);
|
|
201
|
+
if (!this.validateAsyncId(gameObjectId, asyncId))
|
|
202
|
+
return;
|
|
203
|
+
if (!data) {
|
|
204
|
+
console.error(`GameObject:${changed.gameObject.name}'s NinePatch resource load error`);
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
let img;
|
|
208
|
+
if (type === RESOURCE_TYPE.SPRITE && component.spriteName) {
|
|
209
|
+
if (!instance) {
|
|
210
|
+
console.error(`GameObjectNinePatch Sprite resource rely on the Sprite system`);
|
|
211
|
+
return;
|
|
212
|
+
}
|
|
213
|
+
img = instance[component.resource + resourceKeySplit + component.spriteName];
|
|
214
|
+
}
|
|
215
|
+
else {
|
|
216
|
+
img = data.image;
|
|
217
|
+
}
|
|
218
|
+
const { leftWidth, topHeight, rightWidth, bottomHeight } = component;
|
|
219
|
+
const np = new NinePatch$3(img, leftWidth, topHeight, rightWidth, bottomHeight);
|
|
220
|
+
this.ninePatch[changed.gameObject.id] = np;
|
|
221
|
+
component.ninePatch = np;
|
|
222
|
+
this.containerManager
|
|
223
|
+
.getContainer(changed.gameObject.id)
|
|
224
|
+
// @ts-ignore
|
|
225
|
+
.addChildAt(np, 0);
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
remove(changed) {
|
|
229
|
+
const gameObjectId = changed.gameObject.id;
|
|
230
|
+
this.increaseAsyncId(gameObjectId);
|
|
231
|
+
const sprite = this.ninePatch[gameObjectId];
|
|
232
|
+
if (sprite) {
|
|
233
|
+
this.containerManager.getContainer(changed.gameObject.id).removeChild(sprite);
|
|
234
|
+
delete this.ninePatch[changed.gameObject.id];
|
|
235
|
+
sprite.destroy({ children: true });
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
};
|
|
239
|
+
NinePatch.systemName = 'NinePatch';
|
|
240
|
+
NinePatch = __decorate([
|
|
241
|
+
decorators.componentObserver({
|
|
242
|
+
NinePatch: ['resource', 'spriteName', 'leftWidth', 'topHeight', 'rightWidth', 'bottomHeight'],
|
|
243
|
+
})
|
|
244
|
+
], NinePatch);
|
|
245
|
+
var NinePatch$1 = NinePatch;
|
|
246
|
+
|
|
247
|
+
export { NinePatch$2 as NinePatch, NinePatch$1 as NinePatchSystem };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-nine-patch",
|
|
3
|
-
"version": "2.1.0-beta.
|
|
3
|
+
"version": "2.1.0-beta.4",
|
|
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": "^2.0.0-beta.0",
|
|
22
|
-
"@eva/plugin-renderer": "2.1.0-beta.
|
|
23
|
-
"@eva/renderer-adapter": "2.1.0-beta.
|
|
24
|
-
"@eva/eva.js": "2.1.0-beta.
|
|
22
|
+
"@eva/plugin-renderer": "2.1.0-beta.4",
|
|
23
|
+
"@eva/renderer-adapter": "2.1.0-beta.4",
|
|
24
|
+
"@eva/eva.js": "2.1.0-beta.4"
|
|
25
25
|
}
|
|
26
26
|
}
|