aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

深度画布工具栏

Browse Source
This commit is contained in:
lzp
2026-03-18 10:52:06 +08:00
parent efe7134744
commit ce65e0e5a3
3 changed files with 159 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/dc/dui.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.84125 5.40854L8.06875 0.172916C8.18375 0.0576386 8.31264 0 8.45542 0C8.59833 0 8.7275 0.0575006 8.84292 0.172501C8.9582 0.287501 9.01583 0.416458 9.01583 0.559375C9.01583 0.70243 8.9582 0.831667 8.84292 0.947084L3.30604 6.47583C3.16924 6.61264 3.01083 6.68104 2.83083 6.68104C2.65083 6.68104 2.49243 6.61264 2.35563 6.47583L0.172917 4.30125C0.0576393 4.18625 0 4.05736 0 3.91458C0 3.77167 0.0575 3.6425 0.1725 3.52708C0.2875 3.41181 0.416458 3.35417 0.559375 3.35417C0.702431 3.35417 0.831667 3.41181 0.947083 3.52708L2.84125 5.40854Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 664 B

227
src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
View File

@@ -2,14 +2,31 @@
<div class="header-tools"> <div class="header-tools">
<template v-for="(v, i) in tools" :key="i"> <template v-for="(v, i) in tools" :key="i">
<span class="line" v-if="v.type === 'line'"></span> <span class="line" v-if="v.type === 'line'"></span>
<span <div v-else class="item">
v-else <span
class="icon" class="icon"
@click="onClickTool(v)" @click="onClickTool(v)"
:class="{ active: v.name === tool, disabled: v.disabled }" :class="{
> active: v.name === tool,
<svg-icon :name="v.icon" :size="v.iconSize" /> disabled: v.disabled
</span> }"
>
<svg-icon :name="v.icon" :size="v.iconSize" />
</span>
<span class="more" v-if="v.child" @click="onClickMore(v)">
<svg-icon name="dc-down_arrow2" size="7" />
</span>
<div v-if="v.child" class="child" v-show="v.showChild">
<div v-for="(v_, i_) in v.child" :key="i_" @click="onClickTool(v_, v)">
<span v-show="tool === v_.name" class="dui">
<svg-icon name="dc-dui" size="9" />
</span>
<span class="icon"><svg-icon :name="v_.icon" :size="v_.iconSize" /></span>
<span class="label">{{ v_.label }}</span>
<span class="tip">{{ v_.tip }}</span>
</div>
</div>
</div>
</template> </template>
<button class="export" @click="emit('export')"> <button class="export" @click="emit('export')">
<span class="icon"><svg-icon name="export" size="12" /></span> <span class="icon"><svg-icon name="export" size="12" /></span>
@@ -50,64 +67,65 @@
const isRedo = computed(() => !historyList.value[historyIndex.value + 1]) const isRedo = computed(() => !historyList.value[historyIndex.value + 1])
const activeLayerId = computed(() => layerManager.activeID.value) const activeLayerId = computed(() => layerManager.activeID.value)
const tools = ref([ const tools = ref([
{ name: OperationType.SELECT, icon: 'dc-select', iconSize: 16, disabled: ref(false) }, { name: OperationType.SELECT, icon: 'dc-select', iconSize: 16 },
{ name: OperationType.PAN, icon: 'dc-move', iconSize: 18, disabled: ref(false) }, { name: OperationType.PAN, icon: 'dc-move', iconSize: 18 },
{ name: OperationType.DRAW, icon: 'dc-brush', iconSize: 18, disabled: ref(false) }, { name: OperationType.DRAW, icon: 'dc-brush', iconSize: 18 },
{ name: OperationType.ERASER, icon: 'dc-eraser', iconSize: 18, disabled: ref(false) }, { name: OperationType.ERASER, icon: 'dc-eraser', iconSize: 18 },
{ { icon: 'dc-image', iconSize: 17, on: () => onImageClick() },
name: OperationType.IMAGE, { name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16 },
icon: 'dc-image',
iconSize: 17,
disabled: ref(false),
on: () => onImageClick()
},
{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16, disabled: ref(false) },
{ {
name: OperationType.RECTANGLE, name: OperationType.RECTANGLE,
icon: 'dc-rectangle', icon: 'dc-rectangle',
iconSize: 16, iconSize: 16,
disabled: ref(false) showChild: false,
}, child: [
{ {
name: OperationType.LINE, name: OperationType.RECTANGLE,
icon: 'dc-line', label: 'Rectangle',
iconSize: 16, icon: 'dc-rectangle',
disabled: ref(false) iconSize: 13
}, },
{ {
name: OperationType.ARROW, name: OperationType.LINE,
icon: 'dc-arrow', label: 'Line',
iconSize: 16, icon: 'dc-line',
disabled: ref(false) iconSize: 10
}, },
{ {
name: OperationType.ELLIPSE, name: OperationType.ARROW,
icon: 'dc-ellipse', label: 'Arrow',
iconSize: 16, icon: 'dc-arrow',
disabled: ref(false) iconSize: 11
}, },
{ {
name: OperationType.TRIANGLE, name: OperationType.ELLIPSE,
icon: 'dc-triangle', label: 'Ellipse',
iconSize: 16, icon: 'dc-ellipse',
disabled: ref(false) iconSize: 15
}, },
{ {
name: OperationType.STAR, name: OperationType.TRIANGLE,
icon: 'dc-star', label: 'Polygon',
iconSize: 16, icon: 'dc-triangle',
disabled: ref(false) iconSize: 14
},
{
name: OperationType.STAR,
label: 'Star',
icon: 'dc-star',
iconSize: 15
}
]
}, },
{ type: 'line' }, { type: 'line' },
{ {
name: OperationType.UNDO,
icon: 'dc-undo', icon: 'dc-undo',
iconSize: 18, iconSize: 18,
disabled: isUndo, disabled: isUndo,
on: () => stateManager.undoState() on: () => stateManager.undoState()
}, },
{ {
name: OperationType.REDO,
icon: 'dc-redo', icon: 'dc-redo',
iconSize: 18, iconSize: 18,
disabled: isRedo, disabled: isRedo,
@@ -128,13 +146,21 @@
on: () => onDeleteActiveLayer() on: () => onDeleteActiveLayer()
} }
]) ])
const onClickTool = (tool: any) => { const onClickTool = (v: any, parent?: any) => {
if (tool.disabled?.value) return if (v.disabled?.value) return
if (tool.on) { if (parent) {
tool.on() parent.name = v.name
} else { parent.icon = v.icon
toolManager.setTool(tool.name) parent.iconSize = v.iconSize * 1.23
} }
tools.value.forEach((v) => v.hasOwnProperty('showChild') && (v.showChild = false))
v.on ? v.on() : toolManager.setTool(v.name)
}
const onClickMore = (v: any) => {
tools.value.forEach((item) => {
if (item.hasOwnProperty('showChild') && item.name !== v.name) item.showChild = false
})
v.showChild = !v.showChild
} }
const onImageClick = async () => { const onImageClick = async () => {
const layer = await importLocalImage(false) const layer = await importLocalImage(false)
@@ -182,22 +208,81 @@
border-radius: 0.2rem; border-radius: 0.2rem;
margin: 0 0.6rem; margin: 0 0.6rem;
} }
> .icon { > .item {
cursor: pointer; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 3rem; > span {
height: 3rem; cursor: pointer;
--svg-icon-color: #000; display: flex;
border-radius: 0.4rem; align-items: center;
&:not(.disabled).active, justify-content: center;
&:not(.disabled):hover { --svg-icon-color: #000;
background-color: #ebebeb; border-radius: 0.4rem;
height: 3rem;
&:not(.disabled).active,
&:not(.disabled):hover {
background-color: #ebebeb;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
} }
&.disabled { > .icon {
opacity: 0.5; width: 3rem;
cursor: not-allowed; }
> .more {
width: 1.1rem;
}
> .child {
cursor: pointer;
position: absolute;
min-width: 21rem;
top: calc(100% + 2rem);
left: 0;
padding: 0.6rem 0;
border: 0.1remx solid #d9d9d9;
background-color: #fff;
border-radius: 1.2rem;
box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
> div {
height: 3.2rem;
display: flex;
align-items: center;
// justify-content: center;
gap: 0.8rem;
position: relative;
padding: 0 1.6rem;
> .dui {
position: absolute;
left: 1.5rem;
transform: translateX(-50%);
}
> .icon {
width: 2rem;
height: 2rem;
margin-left: 0.8rem;
}
> .label {
flex: 1;
font-size: 1.4rem;
color: #000;
}
> .tip {
font-size: 1.3rem;
color: rgba(13, 13, 13, 0.65);
}
&:not(.disabled).active,
&:not(.disabled):hover {
background-color: #ebebeb;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
} }
} }
> button { > button {

5
src/components/Canvas/DepthCanvas/tools/layerHelper.js
View File

@@ -29,7 +29,6 @@ export const OperationType = {
PAN: "pan", // 拖拽模式 PAN: "pan", // 拖拽模式
DRAW: "draw", // 绘画模式 DRAW: "draw", // 绘画模式
ERASER: "eraser", // 橡皮擦模式 ERASER: "eraser", // 橡皮擦模式
IMAGE: "image",// 图片工具模式
SELECTBOX: "selectbox",// 选择框工具模式 SELECTBOX: "selectbox",// 选择框工具模式
RECTANGLE: "rectangle",// 矩形工具模式 RECTANGLE: "rectangle",// 矩形工具模式
@@ -39,11 +38,7 @@ export const OperationType = {
TRIANGLE: "triangle",// 三角形工具模式 TRIANGLE: "triangle",// 三角形工具模式
STAR: "star",// 五角星工具模式 STAR: "star",// 五角星工具模式
TEXT: "text",// 文字工具模式 TEXT: "text",// 文字工具模式
UNDO: "undo",// 撤销工具模式
REDO: "redo",// 重做工具模式
}; };
// 所有操作模式类型列表 // 所有操作模式类型列表