81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
const {
|
||
ccclass,
|
||
property,
|
||
executeInEditMode,
|
||
requireComponent,
|
||
disallowMultiple,
|
||
} = cc._decorator;
|
||
|
||
/**
|
||
* 给当前节点上的 cc.Label 添加可调节的黑色描边。
|
||
*
|
||
* 使用方法：
|
||
* 1. 将本脚本挂到带有 cc.Label 的节点上。
|
||
* 2. 在属性检查器中修改 Outline Width。
|
||
* 3. 运行时可调用 setOutlineWidth(width) 修改描边厚度。
|
||
*
|
||
* 注意：cc.LabelOutline 只支持系统字体和 TTF 字体，不支持 BMFont。
|
||
*/
|
||
@ccclass
|
||
@executeInEditMode
|
||
@requireComponent(cc.Label)
|
||
@disallowMultiple
|
||
export default class LabelBlackOutline extends cc.Component {
|
||
@property({
|
||
type: cc.Integer,
|
||
min: 0,
|
||
max: 20,
|
||
step: 1,
|
||
slide: true,
|
||
tooltip: "黑色描边厚度，0 表示不显示描边",
|
||
})
|
||
outlineWidth: number = 2;
|
||
|
||
private _lastWidth: number = -1;
|
||
|
||
protected onLoad(): void {
|
||
this.applyOutline();
|
||
}
|
||
|
||
protected onEnable(): void {
|
||
this.applyOutline();
|
||
}
|
||
|
||
protected update(): void {
|
||
// executeInEditMode 下可在编辑器中实时预览厚度变化。
|
||
if (this._lastWidth !== this.outlineWidth) {
|
||
this.applyOutline();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 运行时修改描边厚度。
|
||
*/
|
||
public setOutlineWidth(width: number): void {
|
||
this.outlineWidth = Math.max(0, Math.round(width));
|
||
this.applyOutline();
|
||
}
|
||
|
||
/**
|
||
* 立即将当前配置应用到 cc.LabelOutline。
|
||
*/
|
||
public applyOutline(): void {
|
||
if (!this.node) {
|
||
return;
|
||
}
|
||
|
||
let outline = this.node.getComponent(cc.LabelOutline);
|
||
if (!outline) {
|
||
outline = this.node.addComponent(cc.LabelOutline);
|
||
}
|
||
|
||
const width = Math.max(0, Math.round(this.outlineWidth));
|
||
this.outlineWidth = width;
|
||
outline.color = cc.Color.BLACK;
|
||
outline.width = width;
|
||
outline.enabled = width > 0;
|
||
|
||
this._lastWidth = width;
|
||
}
|
||
}
|