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>

2
src/components/Canvas/FlowCanvas/components/header-tools.vue
View File

@@ -102,7 +102,7 @@
border-radius: 0.4rem;
&:not(.disabled).active,
&:not(.disabled):hover {
background-color: #dfdfdf;
background-color: #ebebeb;
}
&.disabled {
opacity: 0.5;

80
src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
View File

@@ -1,22 +1,26 @@
<template>
<!-- 结果图片 -->
<div class="result-image">
<div class="header" v-show="showHeader">
<div class="header" v-show="showHeader" @mousedown.stop>
<span class="icon">
<svg-icon name="chat-compose" size="24" size-unit="px" />
<svg-icon name="chat-compose" size="20" size-unit="px" />
</span>
<span class="icon">
<svg-icon name="expand-lg" size="24" size-unit="px" />
<span class="icon" @click="onPreview">
<svg-icon name="expand-lg" size="20" size-unit="px" />
</span>
<span class="icon">
<svg-icon name="download" size="24" size-unit="px" />
<span class="icon" @click="onDownload">
<svg-icon name="download" size="20" size-unit="px" />
</span>
<button class="edit">
<span class="icon"><svg-icon name="edit" size="11" /></span>
<span class="text">Edit</span>
</button>
</div>
<img class="image" :src="data.url" :style="{transform: `scale(${data?.scale?.x || 1}, ${data?.scale?.y || 1})`}" />
<img
class="image"
:src="data.url"
:style="{ transform: `scale(${data?.scale?.x || 1}, ${data?.scale?.y || 1})` }"
/>
<div class="more" @click="showMenu = !showMenu" @mousedown.stop>
<svg-icon name="more" size="24" size-unit="px" color="#C9C9C9" />
</div>
@@ -37,7 +41,9 @@
</template>
<script setup lang="ts">
import { downloadImage } from '../../../tools/tools'
import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch } from 'vue'
const openImagePreview = inject('openImagePreview') as (url: string) => void
const props = defineProps({
config: {
type: Object,
@@ -48,13 +54,19 @@
default: () => ({})
}
})
const emit = defineEmits(['delete-node', 'copy-node', 'bring-to-font', 'send-to-back', 'update-data'])
const emit = defineEmits([
'delete-node',
'copy-node',
'bring-to-font',
'send-to-back',
'update-data'
])
const attrs = useAttrs()
const showHeader = ref(!!attrs.node?.data?.isHeader)
const showMenu = ref(false)
const data = reactive({
url: props.data?.url || '',
scale: props.data?.scale || { x:1,y:1 }
scale: props.data?.scale || { x: 1, y: 1 }
})
watch(
() => props.data.url,
@@ -71,12 +83,44 @@
disabled: !!props.config?.disableDelete
},
{ isDivide: true },
{ label: 'Bring to font', tip: '', on: () => {emit('bring-to-font')} },
{ label: 'Send to back', tip: '', on: () => {emit('send-to-back')} },
{
label: 'Bring to font',
tip: '',
on: () => {
emit('bring-to-font')
}
},
{
label: 'Send to back',
tip: '',
on: () => {
emit('send-to-back')
}
},
{ isDivide: true },
{ label: 'Flip horizontal', tip: '', on: () => {data.scale.x = -data.scale.x; emit('update-data',data)} },
{ label: 'Flip vertical', tip: '', on: () => {data.scale.y = -data.scale.y; emit('update-data',data)} }
{
label: 'Flip horizontal',
tip: '',
on: () => {
data.scale.x = -data.scale.x
emit('update-data', data)
}
},
{
label: 'Flip vertical',
tip: '',
on: () => {
data.scale.y = -data.scale.y
emit('update-data', data)
}
}
])
const onPreview = () => {
openImagePreview(data.url)
}
const onDownload = () => {
downloadImage(data.url, 'image.png')
}
const onMenuItem = (v) => {
if (v.disabled) return
v.on && v.on()
@@ -101,7 +145,7 @@
padding: 25px 6px;
user-select: none;
background-color: #fff;
&.active{
&.active {
box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px #d9d9d9;
}
> .header {
@@ -126,12 +170,12 @@
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
width: 32px;
height: 32px;
--svg-icon-color: #000;
border-radius: 4px;
border-radius: 3px;
&:hover {
background-color: #dfdfdf;
background-color: #ebebeb;
}
}
> .edit {

9
src/components/Canvas/FlowCanvas/flow-canvas.vue
View File

@@ -52,6 +52,7 @@
@sub="(e) => flowManager.setZoom(e)"
@home="() => fitView({ maxZoom: 1 })"
/>
<image-preview ref="imagePreviewRef" />
</template>
<script setup lang="ts">
@@ -62,6 +63,7 @@
// 组件
import headerTools from './components/header-tools.vue'
import zoom from '../components/zoom.vue'
import imagePreview from '../components/image-preview.vue'
// 节点
import node from './components/node.vue'
import resultImage from './components/nodes/result-image.vue'
@@ -181,6 +183,13 @@
}
}
const imagePreviewRef = ref<any>()
/** 打开图片预览 */
const openImagePreview = (url: string) => {
imagePreviewRef.value.open(url)
}
provide('openImagePreview', openImagePreview)
onMounted(() => {
// window['vueFlow'] = vueFlow
// window['nodes'] = nodes

69
src/components/Canvas/components/image-preview.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<el-dialog
class="image-preview"
v-model="showDialog"
align-center
:show-close="false"
width="70vw"
style="border-radius: 20px; padding: 0; --el-dialog-padding-primary: 0"
>
<template #header="{ close }">
<div class="header-close" @click="close">
<svg-icon name="close" size="23" size-unit="px" />
</div>
</template>
<div class="preview-box">
<div class="image-box">
<img :src="url" />
</div>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { computed, ref, onBeforeUnmount, shallowRef } from 'vue'
const showDialog = ref(false)
const url = ref('')
const open = (url_: any) => {
showDialog.value = true
url.value = url_
}
const close = () => {
showDialog.value = false
}
defineExpose({
open,
close
})
</script>
<style lang="less" scoped>
.header-close {
position: absolute;
top: 30px;
right: 40px;
width: 40px;
height: 40px;
cursor: pointer;
}
.preview-box {
width: 100%;
height: 70vh;
padding: 67px;
> .image-box {
margin: auto;
max-width: 90%;
height: 100%;
padding: 50px;
border-radius: 10px;
border: 1px solid #d9d9d9;
> img {
max-width: 100%;
width: auto;
height: 100%;
object-fit: contain;
}
}
}
</style>

13
src/components/Canvas/tools/tools.ts
View File

@@ -2,4 +2,17 @@ export const createId = (before: string = 'node') => {
const time = Date.now().toString(36)
const random = Math.random().toString(36).substring(2, 20)
return `${before}_${time}${random}`
}
/** 下载图片 */
export const downloadImage = (url: string, name: string) => {
fetch(url)
.then((res) => res.blob())
.then((blob) => {
const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.target = '_blank'
a.download = name || 'image.png'
a.click()
})
}