diff --git a/components.d.ts b/components.d.ts index 3c36654..2ceb08d 100644 --- a/components.d.ts +++ b/components.d.ts @@ -14,7 +14,6 @@ declare module '@vue/runtime-core' { AudioIcon: typeof import('./src/components/icons/AudioIcon.vue')['default'] AudioItem: typeof import('./src/components/item/trackItem/template/AudioItem.vue')['default'] AudioPanel: typeof import('./src/components/AudioPanel/index.vue')['default'] - AudioResourceItem: typeof import('./src/components/item/resourcesItem/AudioResourceItem.vue')['default'] CanvasPlayer: typeof import('./src/components/container/CanvasPlayer.vue')['default'] ColorPicker: typeof import('./src/components/item/formItem/color/ColorPicker.vue')['default'] DeleteIcon: typeof import('./src/components/icons/DeleteIcon.vue')['default'] @@ -47,7 +46,6 @@ declare module '@vue/runtime-core' { Loading: typeof import('./src/components/Loading.vue')['default'] LocalPanel: typeof import('./src/components/LocalPanel/index.vue')['default'] MenuList: typeof import('./src/components/MenuList.vue')['default'] - OtherResource: typeof import('./src/components/item/resourcesItem/OtherResource.vue')['default'] Player: typeof import('./src/components/item/player/Player.vue')['default'] PlayerControl: typeof import('./src/components/item/player/PlayerControl.vue')['default'] PlayerMoveable: typeof import('./src/components/item/player/PlayerMoveable.vue')['default'] @@ -58,7 +56,6 @@ declare module '@vue/runtime-core' { SplitIcon: typeof import('./src/components/icons/SplitIcon.vue')['default'] SplitLine: typeof import('./src/components/SplitLine.vue')['default'] SubIcon: typeof import('./src/components/icons/SubIcon.vue')['default'] - SubList: typeof import('./src/components/SubList.vue')['default'] Subsection: typeof import('./src/components/Subsection/index.vue')['default'] Tabs: typeof import('./src/components/Tabs/index.vue')['default'] TextIcon: typeof import('./src/components/icons/TextIcon.vue')['default'] diff --git a/src/class/TextTrack.ts b/src/class/TextTrack.ts index d9d632d..b42b3bd 100644 --- a/src/class/TextTrack.ts +++ b/src/class/TextTrack.ts @@ -21,30 +21,39 @@ export class TextTrack implements BaseTractItem { stroke?: string; textBackgroundColor?: string; // 影响文本绘制的属性都使用getter/setter，在设置时，需要重新计算文本宽高 - #fontSize = 24; + _fontSize = 24; get fontSize() { - return this.#fontSize; + return this._fontSize; } set fontSize(value: number) { - this.#fontSize = value; + this._fontSize = value; // 绘制文本时，需要重新计算文本宽高 this.calcSize(); } - #fontFamily = 'Arial'; + _fontFamily = 'Arial'; get fontFamily() { - return this.#fontFamily; + return this._fontFamily; } set fontFamily(value: string) { - this.#fontFamily = value; + this._fontFamily = value; // 绘制文本时，需要重新计算文本宽高 this.calcSize(); } - #content = ''; + _content = ''; get content() { - return this.#content; + return this._content; } set content(value: string) { - this.#content = value; + this._content = value; + // 绘制文本时，需要重新计算文本宽高 + this.calcSize(); + } + _scale = 100; + get scale() { + return this._scale; + } + set scale(value: number) { + this._scale = value; // 绘制文本时，需要重新计算文本宽高 this.calcSize(); } @@ -54,12 +63,12 @@ export class TextTrack implements BaseTractItem { this.source = source; // 设置文字信息 - this.#content = source.content; + this._content = source.content; + this._fontSize = source.fontSize; + this._fontFamily = source.fontFamily; this.fill = source.fill; this.stroke = source.stroke; this.textBackgroundColor = source.textBackgroundColor; - this.#fontSize = source.fontSize; - this.#fontFamily = source.fontFamily; this.name = source.name; // 对于文本意义不大 this.format = 'text'; @@ -70,15 +79,14 @@ export class TextTrack implements BaseTractItem { // 设置绘制信息 this.centerX = 0; this.centerY = 0; - this.scale = 100; this.calcSize(); } calcSize() { - const { width, height } = getTextRect({ text: this.#content, fontSize: this.#fontSize, fontFamily: this.#fontFamily }); + const { width, height } = getTextRect({ text: this._content, fontSize: this._fontSize, fontFamily: this._fontFamily }); // 计算文本宽高 - this.height = height; this.width = width; + this.height = height; } get drawWidth() { return this.width * this.scale / 100; @@ -89,7 +97,6 @@ export class TextTrack implements BaseTractItem { type: TrackType = 'text'; centerX = 0; centerY = 0; - scale = 100; width = 0; height = 0; getDrawX(width: number) { diff --git a/src/components/item/formItem/FormItem.vue b/src/components/item/formItem/FormItem.vue index 674d8f8..4129fec 100644 --- a/src/components/item/formItem/FormItem.vue +++ b/src/components/item/formItem/FormItem.vue @@ -130,8 +130,8 @@ const { selectResource, selectTrackItem, trackList } = storeToRefs(trackStore); const formValue = computed({ get() { - if (selectResource.value) { - return get(toRaw(trackList.value[selectTrackItem.value.line].list[selectTrackItem.value.index]), props.componentData.mappingKey); + if (trackStore.selectResource) { + return get(trackStore.trackList[trackStore.selectTrackItem.line].list[trackStore.selectTrackItem.index], props.componentData.mappingKey); } else { return null; } diff --git a/src/data/options/text.ts b/src/data/options/text.ts index fd8920b..4172912 100644 --- a/src/data/options/text.ts +++ b/src/data/options/text.ts @@ -43,10 +43,10 @@ export const Options = { maxRows: 4 }, placeholder: '请输入内容' - }, name: '内容', mappingKey: 'text', defaultValue: '默认文本' }), - mappingFormItem('Color', { name: '颜色', mappingKey: 'style.fill', defaultValue: '#ffffff' }), - mappingFormItem('Color', { name: '描边', mappingKey: 'style.stroke' }), - mappingFormItem('Color', { name: '背景', mappingKey: 'style.textBackgroundColor' }) + }, name: '内容', mappingKey: 'content', defaultValue: '默认文本' }), + mappingFormItem('Color', { name: '颜色', mappingKey: 'fill', defaultValue: '#ffffff' }), + mappingFormItem('Color', { name: '描边', mappingKey: 'stroke' }), + mappingFormItem('Color', { name: '背景', mappingKey: 'textBackgroundColor' }) ] }) ]