mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-04-25 00:23:25 +08:00
Compare commits
No commits in common. "d0dae40a5ac5bf63dc1bbbf77e05b6792427c521" and "b0e420c167c4eb76dab2c26049782536eb1aa1ff" have entirely different histories.
d0dae40a5a
...
b0e420c167
@ -1117,7 +1117,7 @@ actions.prototype._clickAction_text = function () {
|
||||
// 正在淡入淡出的话不执行
|
||||
if (core.status.event.animateUI) return;
|
||||
|
||||
const Store = Mota.require('module', 'MainUI').TextboxStore;
|
||||
const Store = Mota.require('module', 'Render').TextboxStore;
|
||||
const store = Store.get('main-textbox');
|
||||
|
||||
// var data = core.clone(core.status.event.data.current);
|
||||
|
||||
@ -1553,7 +1553,7 @@ events.prototype.__action_doAsyncFunc = function (isAsync, func) {
|
||||
|
||||
events.prototype._action_text = function (data, x, y, prefix) {
|
||||
if (this.__action_checkReplaying()) return;
|
||||
const Store = Mota.require('module', 'MainUI').TextboxStore;
|
||||
const Store = Mota.require('module', 'Render').TextboxStore;
|
||||
const store = Store.get('main-textbox');
|
||||
const { text } = data;
|
||||
let title = '';
|
||||
@ -1594,10 +1594,10 @@ events.prototype._action_text = function (data, x, y, prefix) {
|
||||
}
|
||||
}
|
||||
|
||||
const showText = text.slice(0, titleStartIndex) + text.slice(titleEndIndex);
|
||||
const showTitle =
|
||||
text.slice(0, titleStartIndex) + text.slice(titleEndIndex);
|
||||
store.show();
|
||||
store.modify({ title });
|
||||
store.setText(showText);
|
||||
store.modify({ text: showTitle, title });
|
||||
|
||||
// data.text = core.replaceText(data.text, prefix);
|
||||
// var ctx = data.code ? '__text__' + data.code : null;
|
||||
|
||||
@ -13,7 +13,7 @@ function checkSupport() {
|
||||
sleep(3000).then(() => {
|
||||
tip(
|
||||
'warning',
|
||||
`您的浏览器不支持WebGL，大部分效果将会无法显示，请更新你的浏览器`
|
||||
`您的浏览器不支持WebGL，大部分特效将会无法显示，建议使用新版浏览器`
|
||||
);
|
||||
});
|
||||
}
|
||||
@ -21,7 +21,7 @@ function checkSupport() {
|
||||
sleep(3000).then(() => {
|
||||
tip(
|
||||
'warning',
|
||||
`您的浏览器不支持WebGL2，大部分效果将会无法显示，请更新你的浏览器`
|
||||
`您的浏览器不支持WebGL2，一部分特效将会无法显示，建议使用新版浏览器`
|
||||
);
|
||||
});
|
||||
}
|
||||
@ -54,10 +54,10 @@ type UniformFunc<
|
||||
type UniformBinderValue<N extends UniformBinderNum> = N extends 1
|
||||
? number
|
||||
: N extends 2
|
||||
? [number, number]
|
||||
: N extends 3
|
||||
? [number, number, number]
|
||||
: [number, number, number, number];
|
||||
? [number, number]
|
||||
: N extends 3
|
||||
? [number, number, number]
|
||||
: [number, number, number, number];
|
||||
|
||||
interface UniformBinder<
|
||||
N extends UniformBinderNum,
|
||||
|
||||
@ -80,9 +80,9 @@ export class Container<E extends EContainerEvent = EContainerEvent>
|
||||
append(parent: RenderItem): void {
|
||||
super.append(parent);
|
||||
if (this.root) {
|
||||
const root = this.root;
|
||||
this.forEachChild(ele => {
|
||||
ele.setRoot(root);
|
||||
ele.checkRoot();
|
||||
this.root?.connect(ele);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -104,7 +104,6 @@ export class Container<E extends EContainerEvent = EContainerEvent>
|
||||
this.sortedChildren = [...this.children].sort(
|
||||
(a, b) => a.zIndex - b.zIndex
|
||||
);
|
||||
this.update();
|
||||
}
|
||||
|
||||
protected propagateEvent<T extends ActionType>(
|
||||
|
||||
@ -437,15 +437,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
|
||||
return canvas;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除由 `requireCanvas` 申请的画布，当画布不再使用时，可以用该方法删除画布
|
||||
* @param canvas 要删除的画布
|
||||
*/
|
||||
protected deleteCanvas(canvas: MotaOffscreenCanvas2D) {
|
||||
if (!this.canvases.delete(canvas)) return;
|
||||
canvas.delete();
|
||||
}
|
||||
|
||||
//#region 修改元素属性
|
||||
|
||||
/**
|
||||
@ -466,8 +457,8 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
|
||||
* @param y 纵坐标
|
||||
*/
|
||||
pos(x: number, y: number) {
|
||||
// 这个函数会调用 update，因此不再手动调用 update
|
||||
this._transform.setTranslate(x, y);
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -597,15 +588,10 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
|
||||
}
|
||||
|
||||
update(item: RenderItem<any> = this): void {
|
||||
if (this._parent) {
|
||||
if (this.cacheDirty && this._parent.cacheDirty) return;
|
||||
this.cacheDirty = true;
|
||||
if (this.hidden) return;
|
||||
this._parent.update(item);
|
||||
} else {
|
||||
if (this.cacheDirty) return;
|
||||
this.cacheDirty = true;
|
||||
}
|
||||
if (this.cacheDirty) return;
|
||||
this.cacheDirty = true;
|
||||
if (this.hidden) return;
|
||||
this.parent?.update(item);
|
||||
}
|
||||
|
||||
updateTransform() {
|
||||
@ -664,12 +650,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
|
||||
|
||||
//#region 父子关系
|
||||
|
||||
setRoot(item: RenderItem & IRenderTreeRoot) {
|
||||
this._root?.disconnect(this);
|
||||
this._root = item;
|
||||
item.connect(item);
|
||||
}
|
||||
|
||||
checkRoot(): RenderItem | null {
|
||||
if (this._root) return this._root;
|
||||
if (this.isRoot) return this;
|
||||
|
||||
@ -30,10 +30,7 @@ export class Text extends RenderItem<ETextEvent> {
|
||||
super(type, false);
|
||||
|
||||
this.text = text;
|
||||
if (text.length > 0) {
|
||||
this.calBox();
|
||||
this.emit('setText', text);
|
||||
}
|
||||
if (text.length > 0) this.calBox();
|
||||
}
|
||||
|
||||
protected render(
|
||||
@ -73,7 +70,7 @@ export class Text extends RenderItem<ETextEvent> {
|
||||
setText(text: string) {
|
||||
this.text = text;
|
||||
this.calBox();
|
||||
this.update(this);
|
||||
if (this.parent) this.update(this);
|
||||
this.emit('setText', text);
|
||||
}
|
||||
|
||||
@ -84,7 +81,7 @@ export class Text extends RenderItem<ETextEvent> {
|
||||
setFont(font: string) {
|
||||
this.font = font;
|
||||
this.calBox();
|
||||
this.update(this);
|
||||
if (this.parent) this.update(this);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -113,11 +110,7 @@ export class Text extends RenderItem<ETextEvent> {
|
||||
this.measure();
|
||||
this.length = width;
|
||||
this.descent = actualBoundingBoxAscent;
|
||||
this.size(
|
||||
width,
|
||||
Math.abs(actualBoundingBoxAscent) +
|
||||
Math.abs(actualBoundingBoxDescent)
|
||||
);
|
||||
this.size(width, actualBoundingBoxAscent + actualBoundingBoxDescent);
|
||||
}
|
||||
|
||||
protected handleProps(
|
||||
@ -139,7 +132,7 @@ export class Text extends RenderItem<ETextEvent> {
|
||||
case 'font':
|
||||
if (!this.assertType(nextValue, 'string', key)) return false;
|
||||
this.setFont(nextValue);
|
||||
return true;
|
||||
break;
|
||||
case 'strokeWidth':
|
||||
this.setStrokeWidth(nextValue);
|
||||
return true;
|
||||
@ -345,27 +338,14 @@ export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
|
||||
}
|
||||
}
|
||||
|
||||
interface WinskinPatterns {
|
||||
top: CanvasPattern;
|
||||
left: CanvasPattern;
|
||||
bottom: CanvasPattern;
|
||||
right: CanvasPattern;
|
||||
}
|
||||
|
||||
export interface EWinskinEvent extends ERenderItemEvent {}
|
||||
|
||||
export class Winskin extends RenderItem<EWinskinEvent> {
|
||||
image: SizedCanvasImageSource;
|
||||
/** 边框宽度，32表示原始宽度 */
|
||||
/** 边框宽度 */
|
||||
borderSize: number = 32;
|
||||
/** 图片名称 */
|
||||
imageName?: string;
|
||||
|
||||
private pendingImage?: ImageIds;
|
||||
private patternCache?: WinskinPatterns;
|
||||
private patternTransform: DOMMatrix;
|
||||
|
||||
private static patternMap: Map<string, WinskinPatterns> = new Map();
|
||||
|
||||
constructor(
|
||||
image: SizedCanvasImageSource,
|
||||
@ -373,63 +353,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
|
||||
) {
|
||||
super(type, false, false);
|
||||
this.image = image;
|
||||
this.setAntiAliasing(false);
|
||||
|
||||
if (window.DOMMatrix) {
|
||||
this.patternTransform = new DOMMatrix();
|
||||
} else if (window.WebKitCSSMatrix) {
|
||||
this.patternTransform = new WebKitCSSMatrix();
|
||||
} else {
|
||||
this.patternTransform = new SVGMatrix();
|
||||
}
|
||||
}
|
||||
|
||||
private generatePattern() {
|
||||
const pattern = this.requireCanvas();
|
||||
const img = this.image;
|
||||
pattern.size(32, 16);
|
||||
pattern.withGameScale(false);
|
||||
pattern.setHD(false);
|
||||
pattern.setAntiAliasing(false);
|
||||
const ctx = pattern.ctx;
|
||||
ctx.drawImage(img, 144, 0, 32, 16, 0, 0, 32, 16);
|
||||
const topPattern = ctx.createPattern(pattern.canvas, 'repeat');
|
||||
ctx.clearRect(0, 0, 32, 16);
|
||||
ctx.drawImage(img, 144, 48, 32, 16, 0, 0, 32, 16);
|
||||
const bottomPattern = ctx.createPattern(pattern.canvas, 'repeat');
|
||||
ctx.clearRect(0, 0, 32, 16);
|
||||
pattern.size(16, 32);
|
||||
ctx.drawImage(img, 128, 16, 16, 32, 0, 0, 16, 32);
|
||||
const leftPattern = ctx.createPattern(pattern.canvas, 'repeat');
|
||||
ctx.clearRect(0, 0, 16, 32);
|
||||
ctx.drawImage(img, 176, 16, 16, 32, 0, 0, 16, 32);
|
||||
const rightPattern = ctx.createPattern(pattern.canvas, 'repeat');
|
||||
if (!topPattern || !bottomPattern || !leftPattern || !rightPattern) {
|
||||
return null;
|
||||
}
|
||||
const winskinPattern: WinskinPatterns = {
|
||||
top: topPattern,
|
||||
bottom: bottomPattern,
|
||||
left: leftPattern,
|
||||
right: rightPattern
|
||||
};
|
||||
if (this.imageName) {
|
||||
Winskin.patternMap.set(this.imageName, winskinPattern);
|
||||
}
|
||||
this.patternCache = winskinPattern;
|
||||
this.deleteCanvas(pattern);
|
||||
return winskinPattern;
|
||||
}
|
||||
|
||||
private getPattern() {
|
||||
if (!this.imageName) {
|
||||
if (this.patternCache) return this.patternCache;
|
||||
return this.generatePattern();
|
||||
} else {
|
||||
const pattern = Winskin.patternMap.get(this.imageName);
|
||||
if (pattern) return pattern;
|
||||
return this.generatePattern();
|
||||
}
|
||||
}
|
||||
|
||||
protected render(
|
||||
@ -438,38 +361,143 @@ export class Winskin extends RenderItem<EWinskinEvent> {
|
||||
): void {
|
||||
const ctx = canvas.ctx;
|
||||
const img = this.image;
|
||||
const w = this.width;
|
||||
const h = this.height;
|
||||
const pad = this.borderSize / 2;
|
||||
// 背景
|
||||
ctx.drawImage(img, 0, 0, 128, 128, 2, 2, w - 4, h - 4);
|
||||
const pattern = this.getPattern();
|
||||
if (!pattern) return;
|
||||
const { top, left, right, bottom } = pattern;
|
||||
top.setTransform(this.patternTransform);
|
||||
left.setTransform(this.patternTransform);
|
||||
right.setTransform(this.patternTransform);
|
||||
bottom.setTransform(this.patternTransform);
|
||||
// 上下左右边框
|
||||
ctx.save();
|
||||
ctx.fillStyle = top;
|
||||
ctx.translate(pad, 0);
|
||||
ctx.fillRect(0, 0, w - pad * 2, pad);
|
||||
ctx.fillStyle = bottom;
|
||||
ctx.translate(0, h - pad);
|
||||
ctx.fillRect(0, 0, w - pad * 2, pad);
|
||||
ctx.fillStyle = left;
|
||||
ctx.translate(-pad, pad * 2 - h);
|
||||
ctx.fillRect(0, 0, pad, h - pad * 2);
|
||||
ctx.fillStyle = right;
|
||||
ctx.translate(w - pad, 0);
|
||||
ctx.fillRect(0, 0, pad, h - pad * 2);
|
||||
ctx.restore();
|
||||
// 四个角的边框
|
||||
ctx.drawImage(img, 128, 0, 16, 16, 0, 0, pad, pad);
|
||||
ctx.drawImage(img, 176, 0, 16, 16, w - pad, 0, pad, pad);
|
||||
ctx.drawImage(img, 128, 48, 16, 16, 0, h - pad, pad, pad);
|
||||
ctx.drawImage(img, 176, 48, 16, 16, w - pad, h - pad, pad, pad);
|
||||
const x = 0;
|
||||
const y = 0;
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
const sz = this.borderSize / 32;
|
||||
ctx.drawImage(img, 0, 0, 128, 128, x + 2, y + 2, w - 4, h - 4);
|
||||
ctx.drawImage(img, 128, 0, 16, 16, x, y, 16 * sz, 16 * sz);
|
||||
let dx;
|
||||
for (dx = 0; dx < w - 64 * sz; dx += 32 * sz) {
|
||||
ctx.drawImage(
|
||||
img,
|
||||
144,
|
||||
0,
|
||||
32,
|
||||
16,
|
||||
x + dx + 16,
|
||||
y,
|
||||
32 * sz,
|
||||
16 * sz
|
||||
);
|
||||
ctx.drawImage(
|
||||
img,
|
||||
144,
|
||||
48,
|
||||
32,
|
||||
16,
|
||||
x + dx + 16,
|
||||
y + h - 16 * sz,
|
||||
32 * sz,
|
||||
16 * sz
|
||||
);
|
||||
}
|
||||
ctx.drawImage(
|
||||
img,
|
||||
144,
|
||||
0,
|
||||
w - dx - 32,
|
||||
16,
|
||||
x + dx + 16 * sz,
|
||||
y,
|
||||
w - dx - 32 * sz,
|
||||
16 * sz
|
||||
);
|
||||
ctx.drawImage(
|
||||
img,
|
||||
144,
|
||||
48,
|
||||
w - dx - 32,
|
||||
16,
|
||||
x + dx + 16 * sz,
|
||||
y + h - 16 * sz,
|
||||
w - dx - 32 * sz,
|
||||
16 * sz
|
||||
);
|
||||
ctx.drawImage(
|
||||
img,
|
||||
176,
|
||||
0,
|
||||
16,
|
||||
16,
|
||||
x + w - 16 * sz,
|
||||
y,
|
||||
16 * sz,
|
||||
16 * sz
|
||||
);
|
||||
// 左右
|
||||
let dy;
|
||||
for (dy = 0; dy < h - 64 * sz; dy += 32 * sz) {
|
||||
ctx.drawImage(
|
||||
img,
|
||||
128,
|
||||
16,
|
||||
16,
|
||||
32,
|
||||
x,
|
||||
y + dy + 16 * sz,
|
||||
16 * sz,
|
||||
32 * sz
|
||||
);
|
||||
ctx.drawImage(
|
||||
img,
|
||||
176,
|
||||
16,
|
||||
16,
|
||||
32,
|
||||
x + w - 16 * sz,
|
||||
y + dy + 16 * sz,
|
||||
16 * sz,
|
||||
32 * sz
|
||||
);
|
||||
}
|
||||
ctx.drawImage(
|
||||
img,
|
||||
128,
|
||||
16,
|
||||
16,
|
||||
h - dy - 32,
|
||||
x,
|
||||
y + dy + 16 * sz,
|
||||
16 * sz,
|
||||
h - dy - 32 * sz
|
||||
);
|
||||
ctx.drawImage(
|
||||
img,
|
||||
176,
|
||||
16,
|
||||
16,
|
||||
h - dy - 32,
|
||||
x + w - 16 * sz,
|
||||
y + dy + 16 * sz,
|
||||
16 * sz,
|
||||
h - dy - 32 * sz
|
||||
);
|
||||
// 下方
|
||||
ctx.drawImage(
|
||||
img,
|
||||
128,
|
||||
48,
|
||||
16,
|
||||
16,
|
||||
x,
|
||||
y + h - 16 * sz,
|
||||
16 * sz,
|
||||
16 * sz
|
||||
);
|
||||
ctx.drawImage(
|
||||
img,
|
||||
176,
|
||||
48,
|
||||
16,
|
||||
16,
|
||||
x + w - 16 * sz,
|
||||
y + h - 16 * sz,
|
||||
16 * sz,
|
||||
16 * sz
|
||||
);
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -478,7 +506,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
|
||||
*/
|
||||
setImage(image: SizedCanvasImageSource) {
|
||||
this.image = image;
|
||||
this.patternCache = void 0;
|
||||
this.update();
|
||||
}
|
||||
|
||||
@ -503,7 +530,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
|
||||
}
|
||||
this.pendingImage = name;
|
||||
}
|
||||
this.imageName = name;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -512,8 +538,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
|
||||
*/
|
||||
setBorderSize(size: number) {
|
||||
this.borderSize = size;
|
||||
this.patternTransform.a = size / 32;
|
||||
this.patternTransform.d = size / 32;
|
||||
this.update();
|
||||
}
|
||||
|
||||
|
||||
@ -90,7 +90,6 @@
|
||||
"56": "Method '$1' has been deprecated. Consider using '$2' instead.",
|
||||
"57": "Repeated UI controller on item '$1', new controller will not work.",
|
||||
"58": "Fail to set ellipse round rect, since length of 'ellipse' property should only be 2, 4, 6 or 8. delivered: $1",
|
||||
"59": "Unknown icon '$1' in parsing text content.",
|
||||
"1001": "Item-detail extension needs 'floor-binder' and 'floor-damage' extension as dependency.",
|
||||
"1101": "Cannot add new effect to point effect instance, for there's no more reserve space for it. Please increase the max count of the instance."
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@ import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
nextTick,
|
||||
onUnmounted,
|
||||
onUpdated,
|
||||
ref,
|
||||
shallowReactive,
|
||||
shallowRef,
|
||||
@ -13,7 +13,7 @@ import {
|
||||
} from 'vue';
|
||||
import { logger } from '@/core/common/logger';
|
||||
import { Sprite } from '@/core/render/sprite';
|
||||
import { DefaultProps } from '@/core/render/renderer';
|
||||
import { ContainerProps, DefaultProps } from '@/core/render/renderer';
|
||||
import { isNil } from 'lodash-es';
|
||||
import { SetupComponentOptions } from './types';
|
||||
import EventEmitter from 'eventemitter3';
|
||||
@ -22,9 +22,7 @@ import {
|
||||
ITextContentConfig,
|
||||
TextContentTyper,
|
||||
TyperRenderable,
|
||||
TextContentType,
|
||||
WordBreak,
|
||||
TextAlign
|
||||
TextContentType
|
||||
} from './textboxTyper';
|
||||
|
||||
export interface TextContentProps
|
||||
@ -36,6 +34,8 @@ export interface TextContentProps
|
||||
fill?: boolean;
|
||||
/** 是否描边 */
|
||||
stroke?: boolean;
|
||||
/** 是否忽略打字机，直接显伤全部 */
|
||||
showAll?: boolean;
|
||||
}
|
||||
|
||||
export type TextContentEmits = {
|
||||
@ -43,18 +43,6 @@ export type TextContentEmits = {
|
||||
typeStart: () => void;
|
||||
};
|
||||
|
||||
export interface TextContentExpose {
|
||||
/**
|
||||
* 重新开始打字
|
||||
*/
|
||||
retype(): void;
|
||||
|
||||
/**
|
||||
* 立刻显示所有文字
|
||||
*/
|
||||
showAll(): void;
|
||||
}
|
||||
|
||||
const textContentOptions = {
|
||||
props: [
|
||||
'breakChars',
|
||||
@ -62,6 +50,7 @@ const textContentOptions = {
|
||||
'fontSize',
|
||||
'fontWeight',
|
||||
'fontItalic',
|
||||
'height',
|
||||
'ignoreLineEnd',
|
||||
'ignoreLineStart',
|
||||
'interval',
|
||||
@ -69,14 +58,17 @@ const textContentOptions = {
|
||||
'lineHeight',
|
||||
'text',
|
||||
'textAlign',
|
||||
'width',
|
||||
'wordBreak',
|
||||
'x',
|
||||
'y',
|
||||
'fill',
|
||||
'fillStyle',
|
||||
'strokeStyle',
|
||||
'strokeWidth',
|
||||
'stroke',
|
||||
'loc',
|
||||
'width'
|
||||
'showAll',
|
||||
'loc'
|
||||
],
|
||||
emits: ['typeEnd', 'typeStart']
|
||||
} satisfies SetupComponentOptions<
|
||||
@ -89,72 +81,69 @@ export const TextContent = defineComponent<
|
||||
TextContentProps,
|
||||
TextContentEmits,
|
||||
keyof TextContentEmits
|
||||
>((props, { emit, expose }) => {
|
||||
const width = computed(() => props.width ?? props.loc?.[2] ?? 200);
|
||||
if (width.value < 0) {
|
||||
>((props, { emit }) => {
|
||||
if (props.width && props.width <= 0) {
|
||||
logger.warn(41, String(props.width));
|
||||
}
|
||||
|
||||
const typer = new TextContentTyper(props);
|
||||
let renderable: TyperRenderable[] = [];
|
||||
let needUpdate = false;
|
||||
let nowText = '';
|
||||
|
||||
watch(props, value => {
|
||||
typer.setConfig(value);
|
||||
});
|
||||
|
||||
const retype = () => {
|
||||
if (props.showAll) {
|
||||
typer.typeAll();
|
||||
}
|
||||
if (props.text === nowText) return;
|
||||
if (needUpdate) return;
|
||||
needUpdate = true;
|
||||
if (!spriteElement.value) {
|
||||
needUpdate = false;
|
||||
}
|
||||
nowText = props.text ?? '';
|
||||
renderable = [];
|
||||
|
||||
spriteElement.value?.requestBeforeFrame(() => {
|
||||
typer.setConfig(props);
|
||||
typer.setText(props.text ?? '');
|
||||
typer.type();
|
||||
if (props.showAll) {
|
||||
typer.typeAll();
|
||||
}
|
||||
needUpdate = false;
|
||||
});
|
||||
};
|
||||
|
||||
const showAll = () => {
|
||||
typer.typeAll();
|
||||
};
|
||||
|
||||
watch(props, value => {
|
||||
typer.setConfig(value);
|
||||
retype();
|
||||
});
|
||||
|
||||
expose({ retype, showAll });
|
||||
onUpdated(retype);
|
||||
|
||||
const spriteElement = shallowRef<Sprite>();
|
||||
const renderContent = (canvas: MotaOffscreenCanvas2D) => {
|
||||
const ctx = canvas.ctx;
|
||||
ctx.textBaseline = 'top';
|
||||
renderable.forEach(v => {
|
||||
switch (v.type) {
|
||||
case TextContentType.Text: {
|
||||
if (v.text.length === 0) return;
|
||||
ctx.fillStyle = v.fillStyle;
|
||||
ctx.strokeStyle = v.strokeStyle;
|
||||
ctx.font = v.font;
|
||||
const text = v.text.slice(0, v.pointer);
|
||||
if (v.type === TextContentType.Text) {
|
||||
ctx.fillStyle = v.fillStyle;
|
||||
ctx.strokeStyle = v.strokeStyle;
|
||||
ctx.font = v.font;
|
||||
const text = v.text.slice(0, v.pointer);
|
||||
|
||||
if (props.fill ?? true) {
|
||||
ctx.fillText(text, v.x, v.y);
|
||||
}
|
||||
if (props.stroke) {
|
||||
ctx.strokeText(text, v.x, v.y);
|
||||
}
|
||||
break;
|
||||
if (props.fill ?? true) {
|
||||
ctx.fillText(text, v.x, v.y);
|
||||
}
|
||||
case TextContentType.Icon: {
|
||||
const { renderable: r, x: dx, y: dy, width, height } = v;
|
||||
const render = r.render;
|
||||
const [x, y, w, h] = render[0];
|
||||
const icon = r.autotile ? r.image[0] : r.image;
|
||||
ctx.drawImage(icon, x, y, w, h, dx, dy, width, height);
|
||||
break;
|
||||
if (props.stroke) {
|
||||
ctx.strokeText(text, v.x, v.y);
|
||||
}
|
||||
} else {
|
||||
const r = v.renderable;
|
||||
const render = r.render;
|
||||
const [x, y, w, h] = render[0];
|
||||
const icon = r.autotile ? r.image[0] : r.image;
|
||||
ctx.drawImage(icon, x, y, w, h, v.x, v.y, v.width, v.height);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -175,15 +164,19 @@ export const TextContent = defineComponent<
|
||||
return () => {
|
||||
return (
|
||||
<sprite
|
||||
loc={props.loc}
|
||||
{...props}
|
||||
ref={spriteElement}
|
||||
x={props.x}
|
||||
y={props.y}
|
||||
width={props.width}
|
||||
height={props.height}
|
||||
render={renderContent}
|
||||
></sprite>
|
||||
);
|
||||
};
|
||||
}, textContentOptions);
|
||||
|
||||
export interface TextboxProps extends TextContentProps, DefaultProps {
|
||||
export interface TextboxProps extends TextContentProps, ContainerProps {
|
||||
/** 背景颜色 */
|
||||
backColor?: CanvasStyle;
|
||||
/** 背景 winskin */
|
||||
@ -202,28 +195,6 @@ export interface TextboxProps extends TextContentProps, DefaultProps {
|
||||
titlePadding?: number;
|
||||
}
|
||||
|
||||
export interface TextboxExpose {
|
||||
/**
|
||||
* 显示这个文本框
|
||||
*/
|
||||
show(): void;
|
||||
|
||||
/**
|
||||
* 隐藏这个文本框
|
||||
*/
|
||||
hide(): void;
|
||||
|
||||
/**
|
||||
* 重新开始打字
|
||||
*/
|
||||
retype(): void;
|
||||
|
||||
/**
|
||||
* 立刻显示所有文字
|
||||
*/
|
||||
showAll(): void;
|
||||
}
|
||||
|
||||
type TextboxEmits = TextContentEmits;
|
||||
type TextboxSlots = SlotsType<{
|
||||
default: (data: TextboxProps) => VNode[];
|
||||
@ -234,14 +205,23 @@ const textboxOptions = {
|
||||
props: (textContentOptions.props as (keyof TextboxProps)[]).concat([
|
||||
'backColor',
|
||||
'winskin',
|
||||
'id',
|
||||
'padding',
|
||||
'alpha',
|
||||
'hidden',
|
||||
'anchorX',
|
||||
'anchorY',
|
||||
'anti',
|
||||
'cache',
|
||||
'composite',
|
||||
'fall',
|
||||
'hd',
|
||||
'transform',
|
||||
'type',
|
||||
'zIndex',
|
||||
'titleFill',
|
||||
'titleStroke',
|
||||
'titleFont',
|
||||
'titlePadding',
|
||||
'id',
|
||||
'hidden',
|
||||
'title'
|
||||
'titleFont'
|
||||
]),
|
||||
emits: textContentOptions.emits
|
||||
} satisfies SetupComponentOptions<TextboxProps, {}, string, TextboxSlots>;
|
||||
@ -256,206 +236,153 @@ export const Textbox = defineComponent<
|
||||
TextboxEmits,
|
||||
keyof TextboxEmits,
|
||||
TextboxSlots
|
||||
>((props, { slots, expose }) => {
|
||||
const contentData = shallowReactive<TextContentProps>({});
|
||||
const data = shallowReactive<TextboxProps>({});
|
||||
|
||||
const setContentData = () => {
|
||||
contentData.breakChars = props.breakChars ?? '';
|
||||
contentData.fontFamily = props.fontFamily ?? 'Verdana';
|
||||
contentData.fontSize = props.fontSize ?? 16;
|
||||
contentData.fontWeight = props.fontWeight ?? 500;
|
||||
contentData.fontItalic = props.fontItalic ?? false;
|
||||
contentData.ignoreLineEnd = props.ignoreLineEnd ?? '';
|
||||
contentData.ignoreLineStart = props.ignoreLineStart ?? '';
|
||||
contentData.interval = props.interval ?? 0;
|
||||
contentData.keepLast = props.keepLast ?? false;
|
||||
contentData.lineHeight = props.lineHeight ?? 0;
|
||||
contentData.text = props.text ?? '';
|
||||
contentData.textAlign = props.textAlign ?? TextAlign.Left;
|
||||
contentData.wordBreak = props.wordBreak ?? WordBreak.Space;
|
||||
contentData.fill = props.fill ?? true;
|
||||
contentData.stroke = props.stroke ?? false;
|
||||
contentData.fillStyle = props.fillStyle ?? '#fff';
|
||||
contentData.strokeStyle = props.strokeStyle ?? '#000';
|
||||
contentData.strokeWidth = props.strokeWidth ?? 2;
|
||||
contentData.loc = props.loc;
|
||||
contentData.width = props.width;
|
||||
};
|
||||
|
||||
const setTextboxData = () => {
|
||||
data.backColor = props.backColor ?? '#222';
|
||||
data.winskin = props.winskin;
|
||||
data.padding = props.padding ?? 8;
|
||||
data.titleFill = props.titleFill ?? 'gold';
|
||||
data.titleStroke = props.titleStroke ?? 'transparent';
|
||||
data.titleFont = props.titleFont ?? '18px Verdana';
|
||||
data.titlePadding = props.titlePadding ?? 8;
|
||||
data.width = props.width ?? props.loc?.[2] ?? 200;
|
||||
data.height = props.height ?? props.loc?.[3] ?? 200;
|
||||
data.title = props.title ?? '';
|
||||
};
|
||||
|
||||
setContentData();
|
||||
setTextboxData();
|
||||
|
||||
watch(props, () => {
|
||||
const needUpdateTitle = data.title !== props.title;
|
||||
setTextboxData();
|
||||
if (needUpdateTitle) {
|
||||
onSetText();
|
||||
}
|
||||
});
|
||||
>((props, { slots }) => {
|
||||
const data = shallowReactive({ ...props });
|
||||
data.padding ??= 8;
|
||||
data.width ??= 200;
|
||||
data.height ??= 200;
|
||||
data.id ??= '';
|
||||
data.alpha ??= 1;
|
||||
data.titleFill ??= '#000';
|
||||
data.titleStroke ??= 'transparent';
|
||||
data.titleFont ??= '16px Verdana';
|
||||
data.titlePadding ??= 4;
|
||||
|
||||
const titleElement = ref<Text>();
|
||||
const content = ref<TextContentExpose>();
|
||||
const hidden = ref(props.hidden);
|
||||
/** 标题宽度 */
|
||||
const tw = ref(data.titlePadding! * 2);
|
||||
/** 标题高度 */
|
||||
const th = ref(data.titlePadding! * 2);
|
||||
const titleWidth = ref(data.titlePadding * 2);
|
||||
const titleHeight = ref(data.titlePadding * 2);
|
||||
const contentY = computed(() => {
|
||||
const height = th.value;
|
||||
const height = titleHeight.value;
|
||||
return data.title ? height : 0;
|
||||
});
|
||||
const backHeight = computed(() => data.height! - contentY.value);
|
||||
const contentWidth = computed(() => data.width! - data.padding! * 2);
|
||||
const contentHeight = computed(
|
||||
() => data.height! - data.padding! * 2 - contentY.value
|
||||
);
|
||||
|
||||
const onSetText = () => {
|
||||
nextTick(() => {
|
||||
titleElement.value?.requestBeforeFrame(() => {
|
||||
if (titleElement.value) {
|
||||
const { width, height } = titleElement.value;
|
||||
tw.value = width + data.padding! * 2;
|
||||
th.value = height + data.padding! * 2;
|
||||
}
|
||||
});
|
||||
});
|
||||
const calTitleSize = (text: string) => {
|
||||
if (!titleElement.value) return;
|
||||
const { width, height } = titleElement.value;
|
||||
titleWidth.value = width + data.titlePadding! * 2;
|
||||
titleHeight.value = height + data.titlePadding! * 2;
|
||||
data.title = text;
|
||||
};
|
||||
|
||||
watch(titleElement, (value, old) => {
|
||||
old?.off('setText', calTitleSize);
|
||||
value?.on('setText', calTitleSize);
|
||||
if (value) calTitleSize(value?.text);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
titleElement.value?.off('setText', calTitleSize);
|
||||
});
|
||||
|
||||
// ----- store
|
||||
|
||||
/** 结束打字机 */
|
||||
const storeEmits: TextboxStoreEmits = {
|
||||
endType() {
|
||||
content.value?.showAll();
|
||||
},
|
||||
hide() {
|
||||
hidden.value = true;
|
||||
},
|
||||
show() {
|
||||
hidden.value = false;
|
||||
},
|
||||
update(value) {
|
||||
if (data.title !== value.title) {
|
||||
data.title = value.title;
|
||||
onSetText();
|
||||
}
|
||||
},
|
||||
setText(text) {
|
||||
if (contentData.text === text) {
|
||||
content.value?.retype();
|
||||
} else {
|
||||
contentData.text = text;
|
||||
}
|
||||
data.showAll = true;
|
||||
}
|
||||
};
|
||||
|
||||
const store = TextboxStore.use(
|
||||
props.id ?? getNextTextboxId(),
|
||||
contentData,
|
||||
data,
|
||||
storeEmits
|
||||
);
|
||||
const hidden = ref(data.hidden);
|
||||
store.on('hide', () => (hidden.value = true));
|
||||
store.on('show', () => (hidden.value = false));
|
||||
store.on('update', value => {
|
||||
if (value.title) {
|
||||
titleElement.value?.requestBeforeFrame(() => {
|
||||
const { width, height } = titleElement.value!;
|
||||
titleWidth.value = width + data.padding! * 2;
|
||||
titleHeight.value = height + data.padding! * 2;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const onTypeStart = () => {
|
||||
store.emitTypeStart();
|
||||
};
|
||||
|
||||
const onTypeEnd = () => {
|
||||
data.showAll = false;
|
||||
store.emitTypeEnd();
|
||||
};
|
||||
|
||||
expose<TextboxExpose>({
|
||||
show() {
|
||||
hidden.value = false;
|
||||
},
|
||||
hide() {
|
||||
hidden.value = true;
|
||||
},
|
||||
retype() {
|
||||
content.value?.retype();
|
||||
},
|
||||
showAll() {
|
||||
content.value?.showAll();
|
||||
}
|
||||
});
|
||||
|
||||
return () => (
|
||||
<container
|
||||
id={props.id}
|
||||
hidden={hidden.value}
|
||||
alpha={data.alpha}
|
||||
loc={props.loc}
|
||||
>
|
||||
{data.title && (
|
||||
<container zIndex={10} loc={[0, 0, tw.value, th.value]}>
|
||||
{slots.title ? (
|
||||
slots.title(data)
|
||||
) : props.winskin ? (
|
||||
<winskin
|
||||
image={props.winskin}
|
||||
loc={[0, 0, tw.value, th.value]}
|
||||
></winskin>
|
||||
) : (
|
||||
<g-rect loc={[0, 0, tw.value, th.value]}></g-rect>
|
||||
)}
|
||||
<text
|
||||
ref={titleElement}
|
||||
text={data.title}
|
||||
loc={[data.titlePadding, data.titlePadding]}
|
||||
fillStyle={data.titleFill}
|
||||
strokeStyle={data.titleStroke}
|
||||
font={data.titleFont}
|
||||
></text>
|
||||
</container>
|
||||
)}
|
||||
{slots.default ? (
|
||||
slots.default(data)
|
||||
) : props.winskin ? (
|
||||
<winskin
|
||||
image={props.winskin}
|
||||
loc={[0, contentY.value, data.width!, backHeight.value]}
|
||||
></winskin>
|
||||
) : (
|
||||
<g-rect
|
||||
loc={[0, contentY.value, data.width!, backHeight.value]}
|
||||
fill
|
||||
fillStyle={data.backColor}
|
||||
></g-rect>
|
||||
)}
|
||||
<TextContent
|
||||
{...contentData}
|
||||
ref={content}
|
||||
x={data.padding!}
|
||||
y={contentY.value + data.padding!}
|
||||
width={contentWidth.value}
|
||||
height={contentHeight.value}
|
||||
onTypeEnd={onTypeEnd}
|
||||
onTypeStart={onTypeStart}
|
||||
></TextContent>
|
||||
</container>
|
||||
);
|
||||
return () => {
|
||||
return (
|
||||
<container {...data} hidden={hidden.value} alpha={data.alpha}>
|
||||
{data.title ? (
|
||||
<container
|
||||
zIndex={10}
|
||||
width={titleWidth.value}
|
||||
height={titleHeight.value}
|
||||
>
|
||||
{slots.title ? (
|
||||
slots.title(data)
|
||||
) : props.winskin ? (
|
||||
<winskin image={props.winskin}></winskin>
|
||||
) : (
|
||||
<g-rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={titleWidth.value}
|
||||
height={titleHeight.value}
|
||||
fillStyle={data.backColor}
|
||||
></g-rect>
|
||||
)}
|
||||
<text
|
||||
ref={titleElement}
|
||||
text={data.title}
|
||||
x={data.titlePadding}
|
||||
y={data.titlePadding}
|
||||
fillStyle={data.titleFill}
|
||||
strokeStyle={data.titleStroke}
|
||||
font={data.titleFont}
|
||||
></text>
|
||||
</container>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{slots.default ? (
|
||||
slots.default(data)
|
||||
) : props.winskin ? (
|
||||
<winskin image={props.winskin}></winskin>
|
||||
) : (
|
||||
<g-rect
|
||||
x={0}
|
||||
y={contentY.value}
|
||||
width={data.width ?? 200}
|
||||
height={(data.height ?? 200) - contentY.value}
|
||||
fill
|
||||
fillStyle={data.backColor}
|
||||
></g-rect>
|
||||
)}
|
||||
<TextContent
|
||||
{...data}
|
||||
id=""
|
||||
hidden={false}
|
||||
x={data.padding!}
|
||||
y={contentY.value + data.padding!}
|
||||
width={contentWidth.value}
|
||||
height={contentHeight.value}
|
||||
onTypeEnd={onTypeEnd}
|
||||
onTypeStart={onTypeStart}
|
||||
zIndex={0}
|
||||
showAll={data.showAll}
|
||||
></TextContent>
|
||||
</container>
|
||||
);
|
||||
};
|
||||
}, textboxOptions);
|
||||
|
||||
interface TextboxStoreEmits {
|
||||
endType: () => void;
|
||||
hide: () => void;
|
||||
show: () => void;
|
||||
update: (value: TextboxProps) => void;
|
||||
setText: (text: string) => void;
|
||||
}
|
||||
|
||||
interface TextboxStoreEvent {
|
||||
@ -509,30 +436,21 @@ export class TextboxStore extends EventEmitter<TextboxStoreEvent> {
|
||||
// @ts-expect-error 无法推导
|
||||
if (!isNil(value)) this.data[key] = value;
|
||||
}
|
||||
this.emits.update(this.data);
|
||||
this.emit('update', this.data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置显示的文本
|
||||
* @param text 要显示的文本
|
||||
*/
|
||||
setText(text: string) {
|
||||
this.emits.setText(text);
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示文本框
|
||||
*/
|
||||
show() {
|
||||
this.emits.show();
|
||||
this.emit('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏文本框
|
||||
*/
|
||||
hide() {
|
||||
this.emits.hide();
|
||||
this.emit('hide');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -135,16 +135,7 @@ export interface TyperIconRenderable {
|
||||
renderable: RenderableData | AutotileRenderable;
|
||||
}
|
||||
|
||||
export interface TyperWaitRenderable {
|
||||
type: TextContentType.Wait;
|
||||
wait: number;
|
||||
waited: number;
|
||||
}
|
||||
|
||||
export type TyperRenderable =
|
||||
| TyperTextRenderable
|
||||
| TyperIconRenderable
|
||||
| TyperWaitRenderable;
|
||||
export type TyperRenderable = TyperTextRenderable | TyperIconRenderable;
|
||||
|
||||
interface TextContentTyperEvent {
|
||||
typeStart: [];
|
||||
@ -280,64 +271,49 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
|
||||
private createTyperData(index: number, line: number) {
|
||||
const renderable = this.renderObject.data[index];
|
||||
if (!renderable) return false;
|
||||
switch (renderable.type) {
|
||||
case TextContentType.Text: {
|
||||
if (line < 0 || line > renderable.splitLines.length) {
|
||||
return false;
|
||||
}
|
||||
const start = renderable.splitLines[line - 1] ?? -1;
|
||||
const end =
|
||||
renderable.splitLines[line] ?? renderable.text.length - 1;
|
||||
|
||||
const data: TyperTextRenderable = {
|
||||
type: TextContentType.Text,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
text: renderable.text.slice(start + 1, end + 1),
|
||||
font: renderable.font,
|
||||
fillStyle: renderable.fillStyle,
|
||||
strokeStyle: this.config.strokeStyle,
|
||||
pointer: 0
|
||||
};
|
||||
this.processingData = data;
|
||||
this.renderData.push(data);
|
||||
return true;
|
||||
if (renderable.type === TextContentType.Text) {
|
||||
if (line < 0 || line > renderable.splitLines.length) {
|
||||
return false;
|
||||
}
|
||||
case TextContentType.Icon: {
|
||||
const tex = texture.getRenderable(renderable.icon!);
|
||||
if (!tex) return false;
|
||||
const { render } = tex;
|
||||
const [, , width, height] = render[0];
|
||||
const aspect = width / height;
|
||||
let iconWidth = 0;
|
||||
if (aspect < 1) {
|
||||
// 这时候应该把高度限定在当前字体大小
|
||||
iconWidth = width * (renderable.fontSize / height);
|
||||
} else {
|
||||
iconWidth = renderable.fontSize;
|
||||
}
|
||||
const data: TyperIconRenderable = {
|
||||
type: TextContentType.Icon,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
width: iconWidth,
|
||||
height: iconWidth / aspect,
|
||||
renderable: tex
|
||||
};
|
||||
this.processingData = data;
|
||||
this.renderData.push(data);
|
||||
return true;
|
||||
}
|
||||
case TextContentType.Wait: {
|
||||
const data: TyperWaitRenderable = {
|
||||
type: TextContentType.Wait,
|
||||
wait: renderable.wait!,
|
||||
waited: 0
|
||||
};
|
||||
this.processingData = data;
|
||||
this.renderData.push(data);
|
||||
return true;
|
||||
const start = renderable.splitLines[line - 1] ?? 0;
|
||||
const end = renderable.splitLines[line] ?? renderable.text.length;
|
||||
const data: TyperTextRenderable = {
|
||||
type: TextContentType.Text,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
text: renderable.text.slice(start, end),
|
||||
font: renderable.font,
|
||||
fillStyle: renderable.fillStyle,
|
||||
strokeStyle: this.config.strokeStyle,
|
||||
pointer: 0
|
||||
};
|
||||
this.processingData = data;
|
||||
this.renderData.push(data);
|
||||
return true;
|
||||
} else {
|
||||
const tex = texture.getRenderable(renderable.icon!);
|
||||
if (!tex) return false;
|
||||
const { render } = tex;
|
||||
const [, , width, height] = render[0];
|
||||
const aspect = width / height;
|
||||
let iconWidth = 0;
|
||||
if (aspect < 1) {
|
||||
// 这时候应该把高度限定在当前字体大小
|
||||
iconWidth = width * (renderable.fontSize / height);
|
||||
} else {
|
||||
iconWidth = renderable.fontSize;
|
||||
}
|
||||
const data: TyperIconRenderable = {
|
||||
type: TextContentType.Icon,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
width: iconWidth,
|
||||
height: iconWidth / aspect,
|
||||
renderable: tex
|
||||
};
|
||||
this.processingData = data;
|
||||
this.renderData.push(data);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -363,64 +339,62 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
|
||||
return true;
|
||||
}
|
||||
const lineHeight = this.renderObject.lineHeights[this.nowLine];
|
||||
switch (now.type) {
|
||||
case TextContentType.Text: {
|
||||
const restChars = now.text.length - now.pointer;
|
||||
if (restChars <= rest) {
|
||||
// 当前这段 renderable 打字完成后，刚好结束或还有内容
|
||||
rest -= restChars;
|
||||
now.pointer = now.text.length;
|
||||
if (this.dataLine === renderable.splitLines.length) {
|
||||
// 如果是最后一行
|
||||
if (isNil(renderable.lastLineWidth)) {
|
||||
const ctx = this.parser.testCanvas.ctx;
|
||||
ctx.font = now.font;
|
||||
const metrics = ctx.measureText(now.text);
|
||||
renderable.lastLineWidth = metrics.width;
|
||||
}
|
||||
this.x += renderable.lastLineWidth;
|
||||
this.dataLine = 0;
|
||||
this.pointer++;
|
||||
} else {
|
||||
// 不是最后一行，那么换行
|
||||
this.x = 0;
|
||||
this.y += lineHeight + this.config.lineHeight;
|
||||
this.dataLine++;
|
||||
this.nowLine++;
|
||||
if (now.type === TextContentType.Text) {
|
||||
const restChars = now.text.length - now.pointer;
|
||||
if (restChars <= rest) {
|
||||
// 当前这段 renderable 打字完成后，刚好结束或还有内容
|
||||
rest -= restChars;
|
||||
now.pointer = now.text.length;
|
||||
if (this.dataLine === renderable.splitLines.length) {
|
||||
// 如果是最后一行
|
||||
if (isNil(renderable.lastLineWidth)) {
|
||||
const ctx = this.parser.testCanvas.ctx;
|
||||
ctx.font = now.font;
|
||||
const metrics = ctx.measureText(now.text);
|
||||
renderable.lastLineWidth = metrics.width;
|
||||
}
|
||||
this.x += renderable.lastLineWidth;
|
||||
this.dataLine = 0;
|
||||
this.pointer++;
|
||||
const success = this.createTyperData(
|
||||
this.pointer,
|
||||
this.dataLine
|
||||
);
|
||||
if (!success) return true;
|
||||
} else {
|
||||
now.pointer += rest;
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case TextContentType.Icon: {
|
||||
rest--;
|
||||
this.pointer++;
|
||||
if (renderable.splitLines[0] === 0) {
|
||||
// 如果图标换行
|
||||
// 不是最后一行，那么换行
|
||||
this.x = 0;
|
||||
this.y += lineHeight + this.config.lineHeight;
|
||||
this.dataLine++;
|
||||
this.nowLine++;
|
||||
this.dataLine = 0;
|
||||
now.x = 0;
|
||||
now.y = this.y;
|
||||
} else {
|
||||
this.x += now.width;
|
||||
const success = this.createTyperData(
|
||||
this.pointer,
|
||||
this.dataLine
|
||||
);
|
||||
if (!success) return true;
|
||||
}
|
||||
break;
|
||||
} else {
|
||||
now.pointer += rest;
|
||||
return false;
|
||||
}
|
||||
case TextContentType.Wait: {
|
||||
now.waited += num;
|
||||
if (now.waited > now.wait) {
|
||||
// 等待结束
|
||||
this.pointer++;
|
||||
}
|
||||
break;
|
||||
} else {
|
||||
rest--;
|
||||
this.pointer++;
|
||||
if (renderable.splitLines[0] === 0) {
|
||||
// 如果图标换行
|
||||
this.x = 0;
|
||||
this.y += lineHeight + this.config.lineHeight;
|
||||
this.nowLine++;
|
||||
this.dataLine = 0;
|
||||
now.x = 0;
|
||||
now.y = this.y;
|
||||
}
|
||||
const success = this.createTyperData(
|
||||
this.pointer,
|
||||
this.dataLine
|
||||
);
|
||||
if (!success) return true;
|
||||
}
|
||||
const success = this.createTyperData(this.pointer, this.dataLine);
|
||||
if (!success) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@ -448,7 +422,6 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
|
||||
* 开始打字
|
||||
*/
|
||||
type() {
|
||||
if (this.typing) return;
|
||||
if (this.config.interval === 0) {
|
||||
this.emit('typeStart');
|
||||
this.typeChars(Infinity);
|
||||
@ -465,7 +438,6 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
|
||||
* 立即显示所有文字
|
||||
*/
|
||||
typeAll() {
|
||||
if (!this.typing) return;
|
||||
this.typeChars(Infinity);
|
||||
this.render?.(this.renderData, false);
|
||||
}
|
||||
@ -589,7 +561,7 @@ export class TextContentParser {
|
||||
const end = this.indexParam(start);
|
||||
if (end === -1) {
|
||||
// 标签结束
|
||||
return ['', start - 1];
|
||||
return ['', start];
|
||||
} else {
|
||||
// 标签开始
|
||||
return [this.text.slice(start + 1, end), end];
|
||||
@ -660,43 +632,43 @@ export class TextContentParser {
|
||||
}
|
||||
|
||||
private parseFillStyle(pointer: number) {
|
||||
const [param, end] = this.getChildableTagParam(pointer + 2);
|
||||
const [param, end] = this.getChildableTagParam(pointer + 1);
|
||||
if (!param) {
|
||||
// 参数为空或没有参数，视为标签结束
|
||||
const color = this.fillStyleStack.pop();
|
||||
if (!color) {
|
||||
logger.warn(54, '\\r', pointer.toString());
|
||||
return end;
|
||||
return pointer;
|
||||
}
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fillStyle = color;
|
||||
return end;
|
||||
return pointer;
|
||||
} else {
|
||||
// 标签开始
|
||||
this.fillStyleStack.push(this.status.fillStyle);
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fillStyle = param;
|
||||
return end;
|
||||
}
|
||||
}
|
||||
|
||||
private parseFontSize(pointer: number) {
|
||||
const [param, end] = this.getChildableTagParam(pointer + 2);
|
||||
const [param, end] = this.getChildableTagParam(pointer + 1);
|
||||
if (!param) {
|
||||
// 参数为空或没有参数，视为标签结束
|
||||
const size = this.fontSizeStack.pop();
|
||||
if (!size) {
|
||||
logger.warn(54, '\\c', pointer.toString());
|
||||
return end;
|
||||
return pointer;
|
||||
}
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fontSize = size;
|
||||
this.font = this.buildFont();
|
||||
return end;
|
||||
return pointer;
|
||||
} else {
|
||||
// 标签开始
|
||||
this.fontSizeStack.push(this.status.fontSize);
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fontSize = parseFloat(param);
|
||||
this.font = this.buildFont();
|
||||
return end;
|
||||
@ -704,22 +676,22 @@ export class TextContentParser {
|
||||
}
|
||||
|
||||
private parseFontFamily(pointer: number) {
|
||||
const [param, end] = this.getChildableTagParam(pointer + 2);
|
||||
const [param, end] = this.getChildableTagParam(pointer + 1);
|
||||
if (!param) {
|
||||
// 参数为空或没有参数，视为标签结束
|
||||
const font = this.fontFamilyStack.pop();
|
||||
if (!font) {
|
||||
logger.warn(54, '\\g', pointer.toString());
|
||||
return end;
|
||||
return pointer;
|
||||
}
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fontFamily = font;
|
||||
this.font = this.buildFont();
|
||||
return end;
|
||||
return pointer;
|
||||
} else {
|
||||
// 标签开始
|
||||
this.fontFamilyStack.push(this.status.fontFamily);
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fontFamily = param;
|
||||
this.font = this.buildFont();
|
||||
return end;
|
||||
@ -727,20 +699,20 @@ export class TextContentParser {
|
||||
}
|
||||
|
||||
private parseFontWeight() {
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fontWeight = this.status.fontWeight > 500 ? 500 : 700;
|
||||
this.font = this.buildFont();
|
||||
}
|
||||
|
||||
private parseFontItalic() {
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
this.addTextRenderable();
|
||||
this.status.fontItalic = !this.status.fontItalic;
|
||||
this.font = this.buildFont();
|
||||
}
|
||||
|
||||
private parseWait(pointer: number) {
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
const [param, end] = this.getTagParam(pointer + 2);
|
||||
this.addTextRenderable();
|
||||
const [param, end] = this.getTagParam(pointer);
|
||||
if (!param) {
|
||||
logger.warn(55, '\\z');
|
||||
return pointer;
|
||||
@ -751,10 +723,10 @@ export class TextContentParser {
|
||||
}
|
||||
|
||||
private parseIcon(pointer: number) {
|
||||
if (this.resolved.length > 0) this.addTextRenderable();
|
||||
const [param, end] = this.getTagParam(pointer + 2);
|
||||
this.addTextRenderable();
|
||||
const [param, end] = this.getTagParam(pointer);
|
||||
if (!param) {
|
||||
logger.warn(55, '\\i');
|
||||
logger.warn(55, '\\z');
|
||||
return pointer;
|
||||
}
|
||||
if (/^\d+$/.test(param)) {
|
||||
@ -767,10 +739,6 @@ export class TextContentParser {
|
||||
this.addIconRenderable(num as AllNumbers);
|
||||
} else {
|
||||
const num = texture.idNumberMap[param as AllIds];
|
||||
if (num === void 0) {
|
||||
logger.warn(59, param);
|
||||
return end;
|
||||
}
|
||||
this.addIconRenderable(num);
|
||||
}
|
||||
}
|
||||
@ -874,11 +842,9 @@ export class TextContentParser {
|
||||
break;
|
||||
case 'd':
|
||||
this.parseFontWeight();
|
||||
pointer++;
|
||||
break;
|
||||
case 'e':
|
||||
this.parseFontItalic();
|
||||
pointer++;
|
||||
break;
|
||||
case 'z':
|
||||
pointer = this.parseWait(pointer);
|
||||
@ -895,7 +861,7 @@ export class TextContentParser {
|
||||
// 表达式
|
||||
pointer++;
|
||||
inExpression = true;
|
||||
expStart = pointer + 1;
|
||||
expStart = pointer;
|
||||
continue;
|
||||
}
|
||||
|
||||
@ -909,8 +875,7 @@ export class TextContentParser {
|
||||
|
||||
private getHeight(metrics: TextMetrics) {
|
||||
return (
|
||||
Math.abs(metrics.actualBoundingBoxAscent) +
|
||||
Math.abs(metrics.actualBoundingBoxDescent)
|
||||
metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
|
||||
);
|
||||
}
|
||||
|
||||
@ -934,14 +899,10 @@ export class TextContentParser {
|
||||
// 如果大于猜测，那么算长度
|
||||
const data = this.renderable[this.nowRenderable];
|
||||
const ctx = this.testCanvas.ctx;
|
||||
ctx.font = data.font;
|
||||
ctx.font = this.font;
|
||||
const metrics = ctx.measureText(
|
||||
data.text.slice(this.lineStart, pointer + 1)
|
||||
);
|
||||
const height = this.getHeight(metrics);
|
||||
if (height > this.lineHeight) {
|
||||
this.lineHeight = height;
|
||||
}
|
||||
if (metrics.width < rest) {
|
||||
// 实际宽度小于剩余宽度时，将猜测增益乘以剩余总宽度与当前宽度的比值的若干倍
|
||||
this.guessGain *= (rest / metrics.width) * (1.1 + 1 / length);
|
||||
@ -986,7 +947,7 @@ export class TextContentParser {
|
||||
const data = this.renderable[index];
|
||||
const { wordBreak } = data;
|
||||
const ctx = this.testCanvas.ctx;
|
||||
ctx.font = data.font;
|
||||
ctx.font = this.font;
|
||||
while (true) {
|
||||
const mid = Math.floor((start + end) / 2);
|
||||
if (mid === start) {
|
||||
@ -997,33 +958,31 @@ export class TextContentParser {
|
||||
}
|
||||
const text = data.text.slice(
|
||||
wordBreak[this.bsStart],
|
||||
wordBreak[mid] + 1
|
||||
wordBreak[mid]
|
||||
);
|
||||
const metrics = ctx.measureText(text);
|
||||
height = this.getHeight(metrics);
|
||||
if (metrics.width > width) {
|
||||
end = mid;
|
||||
} else if (metrics.width === width) {
|
||||
if (height > this.lineHeight) {
|
||||
this.lineHeight = height;
|
||||
}
|
||||
return mid;
|
||||
} else {
|
||||
start = mid;
|
||||
}
|
||||
height = this.getHeight(metrics);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查剩余字符能否分行
|
||||
*/
|
||||
private checkRestLine(width: number, guess: number, pointer: number) {
|
||||
private checkRestLine(width: number, guess: number) {
|
||||
if (this.wordBreak.length === 0) return true;
|
||||
if (pointer === -1) {
|
||||
return this.checkLineWidth(width, guess, 0);
|
||||
const last = this.nowRenderable - 1;
|
||||
if (last === -1) {
|
||||
const now = this.renderable[this.nowRenderable];
|
||||
return this.checkLineWidth(width, guess, now.text.length);
|
||||
}
|
||||
const isLast = this.renderable.length - 1 === pointer;
|
||||
const data = this.renderable[pointer];
|
||||
const data = this.renderable[last];
|
||||
const rest = width - this.lineWidth;
|
||||
if (data.type === TextContentType.Text) {
|
||||
const wordBreak = data.wordBreak;
|
||||
@ -1031,7 +990,7 @@ export class TextContentParser {
|
||||
const lastIndex = isNil(lastLine) ? 0 : lastLine;
|
||||
const restText = data.text.slice(lastIndex);
|
||||
const ctx = this.testCanvas.ctx;
|
||||
ctx.font = data.font;
|
||||
ctx.font = this.font;
|
||||
const metrics = ctx.measureText(restText);
|
||||
// 如果剩余内容不能构成完整的行
|
||||
if (metrics.width < rest) {
|
||||
@ -1049,12 +1008,12 @@ export class TextContentParser {
|
||||
this.bsEnd = lastBreak;
|
||||
let maxWidth = rest;
|
||||
while (true) {
|
||||
const index = this.bsLineWidth(maxWidth, pointer);
|
||||
const index = this.bsLineWidth(maxWidth, last);
|
||||
data.splitLines.push(this.wordBreak[index]);
|
||||
this.lineHeights.push(this.lineHeight);
|
||||
this.bsStart = index;
|
||||
const text = data.text.slice(this.wordBreak[index]);
|
||||
if (!isLast && text.length < guess / 4) {
|
||||
if (text.length < guess / 4) {
|
||||
// 如果剩余文字很少，几乎不可能会单独成一行时，直接结束循环
|
||||
this.lastBreakIndex = index;
|
||||
break;
|
||||
@ -1081,15 +1040,9 @@ export class TextContentParser {
|
||||
} else {
|
||||
iconWidth = this.status.fontSize;
|
||||
}
|
||||
this.lineWidth += iconWidth;
|
||||
const iconHeight = iconWidth / aspect;
|
||||
if (iconHeight > this.lineHeight) {
|
||||
this.lineHeight = iconHeight;
|
||||
}
|
||||
if (iconWidth > rest) {
|
||||
data.splitLines.push(0);
|
||||
this.lineHeights.push(this.lineHeight);
|
||||
this.lineWidth = 0;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
@ -1117,6 +1070,8 @@ export class TextContentParser {
|
||||
|
||||
const allBreak = this.wordBreakRule === WordBreak.All;
|
||||
|
||||
// debugger;
|
||||
|
||||
for (let i = 0; i < this.renderable.length; i++) {
|
||||
const data = this.renderable[i];
|
||||
const { wordBreak, fontSize } = data;
|
||||
@ -1125,7 +1080,7 @@ export class TextContentParser {
|
||||
this.wordBreak = wordBreak;
|
||||
|
||||
if (data.type === TextContentType.Icon) {
|
||||
this.checkRestLine(width, guess, i - 1);
|
||||
this.checkRestLine(width, guess);
|
||||
continue;
|
||||
} else if (data.type === TextContentType.Wait) {
|
||||
continue;
|
||||
@ -1167,7 +1122,7 @@ export class TextContentParser {
|
||||
}
|
||||
}
|
||||
|
||||
this.checkRestLine(width, guess, i);
|
||||
this.checkRestLine(width, guess);
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -4,7 +4,6 @@ import { defineComponent } from 'vue';
|
||||
import { UIController } from '@/core/system';
|
||||
import { mainSceneUI } from './ui/main';
|
||||
import { MAIN_HEIGHT, MAIN_WIDTH } from './shared';
|
||||
import { TextboxStore } from './components';
|
||||
|
||||
export function create() {
|
||||
const main = new MotaRenderer();
|
||||
@ -35,10 +34,6 @@ export function create() {
|
||||
console.log(main);
|
||||
}
|
||||
|
||||
Mota.register('module', 'MainUI', {
|
||||
TextboxStore
|
||||
});
|
||||
|
||||
export * from './components';
|
||||
export * from './ui';
|
||||
export * from './use';
|
||||
|
||||
@ -57,7 +57,9 @@ const MainScene = defineComponent(() => {
|
||||
const mainTextboxProps: Props<typeof Textbox> = {
|
||||
text: '',
|
||||
hidden: true,
|
||||
loc: [0, 330, 480, 150],
|
||||
width: 480,
|
||||
height: 150,
|
||||
y: 330,
|
||||
zIndex: 30,
|
||||
fillStyle: '#fff',
|
||||
titleFill: 'gold',
|
||||
@ -65,7 +67,7 @@ const MainScene = defineComponent(() => {
|
||||
titleFont: '700 20px normal',
|
||||
winskin: 'winskin2.png',
|
||||
interval: 100,
|
||||
lineHeight: 4
|
||||
lineHeight: 6
|
||||
};
|
||||
|
||||
const map = ref<LayerGroup>();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user