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-06 10:21:05 +08:00
parent 68d3a90940
commit a3938662c9
7 changed files with 170 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/Canvas/CanvasTest.vue
View File

@@ -1,103 +1,31 @@
<template>
<div class="canvas-test">
<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
<div
class="canvas-content"
:style="{
top: `${data.y}px`,
left: `${data.x}px`,
transform: `scale(${data.scale})`
}"
>
<result-image />
<card type="cards-select" />
<card type="to-real-style" />
<card type="surface-edit" />
<card type="scene-composition" />
<card type="color-palette" />
<card type="to-3d-model" />
<card type="to-3view" />
</div>
</div> -->
<flow-canvas />
<Assistant />
<button @click="dialogVisible = true">打开画布</button>
<fullscreen-dialog v-model="dialogVisible" hide-destroy>
<flow-canvas :config="config" />
<Assistant />
</fullscreen-dialog>
</div>
</template>
<script setup lang="ts">
import fullscreenDialog from './components/fullscreen-dialog.vue'
import flowCanvas from './FlowCanvas/flow-canvas.vue'
import card from './FlowCanvas/components/nodes/cards/index.vue'
import Assistant from '../Assistant/assistant.vue'
import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
const data = reactive({
x: 100,
y: 200,
scale: 1
const dialogVisible = ref(true)
const config = ref({
url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
})
const onMouseDown = (e: MouseEvent) => {
// if (e.button !== 1) return
const ox = data.x
const oy = data.y
const X = e.clientX
const Y = e.clientY
const onMouseMove = (e: MouseEvent) => {
const dx = e.clientX - X
const dy = e.clientY - Y
data.x = ox + dx
data.y = oy + dy
}
const onMouseUp = (e: MouseEvent) => {
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUp)
}
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
}
const onMouseWheel = (e: WheelEvent) => {
var delta = e.deltaY
var scale = data.scale - delta / 1000
if (scale < 0.2) scale = 0.2
if (scale > 10) scale = 10
data.scale = scale
}
</script>
<style lang="less" scoped>
.canvas-test {
// overflow-y: auto;
// display: flex;
// flex-wrap: wrap;
// align-content: flex-start;
// align-items: flex-start;
// padding: 2rem;
// gap: 2rem;
width: 100%;
height: 100%;
background-color: #fcf8f1;
position: relative;
overflow: hidden;
> .canvas-main {
width: 100%;
height: 100%;
position: relative;
> .canvas-content {
position: absolute;
width: auto;
height: auto;
display: flex;
align-items: flex-start;
gap: 5rem;
transform-origin: top left;
}
}
> .vue-flow {
width: 100%;
height: 100%;
}
display: flex;
align-items: center;
justify-content: center;
}
</style>