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

更新绘画功能

Browse Source
This commit is contained in:
X1627315083
2024-11-22 09:20:25 +08:00
parent fe3b89d615
commit 5d9dc7b77d
19 changed files with 3643 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/component/Canvas/tool.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<div class="canvasTool">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<div class="label_item uploadImage">
<i class="icon fi fi-br-upload" ></i>
<input type="file" @change="uploadImage">
</div>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
<div class="btnModal" v-show="isMove" :style="moveStyle">
<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
import {base64ToFile} from '@/tool/util'
import { Https } from "@/tool/https";
export default defineComponent({
component:{},
emits:['toolLiquefaction'],
setup(props,{emit}){
let canvasGeneral:any = inject('canvasObj')
let isShowMark:any = inject('isShowMark')
const data:any = reactive({
isMove:false,
moveStyle:{},
})
const uploadImage = (event:any)=>{
isShowMark.value = true
const file = event.target.files[0];
let input = event.target
setOperation('movePosition')
if (file) {
const reader = new FileReader();
reader.onload = (e:any) => {
let file = base64ToFile(e.target.result,'upload')
let formData = new FormData();
formData.append("file", file);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
rv.imgUrl = rv.minioUrl
isShowMark.value = false
canvasGeneral.addImage(rv)
})
input.value = ''
};
reader.readAsDataURL(file);
}
}
const historyState = (str:any)=>{
canvasGeneral.historyState(str)
}
const setOperation = (str:any)=>{
canvasGeneral.setOperation(str)
}
const openMore = (e:any)=>{
data.isMove=!data.isMove
if(data.isMove){
let domPoint = e.target.getBoundingClientRect()
let domParentPoint = e.target.parentElement.getBoundingClientRect()
const left = domPoint.left - domParentPoint.left;
const top = domPoint.top - domParentPoint.top;
data.moveStyle.top = top + 'px'
data.moveStyle.left = left + domPoint.width + 2 + 'px'
}
}
const setMore = ()=>{
data.isMove = false
}
let setLiquefaction = ()=>{
emit('toolLiquefaction')
}
document.addEventListener('click',setMore)
const closeModal = ()=>{
document.removeEventListener('click',setMore)
}
return {
canvasGeneral,
...toRefs(data),
uploadImage,
historyState,
setOperation,
openMore,
closeModal,
setLiquefaction,
}
}
});
</script>
<style lang='less' scoped>
.canvasTool::-webkit-scrollbar{
display: none;
}
.canvasTool{
display: flex;
flex-direction: column;
position: relative;
align-items: center;
&.leftAlign{
justify-content: flex-start;
}
&.leftAlign{
justify-content: flex-start;
}
.uploadImage{
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
i{
zoom:.8;
}
input{
height: 0;
width: 0;
border: none;
}
}
.uploadImage{
position: relative;
input{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
}
.btnModal{
position: absolute;
z-index: 2;
background: #fff;
top: 0;
border: 1px solid;
display: flex;
padding: .5rem 1rem;
border-radius: 4px;
}
}
</style>