lyb-pixi-js 1.3.8 → 1.3.9
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/Components/Custom/LibPixiTable.d.ts +12 -0
- package/Components/Custom/LibPixiTable.js +11 -5
- package/lyb-pixi.js +69 -69
- package/package.json +1 -1
|
@@ -3,6 +3,8 @@ import { Container } from "pixi.js";
|
|
|
3
3
|
export interface LibPixiTableParams {
|
|
4
4
|
/** 表格数据 */
|
|
5
5
|
data: (number | string)[][];
|
|
6
|
+
/** 是否需要表格外框 */
|
|
7
|
+
outsideBorder?: boolean;
|
|
6
8
|
/** 单元格宽度 */
|
|
7
9
|
cellWidth?: number;
|
|
8
10
|
/** 单元格高度 */
|
|
@@ -11,6 +13,10 @@ export interface LibPixiTableParams {
|
|
|
11
13
|
fontSize?: number;
|
|
12
14
|
/** 字体颜色 */
|
|
13
15
|
fontColor?: string;
|
|
16
|
+
/** 表格第一列字体颜色 */
|
|
17
|
+
firstColumnFontColor?: string;
|
|
18
|
+
/** 是否需要加粗 */
|
|
19
|
+
fontBold?: boolean;
|
|
14
20
|
/** 线条厚度 */
|
|
15
21
|
lineWidth?: number;
|
|
16
22
|
/** 线条颜色 */
|
|
@@ -34,8 +40,14 @@ export declare class LibPixiTable extends Container {
|
|
|
34
40
|
private _lineWidth;
|
|
35
41
|
/** 字体颜色 */
|
|
36
42
|
private _fontColor;
|
|
43
|
+
/** 表格第一列字体颜色 */
|
|
44
|
+
private _firstColumnFontColor;
|
|
37
45
|
/** 线条颜色 */
|
|
38
46
|
private _lineColor;
|
|
47
|
+
/** 是否需要表格外框 */
|
|
48
|
+
private _outsideBorder;
|
|
49
|
+
/** 是否需要加粗 */
|
|
50
|
+
private _fontBold;
|
|
39
51
|
/** 二维数字数组 */
|
|
40
52
|
private _data;
|
|
41
53
|
constructor(params: LibPixiTableParams);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/** @description 表格绘制并填入数字 */
|
|
2
|
-
import {
|
|
3
|
-
import { libPixiScaleContainer } from
|
|
2
|
+
import { Container, Graphics, Text } from "pixi.js";
|
|
3
|
+
import { libPixiScaleContainer } from '../../Utils/LibPixiScaleContainer';
|
|
4
4
|
/** @description 绘制表格并填充数字
|
|
5
5
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
|
|
6
6
|
*/
|
|
7
7
|
export class LibPixiTable extends Container {
|
|
8
8
|
constructor(params) {
|
|
9
9
|
super();
|
|
10
|
-
const { data, cellWidth = 130, cellHeight = 100, fontColor = "#
|
|
10
|
+
const { data, cellWidth = 130, cellHeight = 100, fontColor = "#fff", firstColumnFontColor = "#fff", fontSize = 30, lineWidth = 2, lineColor = "#5b5b5b", outsideBorder = true, fontBold = true, } = params;
|
|
11
11
|
this._data = data;
|
|
12
12
|
this._rows = data.length;
|
|
13
13
|
this._cols = data[0].length;
|
|
@@ -17,6 +17,9 @@ export class LibPixiTable extends Container {
|
|
|
17
17
|
this._fontSize = fontSize;
|
|
18
18
|
this._lineWidth = lineWidth;
|
|
19
19
|
this._lineColor = lineColor;
|
|
20
|
+
this._outsideBorder = outsideBorder;
|
|
21
|
+
this._fontBold = fontBold;
|
|
22
|
+
this._firstColumnFontColor = firstColumnFontColor;
|
|
20
23
|
this._drawTable();
|
|
21
24
|
this.fillNumbers();
|
|
22
25
|
}
|
|
@@ -27,7 +30,9 @@ export class LibPixiTable extends Container {
|
|
|
27
30
|
const graphics = new Graphics();
|
|
28
31
|
graphics.lineStyle(this._lineWidth, this._lineColor);
|
|
29
32
|
// 绘制表格外框
|
|
30
|
-
|
|
33
|
+
if (this._outsideBorder) {
|
|
34
|
+
graphics.drawRect(0, 0, tableWidth, tableHeight);
|
|
35
|
+
}
|
|
31
36
|
// 绘制横线
|
|
32
37
|
for (let i = 1; i < this._rows; i++) {
|
|
33
38
|
graphics.moveTo(0, i * this._cellHeight);
|
|
@@ -57,7 +62,8 @@ export class LibPixiTable extends Container {
|
|
|
57
62
|
_createNumberText(number, col, row) {
|
|
58
63
|
const text = new Text(number.toString(), {
|
|
59
64
|
_fontSize: this._fontSize,
|
|
60
|
-
fill: this._fontColor,
|
|
65
|
+
fill: col === 0 ? this._firstColumnFontColor : this._fontColor,
|
|
66
|
+
fontWeight: this._fontBold ? "bold" : "normal",
|
|
61
67
|
});
|
|
62
68
|
// 计算文本的居中位置
|
|
63
69
|
const x = col * this._cellWidth + this._cellWidth / 2;
|