lyb-pixi-js 1.0.3 → 1.0.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/package.json +3 -3
- package/dist/Base/LibBitText/index.d.ts +0 -18
- package/dist/Base/LibBitText/index.js +0 -26
- package/dist/Base/LibContainer/index.d.ts +0 -27
- package/dist/Base/LibContainer/index.js +0 -65
- package/dist/Base/LibParticleMove/index.d.ts +0 -37
- package/dist/Base/LibParticleMove/index.js +0 -127
- package/dist/Base/LibRectBgColor/index.d.ts +0 -27
- package/dist/Base/LibRectBgColor/index.js +0 -59
- package/dist/Base/LibSpine/index.d.ts +0 -56
- package/dist/Base/LibSpine/index.js +0 -151
- package/dist/Base/LibText/index.d.ts +0 -35
- package/dist/Base/LibText/index.js +0 -50
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lyb-pixi-js",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "自用Pixi.JS方法库",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"main": "./dist/index.js",
|
|
9
9
|
"scripts": {
|
|
10
|
-
"build": "
|
|
10
|
+
"build": "vite build & tsc"
|
|
11
11
|
},
|
|
12
12
|
"exports": {
|
|
13
13
|
"./*": "./dist/*"
|
|
@@ -45,4 +45,4 @@
|
|
|
45
45
|
"pixi.js": "^7.4.2",
|
|
46
46
|
"vite": "^4.5.5"
|
|
47
47
|
}
|
|
48
|
-
}
|
|
48
|
+
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { BitmapText } from "pixi.js";
|
|
2
|
-
/** @description 自定义位图文本 */
|
|
3
|
-
export declare class LibBitText {
|
|
4
|
-
/** 字体名称 */
|
|
5
|
-
private _fontName;
|
|
6
|
-
private _defaultFontSize?;
|
|
7
|
-
/**
|
|
8
|
-
* @param fontName 字体名称
|
|
9
|
-
* @param defaultFontSize 默认字体大小
|
|
10
|
-
*/
|
|
11
|
-
constructor(fontName: string, defaultFontSize?: number);
|
|
12
|
-
/** @description 创建位图文本
|
|
13
|
-
* @param text 文本内容
|
|
14
|
-
* @param fontSize 字体大小,不填则使用默认大小
|
|
15
|
-
* @returns 位图实例
|
|
16
|
-
*/
|
|
17
|
-
createText(text: string | number, fontSize?: number): BitmapText;
|
|
18
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { BitmapText } from "pixi.js";
|
|
2
|
-
/** @description 自定义位图文本 */
|
|
3
|
-
var LibBitText = /** @class */ (function () {
|
|
4
|
-
/**
|
|
5
|
-
* @param fontName 字体名称
|
|
6
|
-
* @param defaultFontSize 默认字体大小
|
|
7
|
-
*/
|
|
8
|
-
function LibBitText(fontName, defaultFontSize) {
|
|
9
|
-
this._fontName = fontName;
|
|
10
|
-
this._defaultFontSize = defaultFontSize;
|
|
11
|
-
}
|
|
12
|
-
/** @description 创建位图文本
|
|
13
|
-
* @param text 文本内容
|
|
14
|
-
* @param fontSize 字体大小,不填则使用默认大小
|
|
15
|
-
* @returns 位图实例
|
|
16
|
-
*/
|
|
17
|
-
LibBitText.prototype.createText = function (text, fontSize) {
|
|
18
|
-
var bitMapText = new BitmapText(text.toString(), {
|
|
19
|
-
fontName: this._fontName,
|
|
20
|
-
fontSize: this._defaultFontSize || fontSize,
|
|
21
|
-
});
|
|
22
|
-
return bitMapText;
|
|
23
|
-
};
|
|
24
|
-
return LibBitText;
|
|
25
|
-
}());
|
|
26
|
-
export { LibBitText };
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { Container } from "pixi.js";
|
|
2
|
-
interface LibContainerParams {
|
|
3
|
-
/** 宽度 */
|
|
4
|
-
width: number;
|
|
5
|
-
/** 高度 */
|
|
6
|
-
height: number;
|
|
7
|
-
/** 溢出裁剪 */
|
|
8
|
-
overHidden?: boolean;
|
|
9
|
-
/** 背景色 */
|
|
10
|
-
bgColor?: string;
|
|
11
|
-
}
|
|
12
|
-
/** @description 自定义容器大小及背景色 */
|
|
13
|
-
export declare class LibContainer extends Container {
|
|
14
|
-
/** 填充容器 */
|
|
15
|
-
private _fill?;
|
|
16
|
-
/** 背景色填充 */
|
|
17
|
-
private _bgColorFill?;
|
|
18
|
-
/**
|
|
19
|
-
* @param width 容器宽度
|
|
20
|
-
* @param height 容器高度
|
|
21
|
-
* @param bgColor 背景色
|
|
22
|
-
*/
|
|
23
|
-
constructor(params: LibContainerParams);
|
|
24
|
-
/** @description 设置容器大小 */
|
|
25
|
-
setSize(width: number, height: number): void;
|
|
26
|
-
}
|
|
27
|
-
export {};
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
if (typeof b !== "function" && b !== null)
|
|
10
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
-
extendStatics(d, b);
|
|
12
|
-
function __() { this.constructor = d; }
|
|
13
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
-
};
|
|
15
|
-
})();
|
|
16
|
-
import { Container, Graphics, Sprite } from "pixi.js";
|
|
17
|
-
import { LibRectBgColor } from "../LibRectBgColor";
|
|
18
|
-
/** @description 自定义容器大小及背景色 */
|
|
19
|
-
var LibContainer = /** @class */ (function (_super) {
|
|
20
|
-
__extends(LibContainer, _super);
|
|
21
|
-
/**
|
|
22
|
-
* @param width 容器宽度
|
|
23
|
-
* @param height 容器高度
|
|
24
|
-
* @param bgColor 背景色
|
|
25
|
-
*/
|
|
26
|
-
function LibContainer(params) {
|
|
27
|
-
var _this = _super.call(this) || this;
|
|
28
|
-
var width = params.width, height = params.height, overHidden = params.overHidden, bgColor = params.bgColor;
|
|
29
|
-
if (overHidden) {
|
|
30
|
-
var mask = new Graphics();
|
|
31
|
-
mask.beginFill(0xffffff); // 创建一个白色矩形
|
|
32
|
-
mask.drawRect(0, 0, width, height);
|
|
33
|
-
mask.endFill();
|
|
34
|
-
_this.addChild(mask);
|
|
35
|
-
_this.mask = mask;
|
|
36
|
-
}
|
|
37
|
-
if (bgColor) {
|
|
38
|
-
_this._bgColorFill = new LibRectBgColor({
|
|
39
|
-
width: width,
|
|
40
|
-
height: height,
|
|
41
|
-
bgColor: bgColor,
|
|
42
|
-
});
|
|
43
|
-
_this.addChild(_this._bgColorFill);
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
_this._fill = new Sprite();
|
|
47
|
-
_this._fill.width = width;
|
|
48
|
-
_this._fill.height = height;
|
|
49
|
-
_this.addChild(_this._fill);
|
|
50
|
-
}
|
|
51
|
-
return _this;
|
|
52
|
-
}
|
|
53
|
-
/** @description 设置容器大小 */
|
|
54
|
-
LibContainer.prototype.setSize = function (width, height) {
|
|
55
|
-
if (this._fill) {
|
|
56
|
-
this._fill.width = width;
|
|
57
|
-
this._fill.height = height;
|
|
58
|
-
}
|
|
59
|
-
if (this._bgColorFill) {
|
|
60
|
-
this._bgColorFill.renderBg(width, height);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
return LibContainer;
|
|
64
|
-
}(Container));
|
|
65
|
-
export { LibContainer };
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Container } from "pixi.js";
|
|
2
|
-
import { type EmitterConfigV3 } from "@pixi/particle-emitter";
|
|
3
|
-
export interface LibParticleMoveParams {
|
|
4
|
-
/** 粒子JSON资源 */
|
|
5
|
-
json: EmitterConfigV3;
|
|
6
|
-
/** 运动时长 */
|
|
7
|
-
duration: number;
|
|
8
|
-
/** 粒子开始位置 */
|
|
9
|
-
start: {
|
|
10
|
-
x: number;
|
|
11
|
-
y: number;
|
|
12
|
-
};
|
|
13
|
-
/** 粒子控制点 */
|
|
14
|
-
control: {
|
|
15
|
-
x: number;
|
|
16
|
-
y: number;
|
|
17
|
-
}[];
|
|
18
|
-
/** 粒子结束点 */
|
|
19
|
-
end: {
|
|
20
|
-
x: number;
|
|
21
|
-
y: number;
|
|
22
|
-
};
|
|
23
|
-
/** 运动曲线 */
|
|
24
|
-
ease?: gsap.EaseString;
|
|
25
|
-
/** 是否显示控制点,调试使用 */
|
|
26
|
-
showControl?: boolean;
|
|
27
|
-
/** 是否循环,调试使用 */
|
|
28
|
-
loop?: boolean;
|
|
29
|
-
}
|
|
30
|
-
/** @description 利用贝塞尔曲线实现粒子移动 */
|
|
31
|
-
export declare class LibParticleMove extends Container {
|
|
32
|
-
private _particleContainer;
|
|
33
|
-
constructor(params: LibParticleMoveParams);
|
|
34
|
-
private _createBezierPoints;
|
|
35
|
-
private _multiPointBezier;
|
|
36
|
-
private _binomial;
|
|
37
|
-
}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
if (typeof b !== "function" && b !== null)
|
|
10
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
-
extendStatics(d, b);
|
|
12
|
-
function __() { this.constructor = d; }
|
|
13
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
-
};
|
|
15
|
-
})();
|
|
16
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
17
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
18
|
-
if (ar || !(i in from)) {
|
|
19
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
20
|
-
ar[i] = from[i];
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
24
|
-
};
|
|
25
|
-
import { Container, ParticleContainer, Ticker } from "pixi.js";
|
|
26
|
-
import { Emitter } from "@pixi/particle-emitter";
|
|
27
|
-
import gsap from "gsap";
|
|
28
|
-
import { LibText } from "../LibText";
|
|
29
|
-
/** @description 利用贝塞尔曲线实现粒子移动 */
|
|
30
|
-
var LibParticleMove = /** @class */ (function (_super) {
|
|
31
|
-
__extends(LibParticleMove, _super);
|
|
32
|
-
function LibParticleMove(params) {
|
|
33
|
-
var _this = _super.call(this) || this;
|
|
34
|
-
var start = params.start, control = params.control, end = params.end, json = params.json, duration = params.duration, _a = params.ease, ease = _a === void 0 ? "power1.out" : _a, _b = params.showControl, showControl = _b === void 0 ? false : _b, _c = params.loop, loop = _c === void 0 ? false : _c;
|
|
35
|
-
_this._particleContainer = new ParticleContainer();
|
|
36
|
-
_this.addChild(_this._particleContainer);
|
|
37
|
-
// 初始化粒子发射器
|
|
38
|
-
var flyParticle = new Emitter(_this._particleContainer, json);
|
|
39
|
-
// 创建贝塞尔曲线的路径
|
|
40
|
-
var path = _this._createBezierPoints(__spreadArray(__spreadArray([start], control, true), [end], false), 100, showControl);
|
|
41
|
-
// 用来控制路径动画的对象
|
|
42
|
-
var flyObj = { pathThrough: 0 };
|
|
43
|
-
gsap.to(flyObj, {
|
|
44
|
-
duration: duration,
|
|
45
|
-
pathThrough: path.length - 1,
|
|
46
|
-
repeat: loop ? -1 : 0,
|
|
47
|
-
ease: ease,
|
|
48
|
-
onStart: function () {
|
|
49
|
-
flyParticle.emit = true;
|
|
50
|
-
},
|
|
51
|
-
onUpdate: function () {
|
|
52
|
-
var i = Math.floor(flyObj.pathThrough);
|
|
53
|
-
var p = path[i];
|
|
54
|
-
flyParticle.updateOwnerPos(p.x, p.y);
|
|
55
|
-
},
|
|
56
|
-
onComplete: function () {
|
|
57
|
-
gsap.to(_this, {
|
|
58
|
-
alpha: 0,
|
|
59
|
-
duration: 0.5,
|
|
60
|
-
onComplete: function () {
|
|
61
|
-
flyParticle.emit = false;
|
|
62
|
-
ticker.destroy();
|
|
63
|
-
_this.removeFromParent();
|
|
64
|
-
},
|
|
65
|
-
});
|
|
66
|
-
},
|
|
67
|
-
});
|
|
68
|
-
var ticker = new Ticker();
|
|
69
|
-
ticker.add(function () {
|
|
70
|
-
flyParticle.update(1 / 75);
|
|
71
|
-
});
|
|
72
|
-
ticker.start();
|
|
73
|
-
return _this;
|
|
74
|
-
}
|
|
75
|
-
LibParticleMove.prototype._createBezierPoints = function (anchorPoints, pointsAmount, showControl) {
|
|
76
|
-
var _this = this;
|
|
77
|
-
var points = [];
|
|
78
|
-
// 渲染控制点
|
|
79
|
-
if (showControl) {
|
|
80
|
-
anchorPoints.forEach(function (item, index) {
|
|
81
|
-
//创建一个小圆点
|
|
82
|
-
var text = new LibText({
|
|
83
|
-
text: index + 1,
|
|
84
|
-
fontSize: 16,
|
|
85
|
-
});
|
|
86
|
-
text.position.set(item.x, item.y);
|
|
87
|
-
_this.addChild(text);
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
// 计算并存储贝塞尔曲线上的点
|
|
91
|
-
for (var i = 0; i < pointsAmount; i++) {
|
|
92
|
-
var point = this._multiPointBezier(anchorPoints, i / pointsAmount);
|
|
93
|
-
points.push(point);
|
|
94
|
-
}
|
|
95
|
-
return points;
|
|
96
|
-
};
|
|
97
|
-
LibParticleMove.prototype._multiPointBezier = function (points, t) {
|
|
98
|
-
var len = points.length;
|
|
99
|
-
var x = 0, y = 0;
|
|
100
|
-
// 预计算组合数
|
|
101
|
-
var binomials = [];
|
|
102
|
-
for (var i = 0; i < len; i++) {
|
|
103
|
-
binomials[i] = this._binomial(len - 1, i);
|
|
104
|
-
}
|
|
105
|
-
// 计算贝塞尔曲线上的点
|
|
106
|
-
for (var i = 0; i < len; i++) {
|
|
107
|
-
var point = points[i];
|
|
108
|
-
var binom = binomials[i];
|
|
109
|
-
var factorT = Math.pow(t, i);
|
|
110
|
-
var factor1MinusT = Math.pow(1 - t, len - 1 - i);
|
|
111
|
-
x += point.x * factor1MinusT * factorT * binom;
|
|
112
|
-
y += point.y * factor1MinusT * factorT * binom;
|
|
113
|
-
}
|
|
114
|
-
return { x: x, y: y };
|
|
115
|
-
};
|
|
116
|
-
LibParticleMove.prototype._binomial = function (n, k) {
|
|
117
|
-
if (k === 0 || k === n)
|
|
118
|
-
return 1;
|
|
119
|
-
var res = 1;
|
|
120
|
-
for (var i = 1; i <= k; i++) {
|
|
121
|
-
res = (res * (n - i + 1)) / i;
|
|
122
|
-
}
|
|
123
|
-
return res;
|
|
124
|
-
};
|
|
125
|
-
return LibParticleMove;
|
|
126
|
-
}(Container));
|
|
127
|
-
export { LibParticleMove };
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { Graphics } from "pixi.js";
|
|
2
|
-
export interface LibRectBgColorParams {
|
|
3
|
-
/** 宽度 */
|
|
4
|
-
width?: number;
|
|
5
|
-
/** 高度 */
|
|
6
|
-
height?: number;
|
|
7
|
-
/** 背景颜色 */
|
|
8
|
-
bgColor?: string | number;
|
|
9
|
-
/** x轴偏移 */
|
|
10
|
-
x?: number;
|
|
11
|
-
/** y轴偏移 */
|
|
12
|
-
y?: number;
|
|
13
|
-
/** 是否启用变色功能 */
|
|
14
|
-
enableTint?: boolean;
|
|
15
|
-
}
|
|
16
|
-
/** @description 自定义矩形背景色 */
|
|
17
|
-
export declare class LibRectBgColor extends Graphics {
|
|
18
|
-
/** 启用着色 */
|
|
19
|
-
private enableTint;
|
|
20
|
-
/** 背景颜色 */
|
|
21
|
-
private bgColor;
|
|
22
|
-
constructor(options: LibRectBgColorParams);
|
|
23
|
-
/** @description 重新绘制并添加颜色 */
|
|
24
|
-
updateColor(tint: string): void;
|
|
25
|
-
/** @description 更新宽度 */
|
|
26
|
-
renderBg(width: number, height: number): void;
|
|
27
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
if (typeof b !== "function" && b !== null)
|
|
10
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
-
extendStatics(d, b);
|
|
12
|
-
function __() { this.constructor = d; }
|
|
13
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
-
};
|
|
15
|
-
})();
|
|
16
|
-
import { Graphics } from "pixi.js";
|
|
17
|
-
import gsap from "gsap";
|
|
18
|
-
/** @description 自定义矩形背景色 */
|
|
19
|
-
var LibRectBgColor = /** @class */ (function (_super) {
|
|
20
|
-
__extends(LibRectBgColor, _super);
|
|
21
|
-
function LibRectBgColor(options) {
|
|
22
|
-
var _this = _super.call(this) || this;
|
|
23
|
-
/** 启用着色 */
|
|
24
|
-
_this.enableTint = true;
|
|
25
|
-
/** 背景颜色 */
|
|
26
|
-
_this.bgColor = "#fff";
|
|
27
|
-
var _a = options.x, x = _a === void 0 ? 0 : _a, _b = options.y, y = _b === void 0 ? 0 : _b, _c = options.width, width = _c === void 0 ? 0 : _c, _d = options.height, height = _d === void 0 ? 0 : _d, _e = options.bgColor, bgColor = _e === void 0 ? "#fff" : _e, _f = options.enableTint, enableTint = _f === void 0 ? true : _f;
|
|
28
|
-
_this.x = x;
|
|
29
|
-
_this.y = y;
|
|
30
|
-
_this.enableTint = enableTint;
|
|
31
|
-
_this.bgColor = bgColor;
|
|
32
|
-
_this.renderBg(width, height);
|
|
33
|
-
return _this;
|
|
34
|
-
}
|
|
35
|
-
/** @description 重新绘制并添加颜色 */
|
|
36
|
-
LibRectBgColor.prototype.updateColor = function (tint) {
|
|
37
|
-
gsap.to(this, { tint: tint, duration: 0.25 });
|
|
38
|
-
};
|
|
39
|
-
/** @description 更新宽度 */
|
|
40
|
-
LibRectBgColor.prototype.renderBg = function (width, height) {
|
|
41
|
-
this.clear();
|
|
42
|
-
if (this.enableTint) {
|
|
43
|
-
this.beginFill("#fff");
|
|
44
|
-
this.tint = this.bgColor;
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
this.beginFill(this.bgColor);
|
|
48
|
-
}
|
|
49
|
-
this.drawRect(0, 0, width, height);
|
|
50
|
-
this.endFill();
|
|
51
|
-
};
|
|
52
|
-
return LibRectBgColor;
|
|
53
|
-
}(Graphics));
|
|
54
|
-
export { LibRectBgColor };
|
|
55
|
-
new LibRectBgColor({
|
|
56
|
-
width: 100,
|
|
57
|
-
height: 100,
|
|
58
|
-
bgColor: "red",
|
|
59
|
-
});
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { type Container } from "pixi.js";
|
|
2
|
-
import { Spine } from "@pixi-spine/runtime-3.8";
|
|
3
|
-
export interface OnUpdateParams {
|
|
4
|
-
x: number;
|
|
5
|
-
y: number;
|
|
6
|
-
rotate: number;
|
|
7
|
-
scaleX: number;
|
|
8
|
-
scaleY: number;
|
|
9
|
-
}
|
|
10
|
-
export interface LibSpineParams {
|
|
11
|
-
/** 默认是否可见 */
|
|
12
|
-
visible?: boolean;
|
|
13
|
-
/** 挂点列表 */
|
|
14
|
-
followPointList?: {
|
|
15
|
-
/** 挂点名称 */
|
|
16
|
-
boneName: string;
|
|
17
|
-
/** 跟随的精灵或容器 */
|
|
18
|
-
follow: Container;
|
|
19
|
-
/** 是否启用角度 */
|
|
20
|
-
angleFollow?: boolean;
|
|
21
|
-
/** 是否启用缩放 */
|
|
22
|
-
scaleFollow?: boolean;
|
|
23
|
-
/** 更新回调,不传则接受内置挂点更新 */
|
|
24
|
-
onUpdate?: (config: OnUpdateParams) => void;
|
|
25
|
-
}[];
|
|
26
|
-
}
|
|
27
|
-
/** @description 自定义 Spine 动画 */
|
|
28
|
-
export declare class LibSpine extends Spine {
|
|
29
|
-
/** 挂点 */
|
|
30
|
-
private _followDots;
|
|
31
|
-
/** 是否已开始 */
|
|
32
|
-
private _isStart;
|
|
33
|
-
/** spine更新函数 */
|
|
34
|
-
private _loopFn;
|
|
35
|
-
constructor(texture: any, params?: LibSpineParams);
|
|
36
|
-
/** @description 设置动画
|
|
37
|
-
* @param animationName 动画名称
|
|
38
|
-
* @param loop 是否循环播放
|
|
39
|
-
* @param delay 是否延迟播放
|
|
40
|
-
*/
|
|
41
|
-
setAnimation(animationName?: string, loop?: boolean, delay?: boolean): Promise<void>;
|
|
42
|
-
/** @description 添加动画
|
|
43
|
-
* @param animationName 动画名称
|
|
44
|
-
* @param loop 是否循环播放
|
|
45
|
-
* @param delay 延迟播放时间
|
|
46
|
-
*/
|
|
47
|
-
addAnimation(animationName?: string, loop?: boolean, delay?: number): Promise<void>;
|
|
48
|
-
/** @description 改变骨骼数据 */
|
|
49
|
-
setSkin(skinName: string): void;
|
|
50
|
-
/** @description 销毁动画及挂点 */
|
|
51
|
-
destroyAll(): void;
|
|
52
|
-
/** @description 更新渲染 */
|
|
53
|
-
private _loop;
|
|
54
|
-
/** @description 更新挂点 */
|
|
55
|
-
private _updateFollowPoint;
|
|
56
|
-
}
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
if (typeof b !== "function" && b !== null)
|
|
10
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
-
extendStatics(d, b);
|
|
12
|
-
function __() { this.constructor = d; }
|
|
13
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
-
};
|
|
15
|
-
})();
|
|
16
|
-
import { Ticker } from "pixi.js";
|
|
17
|
-
import { Spine } from "@pixi-spine/runtime-3.8";
|
|
18
|
-
import gsap from "gsap";
|
|
19
|
-
/** @description 自定义 Spine 动画 */
|
|
20
|
-
var LibSpine = /** @class */ (function (_super) {
|
|
21
|
-
__extends(LibSpine, _super);
|
|
22
|
-
function LibSpine(texture, params) {
|
|
23
|
-
var _this = this;
|
|
24
|
-
var _a = params || {}, followPointList = _a.followPointList, _b = _a.visible, visible = _b === void 0 ? false : _b;
|
|
25
|
-
_this = _super.call(this, texture.spineData) || this;
|
|
26
|
-
/** 挂点 */
|
|
27
|
-
_this._followDots = [];
|
|
28
|
-
/** 是否已开始 */
|
|
29
|
-
_this._isStart = false;
|
|
30
|
-
_this.visible = visible;
|
|
31
|
-
_this.autoUpdate = false;
|
|
32
|
-
//如果存在挂点
|
|
33
|
-
if (followPointList === null || followPointList === void 0 ? void 0 : followPointList.length) {
|
|
34
|
-
followPointList === null || followPointList === void 0 ? void 0 : followPointList.forEach(function (item) {
|
|
35
|
-
item.follow.alpha = 0;
|
|
36
|
-
_this._followDots.push({
|
|
37
|
-
point: _this.skeleton.findBone(item.boneName),
|
|
38
|
-
follow: item.follow,
|
|
39
|
-
onUpdate: item.onUpdate,
|
|
40
|
-
angleFollow: item.angleFollow || false,
|
|
41
|
-
scaleFollow: item.scaleFollow || true,
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
_this._loopFn = _this._loop.bind(_this);
|
|
46
|
-
Ticker.system.add(_this._loopFn);
|
|
47
|
-
return _this;
|
|
48
|
-
}
|
|
49
|
-
/** @description 设置动画
|
|
50
|
-
* @param animationName 动画名称
|
|
51
|
-
* @param loop 是否循环播放
|
|
52
|
-
* @param delay 是否延迟播放
|
|
53
|
-
*/
|
|
54
|
-
LibSpine.prototype.setAnimation = function (animationName, loop, delay) {
|
|
55
|
-
var _this = this;
|
|
56
|
-
if (animationName === void 0) { animationName = "Animation"; }
|
|
57
|
-
if (loop === void 0) { loop = false; }
|
|
58
|
-
if (delay === void 0) { delay = true; }
|
|
59
|
-
return new Promise(function (resolve) {
|
|
60
|
-
_this.visible = true;
|
|
61
|
-
_this.state.setAnimation(0, animationName, loop).listener = {
|
|
62
|
-
complete: function () {
|
|
63
|
-
if (delay) {
|
|
64
|
-
requestAnimationFrame(function () {
|
|
65
|
-
resolve();
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
else {
|
|
69
|
-
resolve();
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
});
|
|
74
|
-
};
|
|
75
|
-
/** @description 添加动画
|
|
76
|
-
* @param animationName 动画名称
|
|
77
|
-
* @param loop 是否循环播放
|
|
78
|
-
* @param delay 延迟播放时间
|
|
79
|
-
*/
|
|
80
|
-
LibSpine.prototype.addAnimation = function (animationName, loop, delay) {
|
|
81
|
-
var _this = this;
|
|
82
|
-
if (animationName === void 0) { animationName = "Animation"; }
|
|
83
|
-
if (loop === void 0) { loop = false; }
|
|
84
|
-
if (delay === void 0) { delay = 0; }
|
|
85
|
-
return new Promise(function (resolve) {
|
|
86
|
-
_this.state.addAnimation(0, animationName, loop, delay).listener = {
|
|
87
|
-
complete: function () {
|
|
88
|
-
requestAnimationFrame(function () {
|
|
89
|
-
resolve();
|
|
90
|
-
});
|
|
91
|
-
},
|
|
92
|
-
};
|
|
93
|
-
});
|
|
94
|
-
};
|
|
95
|
-
/** @description 改变骨骼数据 */
|
|
96
|
-
LibSpine.prototype.setSkin = function (skinName) {
|
|
97
|
-
this.skeleton.setSkinByName(skinName);
|
|
98
|
-
};
|
|
99
|
-
/** @description 销毁动画及挂点 */
|
|
100
|
-
LibSpine.prototype.destroyAll = function () {
|
|
101
|
-
Ticker.system.remove(this._loopFn);
|
|
102
|
-
this.destroy();
|
|
103
|
-
this.removeFromParent();
|
|
104
|
-
};
|
|
105
|
-
/** @description 更新渲染 */
|
|
106
|
-
LibSpine.prototype._loop = function () {
|
|
107
|
-
this.update(Ticker.system.deltaMS / 1000);
|
|
108
|
-
this._updateFollowPoint();
|
|
109
|
-
};
|
|
110
|
-
/** @description 更新挂点 */
|
|
111
|
-
LibSpine.prototype._updateFollowPoint = function () {
|
|
112
|
-
if (this._followDots.length === 0)
|
|
113
|
-
return;
|
|
114
|
-
this._followDots.forEach(function (item) {
|
|
115
|
-
var _a = item.point, x = _a.worldX, y = _a.worldY;
|
|
116
|
-
var rotate = item.point.getWorldRotationX() * (Math.PI / 180);
|
|
117
|
-
var scaleX = item.point.getWorldScaleX();
|
|
118
|
-
var scaleY = item.point.getWorldScaleY();
|
|
119
|
-
if (item.onUpdate) {
|
|
120
|
-
item.onUpdate({
|
|
121
|
-
x: x,
|
|
122
|
-
y: y,
|
|
123
|
-
rotate: rotate,
|
|
124
|
-
scaleX: scaleX,
|
|
125
|
-
scaleY: scaleY,
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
else {
|
|
129
|
-
if (item.angleFollow) {
|
|
130
|
-
item.follow.rotation = rotate;
|
|
131
|
-
}
|
|
132
|
-
if (item.scaleFollow) {
|
|
133
|
-
item.follow.scale.set(scaleX, scaleY);
|
|
134
|
-
}
|
|
135
|
-
item.follow.position.set(x + 1920 / 2 - item.follow.width / 2, y + 1080 / 2 - item.follow.height / 2);
|
|
136
|
-
}
|
|
137
|
-
});
|
|
138
|
-
if (!this._isStart) {
|
|
139
|
-
this._isStart = true;
|
|
140
|
-
this._followDots.forEach(function (item) {
|
|
141
|
-
gsap.to(item.follow, {
|
|
142
|
-
alpha: 1,
|
|
143
|
-
duration: 0.25,
|
|
144
|
-
delay: 0.15,
|
|
145
|
-
});
|
|
146
|
-
});
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
return LibSpine;
|
|
150
|
-
}(Spine));
|
|
151
|
-
export { LibSpine };
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Text, type TextStyleAlign, type TextStyleFontWeight } from "pixi.js";
|
|
2
|
-
export interface LibTextParams {
|
|
3
|
-
/** 文本内容 */
|
|
4
|
-
text: string | number;
|
|
5
|
-
/** 字体大小 */
|
|
6
|
-
fontSize?: number;
|
|
7
|
-
/** 字体颜色 */
|
|
8
|
-
fontColor?: any;
|
|
9
|
-
/** 是否描边 */
|
|
10
|
-
stroke?: boolean;
|
|
11
|
-
/** 描边颜色 */
|
|
12
|
-
strokeColor?: string | number;
|
|
13
|
-
/** 描边宽度 */
|
|
14
|
-
strokeThickness?: number;
|
|
15
|
-
/** 字体样式 */
|
|
16
|
-
fontFamily?: string;
|
|
17
|
-
/** 字体粗细 */
|
|
18
|
-
fontWeight?: TextStyleFontWeight;
|
|
19
|
-
/** 是否换行 */
|
|
20
|
-
wordWrap?: boolean;
|
|
21
|
-
/** 换行宽度 */
|
|
22
|
-
wordWrapWidth?: number;
|
|
23
|
-
/** 行高 */
|
|
24
|
-
lineHeight?: number;
|
|
25
|
-
/** 对齐方式 */
|
|
26
|
-
align?: TextStyleAlign;
|
|
27
|
-
/** 缩进,单位为字数 */
|
|
28
|
-
indent?: number;
|
|
29
|
-
/** 阴影-颜色 角度 模糊度 阴影距离 */
|
|
30
|
-
shadow?: [string, number, number, number];
|
|
31
|
-
}
|
|
32
|
-
/** @description 自定义文本类 */
|
|
33
|
-
export declare class LibText extends Text {
|
|
34
|
-
constructor(options: LibTextParams);
|
|
35
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
if (typeof b !== "function" && b !== null)
|
|
10
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
-
extendStatics(d, b);
|
|
12
|
-
function __() { this.constructor = d; }
|
|
13
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
-
};
|
|
15
|
-
})();
|
|
16
|
-
import { Text, TextStyle } from "pixi.js";
|
|
17
|
-
/** @description 自定义文本类 */
|
|
18
|
-
var LibText = /** @class */ (function (_super) {
|
|
19
|
-
__extends(LibText, _super);
|
|
20
|
-
function LibText(options) {
|
|
21
|
-
var _this = this;
|
|
22
|
-
var text = options.text, _a = options.fontSize, fontSize = _a === void 0 ? 36 : _a, _b = options.fontColor, fontColor = _b === void 0 ? 0xffffff : _b, stroke = options.stroke, strokeColor = options.strokeColor, strokeThickness = options.strokeThickness, _c = options.fontFamily, fontFamily = _c === void 0 ? "MicrosoftYaHei" : _c, _d = options.fontWeight, fontWeight = _d === void 0 ? "normal" : _d, _e = options.wordWrap, wordWrap = _e === void 0 ? false : _e, _f = options.wordWrapWidth, wordWrapWidth = _f === void 0 ? 100 : _f, _g = options.lineHeight, lineHeight = _g === void 0 ? 1.25 : _g, _h = options.align, align = _h === void 0 ? "left" : _h, _j = options.indent, indent = _j === void 0 ? 0 : _j, shadow = options.shadow;
|
|
23
|
-
var style = new TextStyle({
|
|
24
|
-
fontSize: fontSize,
|
|
25
|
-
wordWrap: wordWrap,
|
|
26
|
-
wordWrapWidth: wordWrapWidth,
|
|
27
|
-
fontWeight: fontWeight,
|
|
28
|
-
lineHeight: lineHeight * fontSize,
|
|
29
|
-
breakWords: wordWrap,
|
|
30
|
-
fill: fontColor,
|
|
31
|
-
align: align,
|
|
32
|
-
fontFamily: fontFamily,
|
|
33
|
-
stroke: stroke ? strokeColor : "transparent",
|
|
34
|
-
strokeThickness: stroke ? strokeThickness : 0,
|
|
35
|
-
lineJoin: "round",
|
|
36
|
-
});
|
|
37
|
-
if (shadow) {
|
|
38
|
-
style.dropShadow = true;
|
|
39
|
-
style.dropShadowColor = shadow[0];
|
|
40
|
-
style.dropShadowAngle = shadow[1] * (Math.PI / 180);
|
|
41
|
-
style.dropShadowBlur = shadow[2];
|
|
42
|
-
style.dropShadowDistance = shadow[3];
|
|
43
|
-
}
|
|
44
|
-
_this = _super.call(this, text, style) || this;
|
|
45
|
-
_this.position.x = indent * fontSize;
|
|
46
|
-
return _this;
|
|
47
|
-
}
|
|
48
|
-
return LibText;
|
|
49
|
-
}(Text));
|
|
50
|
-
export { LibText };
|