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

Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

Browse Source
This commit is contained in:
X1627315083@163.com
2026-03-27 09:37:09 +08:00
parent 98d92cbf30 903fc2a461
commit b3aedd3fce
30 changed files with 585 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue
View File

@@ -10,7 +10,14 @@
<span class="icon"><svg-icon :name="item.name" size="16" /></span>
<span class="label">{{ item.label }}</span>
</div>
<button @click="onCreate">创建</button>
<button @click="onCreate">
<span class="icon"><svg-icon name="dc-create" size="12" /></span>
<span class="text">{{ $t('DepthCanvas.create') }}</span>
</button>
<button @click="onReset">
<span class="icon"><svg-icon name="dc-reset" size="12" /></span>
<span class="text">{{ $t('DepthCanvas.reset') }}</span>
</button>
</div>
</transition>
<brush-control-panel v-if="show" :currentTool="currentTool2" style="top: 14rem" />
@@ -21,6 +28,8 @@
import depthSlider from './tools/depth-slider.vue'
import { OperationType } from '../tools/layerHelper'
import brushControlPanel from './brush-control-panel.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
currentTool: { required: true, type: [String, null] }
@@ -37,22 +46,22 @@
{
type: OperationType.AISELECT_ADD,
name: 'dc-add_sb',
label: 'Add'
label: t('DepthCanvas.add')
},
{
type: OperationType.AISELECT_REMOVE,
name: 'dc-remove_sb',
label: 'Remove'
label: t('DepthCanvas.remove')
},
{
type: OperationType.AISELECT_DRAW,
name: 'dc-brush_sb',
label: 'Brush'
label: t('DepthCanvas.brush')
},
{
type: OperationType.AISELECT_ERASER,
name: 'dc-erase_sb',
label: 'Erase'
label: t('DepthCanvas.erase')
}
])
const onClickItem = (type: string) => {
@@ -61,6 +70,9 @@
const onCreate = () => {
stateManager.aiSelectboxToolManager.createSelectbox()
}
const onReset = () => {
stateManager.aiSelectboxToolManager.resetDemoObject()
}
</script>
<style lang="less" scoped>
// 淡入淡出动画
@@ -108,5 +120,22 @@
background: rgba(235, 235, 235, 0.9);
}
}
> button {
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
background-color: rgba(13, 13, 13, 1);
color: #fff;
font-size: 1.2rem;
border-radius: 0.4rem;
padding: 0 0.8rem;
gap: 0.8rem;
&:active {
opacity: 0.8;
}
}
}
</style>

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

@@ -30,7 +30,7 @@
</template>
<button class="export" @click="emit('export')">
<span class="icon"><svg-icon name="export" size="12" /></span>
<span class="text">Export</span>
<span class="text">{{ $t('DepthCanvas.export') }}</span>
</button>
<!-- <button class="export" @click="emit('export-local')">
<span class="text">保存本地</span>
@@ -40,7 +40,7 @@
</button> -->
<button class="workbench" @click="onWorkbench">
<span class="icon"><svg-icon name="dc-workbench" size="20" /></span>
<span class="text">Workbench</span>
<span class="text">{{ $t('DepthCanvas.save') }}</span>
</button>
</div>
</template>
@@ -49,6 +49,8 @@
import { ref, inject, computed } from 'vue'
import { exportCanvasToImage } from '../tools/exportMethod'
import { OperationType, BlendMode } from '../tools/layerHelper'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
zoom: { default: 1, type: Number },
step: { default: 0.1, type: Number }
@@ -86,37 +88,37 @@
child: [
{
name: OperationType.RECTANGLE,
label: 'Rectangle',
label: t('DepthCanvas.rectangle'),
icon: 'dc-rectangle',
iconSize: 13
},
{
name: OperationType.LINE,
label: 'Line',
label: t('DepthCanvas.line'),
icon: 'dc-line',
iconSize: 10
},
{
name: OperationType.ARROW,
label: 'Arrow',
label: t('DepthCanvas.arrow'),
icon: 'dc-arrow',
iconSize: 11
},
{
name: OperationType.ELLIPSE,
label: 'Ellipse',
label: t('DepthCanvas.ellipse'),
icon: 'dc-ellipse',
iconSize: 15
},
{
name: OperationType.TRIANGLE,
label: 'Polygon',
label: t('DepthCanvas.triangle'),
icon: 'dc-triangle',
iconSize: 14
},
{
name: OperationType.STAR,
label: 'Star',
label: t('DepthCanvas.star'),
icon: 'dc-star',
iconSize: 15
}

171
src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue
View File

@@ -1,64 +1,153 @@
<template>
<div class="basic-info">
<div class="basic-info h">
<div>
<span class="label">X:</span>
<span class="value">{{ object.left }}</span>
<div class="title">{{ $t('DepthCanvas.position') }}</div>
<div class="content">
<div>
<depth-input
before="X"
type="number"
v-model="data.left"
@input="onInpot"
@change="onChange"
/>
</div>
<div>
<depth-input
before="Y"
type="number"
v-model="data.top"
@input="onInpot"
@change="onChange"
/>
</div>
</div>
<div class="content">
<div>
<depth-input
before="W"
type="number"
v-model="data.width"
@input="onInpot"
@change="onChange"
/>
</div>
<div>
<depth-input
before="H"
type="number"
v-model="data.height"
@input="onInpot"
@change="onChange"
/>
</div>
</div>
</div>
<div>
<span class="label">Y:</span>
<span class="value">{{ object.top }}</span>
</div>
<div>
<span class="label">Width:</span>
<span class="value">{{ object.width }}</span>
</div>
<div>
<span class="label">Height:</span>
<span class="value">{{ object.height }}</span>
</div>
<div>
<span class="label">缩放X:</span>
<span class="value">{{ object.scaleX }}</span>
</div>
<div>
<span class="label">缩放Y:</span>
<span class="value">{{ object.scaleY }}</span>
</div>
<div>
<span class="label">Angle:</span>
<span class="value">{{ object.angle }}</span>
<div class="title">{{ $t('DepthCanvas.scale') }}</div>
<div class="content">
<div>
<depth-input
type="number"
before="X"
after="%"
v-model="data.scaleX"
@input="onInpot"
@change="onChange"
/>
</div>
<div>
<depth-input
type="number"
before="Y"
after="%"
v-model="data.scaleY"
@input="onInpot"
@change="onChange"
/>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, inject, computed, watch, onMounted } from 'vue'
import { ref, inject, computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue'
import DepthInput from '../tools/depth-input.vue'
const objectManager = inject('objectManager') as any
const stateManager = inject('stateManager') as any
const props = defineProps({
object: {
type: Object,
default: () => ({})
}
})
onMounted(() => {})
const id = computed(() => props.object.info.id)
const data = reactive({
top: 0,
left: 0,
width: 0,
height: 0,
scaleX: 1,
scaleY: 1
})
const updateData = async () => {
await nextTick()
data.top = Math.round(props.object.top)
data.left = Math.round(props.object.left)
data.width = Math.round(props.object.width)
data.height = Math.round(props.object.height)
data.scaleX = Math.round(props.object.scaleX * 100)
data.scaleY = Math.round(props.object.scaleY * 100)
}
updateData()
watch(() => props.object, updateData)
const onInpot = () => setPriority(false)
const onChange = () => setPriority(true)
const setPriority = (isRecord: boolean) => {
const options = {
...data,
scaleX: data.scaleX / 100,
scaleY: data.scaleY / 100
}
objectManager.updateProperty(id.value, options, isRecord)
}
stateManager.event.add('canvas:undo', updateData)
stateManager.event.add('canvas:redo', updateData)
onBeforeUnmount(() => {
stateManager.event.remove('canvas:undo', updateData)
stateManager.event.remove('canvas:redo', updateData)
})
</script>
<style lang="less" scoped>
.basic-info {
--details-item-margin-bottom: 1.6rem;
> div {
padding: 0.8rem 0;
display: flex;
align-items: center;
> .label {
font-size: 1.6rem;
color: #000;
font-weight: bold;
min-width: 7rem;
text-align: right;
margin-right: 0.8rem;
}
> .value {
font-size: 1.6rem;
color: #333;
> .content {
display: flex;
align-items: center;
justify-content: center;
> div {
flex: 1;
margin-right: 3rem;
display: flex;
flex-direction: column;
--depth-input-height: 2.4rem;
--depth-input-bg-color: rgba(249, 249, 250, 1);
--depth-input-border-color: rgba(230, 230, 231, 1);
--depth-input-decorate-color: rgba(69, 71, 84, 0.1);
&:last-child {
margin-right: 0;
}
> .label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
}
}
}
}

19
src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="fill-repeat h">
<div>
<div class="title">Image</div>
<div class="title">{{ $t('DepthCanvas.image') }}</div>
<div class="content">
<img :src="object.info.fill.source" alt="" />
</div>
</div>
<div>
<div class="title">Sttings</div>
<div class="title">{{ $t('DepthCanvas.settings') }}</div>
<div class="content">
<div>
<div class="label">Rotation</div>
<div class="label">{{ $t('DepthCanvas.rotation') }}</div>
<div class="value">
<depth-input
icon="dc-angle"
@@ -23,7 +23,7 @@
</div>
</div>
<div>
<div class="label">Scale</div>
<div class="label">{{ $t('DepthCanvas.scale') }}</div>
<div class="value">
<depth-slider
v-model="scale"
@@ -36,7 +36,7 @@
</div>
</div>
<div>
<div class="label">Opacity</div>
<div class="label">{{ $t('DepthCanvas.opacity') }}</div>
<div class="value">
<depth-slider
v-model="opacity"
@@ -49,7 +49,7 @@
</div>
</div>
<div>
<div class="label">Gap X</div>
<div class="label">{{ $t('DepthCanvas.gapX') }}</div>
<div class="value">
<depth-slider
v-model="gapX"
@@ -62,7 +62,7 @@
</div>
</div>
<div>
<div class="label">Gap Y</div>
<div class="label">{{ $t('DepthCanvas.gapY') }}</div>
<div class="value">
<depth-slider
v-model="gapY"
@@ -75,7 +75,7 @@
</div>
</div>
<div>
<div class="label">Offset</div>
<div class="label">{{ $t('DepthCanvas.offset') }}</div>
<div class="value">
<depth-offset-tool
v-model="offset"
@@ -99,7 +99,7 @@
</template>
<script setup lang="ts">
import { ref, inject, computed, nextTick, onBeforeUnmount } from 'vue'
import { ref, inject, computed, nextTick, onBeforeUnmount, watch } from 'vue'
import DepthOffsetTool from '../tools/depth-offset-tool.vue'
import DepthSlider from '../tools/depth-slider.vue'
import DepthInput from '../tools/depth-input.vue'
@@ -134,6 +134,7 @@
opacity.value = Math.round(props.object.opacity * 100)
}
updateData()
watch(() => props.object, updateData)
const inputFillTransform = () => setFillTransform(false)
const changeFillTransform = () => setFillTransform(true)

20
src/components/Canvas/DepthCanvas/components/details-panel/index.vue
View File

@@ -2,13 +2,13 @@
<div class="details-panel">
<div class="header" @click="show = !show">
<span class="icon"><svg-icon name="dc-details_edit" size="17" /></span>
<span class="title">Edit Details</span>
<span class="title">{{ $t('DepthCanvas.editDetails') }}</span>
<span class="arrow" :class="{ show }">
<svg-icon name="dc-down_arrow2" size="10" />
</span>
</div>
<div class="content" v-if="isShow" v-show="show">
<!-- <basic-info :object="activeObject" /> -->
<div class="content mini-scrollbar" v-if="isShow" v-show="show">
<basic-info :object="activeObject" />
<fill-repeat :object="activeObject" v-if="isRepeat" />
<shape-setting :object="activeObject" v-if="isShape && !isRepeat" />
</div>
@@ -17,6 +17,7 @@
<script setup lang="ts">
import { ref, inject, computed, watch, onMounted } from 'vue'
import BasicInfo from './basic-info.vue'
import FillRepeat from './fill-repeat.vue'
import ShapeSetting from './shape-setting.vue'
const props = defineProps({})
@@ -27,10 +28,11 @@
const layers = computed(() => layerManager.layers.value)
const activeObject = ref(null)
const shapes = ['rect', 'line', 'path', 'triangle', 'polygon', 'ellipse']
const shapes = ['rect', 'path', 'triangle', 'polygon', 'ellipse']
const isImage = computed(() => activeObject.value?.type === 'image')
const isShape = computed(() => shapes.includes(activeObject.value?.type))
const isRepeat = computed(() => activeObject.value?.fill?.repeat === 'repeat')
const isShow = computed(() => isRepeat.value || isShape.value)
const isShow = computed(() => isImage.value || isRepeat.value || isShape.value)
const updateActiveObject = () => {
const layer = layerManager.getActiveLayer()
@@ -49,7 +51,7 @@
top: 2.2rem;
right: 3rem;
width: 28.8rem;
max-height: 80%;
max-height: 90%;
display: flex;
flex-direction: column;
gap: 1.6rem;
@@ -87,6 +89,12 @@
padding: 1.6rem;
overflow: hidden;
overflow-y: auto;
> * {
margin-bottom: 1.6rem;
&:last-child {
margin-bottom: 0;
}
}
&:deep(> div) {
> div {
margin-bottom: var(--details-item-margin-bottom, 1.6rem);

131
src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue
View File

@@ -1,79 +1,10 @@
<template>
<div class="shape-setting h">
<div>
<div class="title">Position</div>
<div class="title">{{ $t('DepthCanvas.appearance') }}</div>
<div class="content">
<div>
<depth-input
before="X"
type="number"
v-model="data.left"
@input="onInpot"
@change="onChange"
/>
</div>
<div>
<depth-input
before="Y"
type="number"
v-model="data.top"
@input="onInpot"
@change="onChange"
/>
</div>
</div>
<div class="content">
<div>
<depth-input
before="W"
type="number"
v-model="data.width"
@input="onInpot"
@change="onChange"
/>
</div>
<div>
<depth-input
before="H"
type="number"
v-model="data.height"
@input="onInpot"
@change="onChange"
/>
</div>
</div>
</div>
<div>
<div class="title">Scale</div>
<div class="content">
<div>
<depth-input
type="number"
before="X"
after="%"
v-model="data.scaleX"
@input="onInpot"
@change="onChange"
/>
</div>
<div>
<depth-input
type="number"
before="Y"
after="%"
v-model="data.scaleY"
@input="onInpot"
@change="onChange"
/>
</div>
</div>
</div>
<div>
<div class="title">Appearance</div>
<div class="content">
<div>
<span class="label">Opacity</span>
<span class="label">{{ $t('DepthCanvas.opacity') }}</span>
<depth-input
type="number"
after="%"
@@ -86,7 +17,7 @@
/>
</div>
<div v-if="object.type === 'rect'">
<span class="label">Corner Radius</span>
<span class="label">{{ $t('DepthCanvas.cornerRadius') }}</span>
<depth-input
type="number"
v-model="data.radius"
@@ -96,12 +27,32 @@
@change="onChange"
/>
</div>
<div v-else-if="object.type === 'path'">
<span class="label">{{ $t('DepthCanvas.strokeWidth') }}</span>
<depth-input
type="number"
v-model="data.strokeWidth"
min="0"
step="1"
@input="onInpot"
@change="onChange"
/>
</div>
<div v-else></div>
</div>
<div class="content">
<div>
<span class="label">Color</span>
<span class="label">{{ $t('DepthCanvas.color') }}</span>
<depth-input
v-if="object.type === 'path'"
type="color"
v-model="data.stroke"
after="%"
@input="onInpot"
@change="onChange"
/>
<depth-input
v-else
type="color"
v-model="data.fill"
after="%"
@@ -116,10 +67,6 @@
<script setup lang="ts">
import { ref, inject, computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue'
import { ElColorPicker } from 'element-plus'
import { getTransformScaleAngle } from '../../manager/ObjectManager'
import DepthOffsetTool from '../tools/depth-offset-tool.vue'
import DepthSlider from '../tools/depth-slider.vue'
import DepthInput from '../tools/depth-input.vue'
const objectManager = inject('objectManager') as any
const stateManager = inject('stateManager') as any
@@ -132,32 +79,20 @@
const id = computed(() => props.object.info.id)
const data = reactive({
top: 0,
left: 0,
width: 0,
height: 0,
scaleX: 1,
scaleY: 1,
opacity: 100,
radius: 0,
fill: ''
// stroke: '',
// strokeWidth: 0
fill: '',
stroke: '',
strokeWidth: 0
})
const updateData = async () => {
await nextTick()
data.top = Math.round(props.object.top)
data.left = Math.round(props.object.left)
data.width = Math.round(props.object.width)
data.height = Math.round(props.object.height)
data.scaleX = Math.round(props.object.scaleX * 100)
data.scaleY = Math.round(props.object.scaleY * 100)
data.opacity = Math.round(props.object.opacity * 100)
data.radius = Math.round(props.object.rx)
data.fill = props.object.fill
// data.stroke = props.object.stroke
// data.strokeWidth = props.object.strokeWidth
data.stroke = props.object.stroke
data.strokeWidth = props.object.strokeWidth
}
updateData()
watch(() => props.object, updateData)
@@ -167,14 +102,16 @@
const setPriority = (isRecord: boolean) => {
const options = {
...data,
opacity: data.opacity / 100,
scaleX: data.scaleX / 100,
scaleY: data.scaleY / 100
opacity: data.opacity / 100
}
if (props.object.type === 'rect') {
options['rx'] = data.radius
options['ry'] = data.radius
}
if (props.object.type !== 'path') {
delete options.stroke
delete options.strokeWidth
}
delete options.radius
objectManager.updateProperty(id.value, options, isRecord)
}

2
src/components/Canvas/DepthCanvas/components/layer-panel/index.vue
View File

@@ -20,7 +20,7 @@
width: 0;
top: 2.2rem;
left: 3rem;
max-height: 80%;
max-height: 90%;
display: flex;
flex-direction: column;
gap: 1.6rem;

11
src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
View File

@@ -3,13 +3,13 @@
<div class="header">
<div class="left">
<span class="icon"><svg-icon name="dc-layer" size="16" /></span>
<span class="title">Layer</span>
<span class="title">{{ $t('DepthCanvas.layer') }}</span>
</div>
<div class="right">
<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>
</div>
</div>
<div class="content">
<div class="content mini-scrollbar">
<VueDraggable
:model-value="list"
@start="(e) => handleDragStart(e)"
@@ -173,13 +173,6 @@
flex: 1;
overflow-y: auto;
min-height: 20rem;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
}
}
}
.sortable-layers-child {

63
src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
View File

@@ -2,10 +2,12 @@
<div class="depth-input" :class="{ color: isColor }">
<span class="decorate"></span>
<span v-show="icon" class="icon">
<svg-icon :name="icon" :size="iconSize" size-unit="px" />
<svg-icon :name="icon" :size="iconSize" />
</span>
<span v-show="before" class="before">{{ before }}</span>
<input
v-if="!isColor"
v-bind="attrs"
:value="modelValue"
@input="onInput"
@@ -13,15 +15,17 @@
@copy.stop
@keydown.stop
/>
<input
v-if="isColor"
readonly
type="text"
:value="colorObj.color"
@copy.stop
@keydown.stop
/>
<template v-if="isColor">
<template v-else>
<input
v-bind="attrs"
type="color"
:value="colorObj.color"
@input="onInput"
@change="onChange"
@copy.stop
@keydown.stop
/>
<input readonly :value="colorObj.color" @copy.stop @keydown.stop />
<span class="decorate marginl"></span>
<input
class="alpha"
@@ -35,6 +39,7 @@
@keydown.stop
/>
</template>
<span v-show="after" class="after">{{ after }}</span>
</div>
</template>
@@ -220,45 +225,45 @@
display: flex;
align-items: center;
width: 100%;
border: 1px solid var(--depth-input-border-color, rgba(230, 230, 231, 1));
border-radius: 2px;
height: var(--depth-input-height, 20px);
border: 0.1rem solid var(--depth-input-border-color, rgba(230, 230, 231, 1));
border-radius: 0.2rem;
height: var(--depth-input-height, 2rem);
background-color: var(--depth-input-bg-color, #fff);
padding: 0 4px 0 2px;
padding: 0 0.4rem 0 0.2rem;
&.color {
--depth-input-decorate-margin-right: 10px;
--depth-input-input-margin-right: 10px;
--depth-input-decorate-margin-right: 1rem;
--depth-input-input-margin-right: 1rem;
--depth-input-input-font-align: left;
--depth-input-after-color: rgba(181, 181, 181, 1);
}
> .decorate {
width: 2px;
width: 0.2rem;
background-color: var(--depth-input-decorate-color, rgba(230, 230, 231, 1));
border-radius: 2px;
border-radius: 0.2rem;
height: 75%;
margin-right: var(--depth-input-decorate-margin-right, 4px);
margin-right: var(--depth-input-decorate-margin-right, 0.4rem);
}
> .iconfont {
font-size: 12px;
font-size: 1.2rem;
color: #000;
margin-right: 4px;
margin-right: 0.4rem;
}
> .before {
font-size: 12px;
font-size: 1.2rem;
color: #000;
margin-right: 4px;
margin-right: 0.4rem;
}
> .after {
font-size: 12px;
font-size: 1.2rem;
color: var(--depth-input-after-color, #000);
margin-left: 2px;
margin-left: 0.2rem;
}
> input {
font-size: 12px;
font-size: 1.2rem;
width: 0;
height: 100%;
flex: 1;
margin-right: var(--depth-input-input-margin-right, 0);
margin-right: var(--depth-input-input-margin-right, 0rem);
text-align: var(--depth-input-input-font-align, right);
outline: none;
border: none;
@@ -277,9 +282,9 @@
}
&[type='color'] {
flex: 0.5;
border-radius: 2px;
border-radius: 0.2rem;
height: 70%;
border: 1px solid rgb(42, 42, 42);
border: 0.1rem solid rgb(42, 42, 42);
display: block;
&::-webkit-color-swatch-wrapper {
padding: 0;

40
src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
View File

@@ -152,52 +152,52 @@
justify-content: center;
> * {
flex: 1;
margin-right: 10px;
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
}
}
> .dish {
width: 115px;
height: 115px;
border: 1px solid #eaeaea;
border-radius: 3.4px;
width: 11.5rem;
height: 11.5rem;
border: 0.1rem solid #eaeaea;
border-radius: 0.4rem;
cursor: pointer;
position: relative;
background-color: #f6f6f6;
margin-top: 20px;
margin-top: 2rem;
> * {
position: absolute;
pointer-events: none;
user-select: none;
}
> img {
width: 12px;
height: 12px;
bottom: 3.5px;
right: 3.5px;
width: 1.2rem;
height: 1.2rem;
bottom: 0.35rem;
right: 0.35rem;
}
> .ball {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8.5px;
height: 8.5px;
border: 1px solid #fff;
width: 0.85rem;
height: 0.85rem;
border: 0.1rem solid #fff;
background-color: #333;
border-radius: 50%;
box-shadow: 0px 0.68px 0.17px 0px rgba(0, 0, 0, 0.26);
box-shadow: 9 0.07rem 0.02rem 0 rgba(0, 0, 0, 0.26);
}
> .tip {
font-size: 8.5px;
font-size: 0.85rem;
color: #000;
line-height: 24px;
line-height: 2.4rem;
&.x {
top: 50%;
right: 0%;
transform: translate(100%, -50%);
padding-left: 6px;
padding-left: 0.6rem;
}
&.y {
top: 0%;
@@ -216,15 +216,15 @@
transform: translate(-50%, -50%);
&.x {
width: 100%;
border-top-width: 1px;
border-top-width: 0.1rem;
}
&.y {
height: 100%;
border-left-width: 1px;
border-left-width: 0.1rem;
}
&.z {
width: 50%;
border-top-width: 1px;
border-top-width: 0.1rem;
border-color: #454754;
transform: translate(0%, -50%) rotateZ(var(--rotateZ));
transform-origin: left center;

18
src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
View File

@@ -22,12 +22,12 @@
<style scoped lang="less">
.depth-select {
&:deep(.el-select) {
--el-select-input-font-size: 12px;
--el-select-input-font-size: 1.2rem;
.el-select__wrapper {
font-size: 12px;
font-size: 1.2rem;
min-height: 0;
height: 28px;
padding: 0 8px;
height: 2.8rem;
padding: 0 0.8rem;
}
.el-select__selected-item,
.el-select__input-wrapper,
@@ -35,17 +35,17 @@
line-height: normal;
}
.el-select__input {
height: 24px;
height: 2.4rem;
}
}
}
.el-popper {
.el-select-dropdown {
li {
padding-left: 8px;
height: 30px;
line-height: 30px;
font-size: 12px;
padding-left: 0.8rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
}
}
}

10
src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
View File

@@ -86,7 +86,7 @@
position: relative;
display: flex;
align-items: center;
--input-thumb-size: 1.4rem;
--input-thumb-size: 1.2rem;
--backcolor1: var(--depth-slider-thumb-color1, #000);
--backcolor2: var(--depth-slider-thumb-color2, #d3d3d3);
&:hover {
@@ -121,7 +121,7 @@
background: var(--backcolor1); /* 蓝色滑块 */
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
&::-webkit-slider-thumb:hover {
transform: scale(1.1);
@@ -153,9 +153,9 @@
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(0, 0, 0, 0.8);
border-left: 0.5rem solid transparent;
border-right: 0.5rem solid transparent;
border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
}
}
}

5
src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
View File

@@ -37,6 +37,7 @@ export class AISelectboxToolManager {
if (!oldIsAAA && newIsAAA) {
// 普通工具切换到智能框选工具
this.init()
this.canvasManager.discardActiveObject()
} else if (oldIsAAA && !newIsAAA) {
// 智能框选工具切换到普通工具
this.clear()
@@ -101,6 +102,10 @@ export class AISelectboxToolManager {
this.canvasManager.canvas.remove(this.indicatorObject)
this.indicatorObject = null
}
resetDemoObject() {
this.clearDemoObject()
this.createDemoObject()
}
// 创建临时画布对象
async createStaticCanvas(object: fabric.Object) {
if (!this.demoObject) this.createDemoObject()

67
src/components/Canvas/DepthCanvas/manager/LayerManager.ts
View File

@@ -3,7 +3,9 @@ import { fabric } from 'fabric-with-all'
import { createId } from '../../tools/tools'
import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
import { OperationType, BlendMode } from '../tools/layerHelper'
import { getArrowPath, cloneObjects, getStarArr } from '../tools/canvasMethod'
import { getArrowPath, getLinePath, cloneObjects, getStarArr } from '../tools/canvasMethod'
import i18n from '@/lang/index'
const t = i18n.global.t
export class LayerManager {
stateManager: any
@@ -134,10 +136,11 @@ export class LayerManager {
copyLayerById(id) {
const object = this.canvasManager.getObjectById(id)
if (!object) return console.warn('复制图层失败，对象不存在ID:', id)
this.canvasManager.discardActiveObject()
cloneObjects([object]).then(objects => {
const newObject = objects[0]
const info = JSON.parse(JSON.stringify(newObject.info))
info.id = createId("image")
info.id = createId("copylayer")
// info.name = info.name
newObject.set({
top: newObject.top + 15,
@@ -206,7 +209,7 @@ export class LayerManager {
fill: 'transparent',
info: {
id: createId("image"),
name: '空图层',
name: t('DepthCanvas.emptyLayer'),
}
})
this.setLayerPosition(emptyObject)
@@ -226,7 +229,7 @@ export class LayerManager {
evented: false,
info: {
id: createId("group"),
name: '智能选区组',
name: t('DepthCanvas.aiGroupLayer'),
showChildren: true,
...(options?.info || {}),
}
@@ -245,7 +248,7 @@ export class LayerManager {
...(options || {}),
info: {
id: createId("text"),
name: '文本图层',
name: t('DepthCanvas.textLayer'),
...(options?.info || {}),
}
})
@@ -263,7 +266,7 @@ export class LayerManager {
...(options || {}),
info: {
id: createId("rect"),
name: '矩形图层',
name: t('DepthCanvas.rectLayer'),
...(options?.info || {}),
}
})
@@ -274,25 +277,27 @@ export class LayerManager {
}
/** 创建直线图层 */
async createLineLayer(options?: any, isRecord = true, isActive = true) {
const line = [options?.x1 || 0, options?.y1 || 0, options?.x2 || 100, options?.y2 || 0]
delete options.x1
delete options.y1
delete options.x2
delete options.y2
const lineObject = new fabric.Line(line, {
stroke: 'black', // 线条颜色
strokeWidth: 2, // 线条粗细
const width = options?.width || 100
const height = options?.height || 2
delete options.width
delete options.height
const arrowObject = new fabric.Path(getLinePath(width, height), {
stroke: '#000', // 只设置边框颜色
strokeWidth: 2, // 边框宽度
fill: 'transparent', // 不填充
strokeLineCap: 'round',
strokeLineJoin: 'round',
...(options || {}),
info: {
id: createId("line"),
name: '直线图层',
name: t('DepthCanvas.lineLayer'),
...(options?.info || {}),
}
})
this.setLayerPosition(lineObject, options)
await this.canvasManager.add(lineObject, isRecord)
if (isActive) this.setActiveID(lineObject.info.id)
return lineObject
});
this.setLayerPosition(arrowObject, options)
await this.canvasManager.add(arrowObject, isRecord)
if (isActive) this.setActiveID(arrowObject.info.id)
return arrowObject
}
/** 创建椭圆图层 */
async createEllipseLayer(options?: any, isRecord = true, isActive = true) {
@@ -302,7 +307,7 @@ export class LayerManager {
...(options || {}),
info: {
id: createId("ellipse"),
name: '椭圆图层',
name: t('DepthCanvas.ellipseLayer'),
...(options?.info || {}),
}
})
@@ -321,7 +326,7 @@ export class LayerManager {
...(options || {}),
info: {
id: createId("triangle"),
name: '三角形图层',
name: t('DepthCanvas.triangleLayer'),
...(options?.info || {}),
}
})
@@ -341,7 +346,7 @@ export class LayerManager {
...(options || {}),
info: {
id: createId("star"),
name: '五角星图层',
name: t('DepthCanvas.starLayer'),
...(options?.info || {}),
}
})
@@ -353,19 +358,19 @@ export class LayerManager {
/** 创建箭头图层 */
async createArrowLayer(options?: any, isRecord = true, isActive = true) {
const width = options?.width || 100
const height = options?.height || 10
const strokeWidth = options?.strokeWidth || 4
delete options.width
delete options.height
const arrowObject = new fabric.Path(getArrowPath(width, height), {
delete options.strokeWidth
const arrowObject = new fabric.Path(getArrowPath(width, strokeWidth), {
stroke: '#000', // 只设置边框颜色
strokeWidth: 3, // 边框宽度
strokeWidth, // 边框宽度
fill: 'transparent', // 不填充
strokeLineCap: 'round',
strokeLineJoin: 'round',
...(options || {}),
info: {
id: createId("star"),
name: '箭头图层',
id: createId("arrow"),
name: t('DepthCanvas.arrowLayer'),
...(options?.info || {}),
}
});
@@ -395,7 +400,7 @@ export class LayerManager {
...(options || {}),
info: {
id: createId("image"),
name: "图片图层",
name: t('DepthCanvas.imageLayer'),
...(options?.info || {}),
}
})
@@ -419,7 +424,7 @@ export class LayerManager {
info: {
...(targetLayer?.info || {}),
id: createId("image"),
name: targetLayer?.info?.name || "合并图层",
name: targetLayer?.info?.name || t('DepthCanvas.mergeLayer'),
}
})
resolve(img)

57
src/components/Canvas/DepthCanvas/manager/ShapeToolManager.ts
View File

@@ -1,5 +1,5 @@
import { OperationType, OperationTypes } from "../tools/layerHelper";
import { getStarArr, getArrowPath, distance, angleBetweenPointsDegrees } from "../tools/canvasMethod";
import { getStarArr, getArrowPath, getLinePath, distance, angleBetweenPointsDegrees } from "../tools/canvasMethod";
import { fabric } from 'fabric-with-all'
/** 形状管理器 */
export class ShapeToolManager {
@@ -136,22 +136,47 @@ export class ShapeToolManager {
/** 绘制直线 */
downLine() {
const line = new fabric.Line([this.startX, this.startY, this.startX, this.startY], {
stroke: 'black', // 线条颜色
strokeWidth: 2 // 线条粗细
})
return line
// const line = new fabric.Line([this.startX, this.startY, this.startX, this.startY], {
// stroke: 'black', // 线条颜色
// strokeWidth: 2 // 线条粗细
// })
// return line
return new fabric.Path();
}
moveLine({ x, y }) {
this.demoObject.set({
x1: this.startX,
y1: this.startY,
x2: x,
y2: y,
})
// this.demoObject.set({
// x1: this.startX,
// y1: this.startY,
// x2: x,
// y2: y,
// })
const width = distance(this.startX, this.startY, x, y)
const angle = angleBetweenPointsDegrees(this.startX, this.startY, x, y)
this.canvasManager.canvas.remove(this.demoObject)
const arrow = new fabric.Path(getLinePath(width, 2), {
left: this.startX,
top: this.startY,
stroke: '#000', // 只设置边框颜色
strokeWidth: 2, // 边框宽度
fill: 'transparent', // 不填充
strokeLineCap: 'round',
strokeLineJoin: 'round',
originY: 'center',
angle: angle,
});
this.canvasManager.canvas.add(arrow)
this.demoObject = arrow
}
upLine(object) {
this.layerManager.createLineLayer(object)
if (object.originY !== "center") {
this.layerManager.createLineLayer({
left: this.startX,
top: this.startY,
})
} else {
this.layerManager.createLineLayer(object)
}
// this.layerManager.createLineLayer(object)
}
/** 绘制椭圆 */
@@ -228,11 +253,11 @@ export class ShapeToolManager {
const width = distance(this.startX, this.startY, x, y)
const angle = angleBetweenPointsDegrees(this.startX, this.startY, x, y)
this.canvasManager.canvas.remove(this.demoObject)
const arrow = new fabric.Path(getArrowPath(width, 10), {
const arrow = new fabric.Path(getArrowPath(width, 4), {
left: this.startX,
top: this.startY,
stroke: '#000', // 只设置边框颜色
strokeWidth: 3, // 边框宽度
strokeWidth: 4, // 边框宽度
fill: 'transparent', // 不填充
strokeLineCap: 'round',
strokeLineJoin: 'round',
@@ -247,7 +272,7 @@ export class ShapeToolManager {
this.layerManager.createArrowLayer({
left: this.startX,
top: this.startY,
}, true)
})
} else {
this.layerManager.createArrowLayer(object)
}

1
src/components/Canvas/DepthCanvas/manager/StateManager.ts
View File

@@ -73,7 +73,6 @@ export class StateManager {
/** 记录状态 */
recordState() {
if (this.running.value) return
console.log("recordState")
this.running.value = true
if (this.historyIndex.value < this.historyList.value.length - 1) {
this.historyList.value.splice(this.historyIndex.value + 1)

19
src/components/Canvas/DepthCanvas/tools/canvasMethod.js
View File

@@ -61,13 +61,26 @@ export function getStarArr(width = 0, height = 0) {
}))
}
/** 获取箭头路径 */
export function getArrowPath(width = 0, height = 0) {
export function getArrowPath(width = 0, strokeWidth = 4) {
const height = strokeWidth * 4
const arr = [
["M", 0, height / 2],
["L", width, height / 2],
["M", width - 8, 0],
["M", width - height, 0],
["L", width, height / 2],
["L", width - height, height],
]
var path = ""
arr.forEach(item => {
path += item.join(" ") + " "
})
return path
}
/** 获取直线路径 */
export function getLinePath(width = 0, height = 0) {
const arr = [
["M", 0, height / 2],
["L", width, height / 2],
["L", width - 8, height],
]
var path = ""
arr.forEach(item => {