diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue index 3ad1bba..5265498 100644 --- a/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue +++ b/src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue @@ -85,6 +85,7 @@ import { ref, inject, computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue' import DepthInput from '../tools/depth-input.vue' import DepthSelect from '../tools/depth-select.vue' + import { BlendMode } from '../../tools/layerHelper' import { useI18n } from 'vue-i18n' const { t } = useI18n() const objectManager = inject('objectManager') as any @@ -104,7 +105,7 @@ height: 0, scaleX: 1, scaleY: 1, - globalCompositeOperation: 'source-over' + globalCompositeOperation: BlendMode.NORMAL }) const updateData = async () => { await nextTick() @@ -139,87 +140,91 @@ const layerCompositeOptions = ref([ { - value: 'source-over', + value: BlendMode.NORMAL, label: t('DepthCanvas.compositeNormal'), tip: t('DepthCanvas.compositeNormalTip') }, // 正常 { - value: 'darken', + value: BlendMode.DARKEN, label: t('DepthCanvas.compositeDarken'), tip: t('DepthCanvas.compositeDarkenTip') }, // 变暗 { - value: 'multiply', + value: BlendMode.MULTIPLY, label: t('DepthCanvas.compositeMultiply'), tip: t('DepthCanvas.compositeMultiplyTip') }, // 正片叠底 { - value: 'color-burn', + value: BlendMode.COLOR_BURN, label: t('DepthCanvas.compositeColorBurn'), tip: t('DepthCanvas.compositeColorBurnTip') }, // 颜色加深 { - value: 'lighten', + value: BlendMode.LIGHTEN, label: t('DepthCanvas.compositeLighten'), tip: t('DepthCanvas.compositeLightenTip') - }, // 颜色减淡 + }, // 变亮 { - value: 'screen', + value: BlendMode.SCREEN, label: t('DepthCanvas.compositeScreen'), tip: t('DepthCanvas.compositeScreenTip') }, // 滤色 { - value: 'color-dodge', + value: BlendMode.COLOR_DODGE, label: t('DepthCanvas.compositeColorDodge'), tip: t('DepthCanvas.compositeColorDodgeTip') }, // 颜色减淡 { - value: 'lighter', + value: BlendMode.LIGHTER, label: t('DepthCanvas.compositeLighter'), tip: t('DepthCanvas.compositeLighterTip') - }, // 颜色减淡 + }, // 颜色减淡(添加) { - value: 'overlay', + value: BlendMode.OVERLAY, label: t('DepthCanvas.compositeOverlay'), tip: t('DepthCanvas.compositeOverlayTip') }, // 叠加 { - value: 'soft-light', + value: BlendMode.SOFT_LIGHT, label: t('DepthCanvas.compositeSoftLight'), tip: t('DepthCanvas.compositeSoftLightTip') }, // 柔光 { - value: 'hard-light', + value: BlendMode.HARD_LIGHT, label: t('DepthCanvas.compositeHardLight'), tip: t('DepthCanvas.compositeHardLightTip') }, // 强光 { - value: 'difference', + value: BlendMode.DIFFERENCE, label: t('DepthCanvas.compositeDifference'), tip: t('DepthCanvas.compositeDifferenceTip') }, // 差值 { - value: 'exclusion', + value: BlendMode.EXCLUSION, label: t('DepthCanvas.compositeExclusion'), tip: t('DepthCanvas.compositeExclusionTip') }, // 排除 - { value: 'hue', label: t('DepthCanvas.compositeHue'), tip: t('DepthCanvas.compositeHueTip') }, // 色相 { - value: 'saturation', + value: BlendMode.HUE, + label: t('DepthCanvas.compositeHue'), + tip: t('DepthCanvas.compositeHueTip') + }, // 色相 + { + value: BlendMode.SATURATION, label: t('DepthCanvas.compositeSaturation'), tip: t('DepthCanvas.compositeSaturationTip') }, // 饱和度 { - value: 'color', + value: BlendMode.COLOR, label: t('DepthCanvas.compositeColor'), tip: t('DepthCanvas.compositeColorTip') }, // 颜色 { - value: 'luminosity', + value: BlendMode.LUMINOSITY, label: t('DepthCanvas.compositeLuminosity'), tip: t('DepthCanvas.compositeLuminosityTip') } // 亮度 diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue index 2bbd79e..ac2d630 100644 --- a/src/components/Canvas/DepthCanvas/depth-canvas.vue +++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue @@ -88,7 +88,7 @@ provide('toolManager', toolManager) //键盘事件管理器 - const keyEventManager = new KeyEventManager({ stateManager, onWorkbench }) + const keyEventManager = new KeyEventManager({ stateManager, onWorkbench, layerManager }) stateManager.setManager({ keyEventManager }) provide('keyEventManager', keyEventManager) @@ -163,15 +163,7 @@ input.addEventListener('change', (e: any) => { const file = e.target.files[0] if (!file) return - const reader = new FileReader() - reader.readAsDataURL(file) - reader.onload = () => { - toolManager.setTool(OperationType.SELECT) - const url = reader.result as string - layerManager - .createImageLayer(url, { info: { name: file.name } }, isRecord) - .then((v) => resolve(v)) - } + layerManager.createFileImageLayer(file, isRecord).then((v) => resolve(v)) }) }) } diff --git a/src/components/Canvas/DepthCanvas/index.vue b/src/components/Canvas/DepthCanvas/index.vue index 8276ed6..799db3d 100644 --- a/src/components/Canvas/DepthCanvas/index.vue +++ b/src/components/Canvas/DepthCanvas/index.vue @@ -21,7 +21,13 @@ import { getDepthCanvas, saveDepthCanvas } from '@/api/depth-canvas' import FullscreenDialog from '../components/fullscreen-dialog.vue' import depthCanvas from './depth-canvas.vue' - import { ref } from 'vue' + import { ref, watch } from 'vue' + import { useRoute } from 'vue-router' + const route = useRoute() + watch( + () => route.path, + () => dialogVisible.value && (dialogVisible.value = false) + ) const dialogVisible = ref(false) const config = ref({ canvasId: '', @@ -77,7 +83,9 @@ defineExpose({ open, - close + close: () => { + dialogVisible.value = false + } })