perf: 优化滤镜模糊问题,默认不开启
This commit is contained in:
commit
bd5e06350d
@ -5,6 +5,9 @@
|
||||
</div>
|
||||
|
||||
<collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
|
||||
<template #header>
|
||||
<n-switch v-if="isCanvas" v-model:value="chartStyles.filterShow" size="small"></n-switch>
|
||||
</template>
|
||||
<setting-item-box name="色相" :alone="true">
|
||||
<setting-item :name="`值:${chartStyles.hueRotate}deg`">
|
||||
<!-- 透明度 -->
|
||||
@ -121,6 +124,9 @@
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<!-- 提示 -->
|
||||
<n-tag v-show="isCanvas" type="warning"> 若预览时大屏模糊,可以尝试关闭滤镜进行修复 </n-tag>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
|
4
src/packages/index.d.ts
vendored
4
src/packages/index.d.ts
vendored
@ -38,6 +38,9 @@ interface EchartsDataType {
|
||||
|
||||
// 滤镜/变换枚举
|
||||
export enum FilterEnum {
|
||||
// 是否启用
|
||||
FILTERS_SHOW = 'filterShow',
|
||||
|
||||
// 透明度
|
||||
OPACITY = 'opacity',
|
||||
// 饱和度
|
||||
@ -65,6 +68,7 @@ export interface PublicConfigType {
|
||||
isGroup: boolean
|
||||
attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; }
|
||||
styles: {
|
||||
[FilterEnum.FILTERS_SHOW]: boolean
|
||||
[FilterEnum.OPACITY]: number
|
||||
[FilterEnum.SATURATE]: number
|
||||
[FilterEnum.CONTRAST]: number
|
||||
|
@ -43,6 +43,8 @@ export class PublicConfigClass implements PublicConfigType {
|
||||
public attr = { ...chartInitConfig, zIndex: -1 }
|
||||
// 基本样式
|
||||
public styles = {
|
||||
// 使用滤镜
|
||||
filterShow: true,
|
||||
// 色相
|
||||
hueRotate: 0,
|
||||
// 饱和度
|
||||
|
@ -93,6 +93,8 @@ export type EditCanvasConfigType = {
|
||||
[EditCanvasConfigEnum.PROJECT_NAME]: string,
|
||||
// 项目描述
|
||||
[EditCanvasConfigEnum.REMARKS]: string,
|
||||
// 滤镜-启用
|
||||
[FilterEnum.FILTERS_SHOW]: boolean
|
||||
// 滤镜-色相
|
||||
[FilterEnum.HUE_ROTATE]: number
|
||||
// 滤镜-饱和度
|
||||
|
@ -97,6 +97,8 @@ export const useChartEditStore = defineStore({
|
||||
width: 1920,
|
||||
// 默认高度
|
||||
height: 1080,
|
||||
// 启用滤镜
|
||||
filterShow: false,
|
||||
// 色相
|
||||
hueRotate: 0,
|
||||
// 饱和度
|
||||
|
@ -15,7 +15,8 @@ export const animationsClass = (animations: string[]) => {
|
||||
}
|
||||
|
||||
// * 滤镜
|
||||
export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => {
|
||||
export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
|
||||
if(!styles) return {}
|
||||
const { opacity, saturate, contrast, hueRotate, brightness } = styles
|
||||
return {
|
||||
opacity: opacity,
|
||||
|
@ -19,7 +19,7 @@
|
||||
<!-- 滤镜预览 -->
|
||||
<div
|
||||
:style="{
|
||||
...getFilterStyle(chartEditStore.getEditCanvasConfig),
|
||||
...getFilterStyle(filterShow ? chartEditStore.getEditCanvasConfig : undefined),
|
||||
...rangeStyle
|
||||
}"
|
||||
>
|
||||
@ -54,7 +54,7 @@
|
||||
:themeColor="themeColor"
|
||||
:style="{
|
||||
...useSizeStyle(item.attr),
|
||||
...getFilterStyle(item.styles),
|
||||
...getFilterStyle(filterShow ? item.styles : undefined),
|
||||
...getTransformStyle(item.styles)
|
||||
}"
|
||||
></component>
|
||||
@ -148,6 +148,11 @@ const themeColor = computed(() => {
|
||||
return chartColors[chartThemeColor]
|
||||
})
|
||||
|
||||
// 是否展示渲染
|
||||
const filterShow = computed(() => {
|
||||
return chartEditStore.getEditCanvasConfig.filterShow
|
||||
})
|
||||
|
||||
// 背景
|
||||
const rangeStyle = computed(() => {
|
||||
// 设置背景色和图片背景
|
||||
|
@ -59,7 +59,7 @@ if(localStorageInfo.isRelease === false) {
|
||||
const previewRefStyle = computed(() => {
|
||||
return {
|
||||
...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
|
||||
...getFilterStyle(localStorageInfo.editCanvasConfig),
|
||||
...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined),
|
||||
}
|
||||
})
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user