122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
|
<div class="canvasContent_box">
|
|
<div class="canvasContent" ref="canvasScaleDom">
|
|
<div class="generalCanvas_center canvas" ref="canvasDom">
|
|
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, watch} from 'vue'
|
|
import { Modal,message } from 'ant-design-vue';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useStore } from "vuex";
|
|
export default defineComponent({
|
|
component:{},
|
|
setup(props,{emit}){
|
|
const store = useStore();
|
|
let {t} = useI18n()
|
|
let canvasType = inject('canvasType')
|
|
let canvasGeneral:any = inject('canvasObj')
|
|
const data:any = reactive({
|
|
canvasDom:null,
|
|
isShowMark:false,
|
|
pencilbtnStyle:{},
|
|
isCanva:false,
|
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
})
|
|
const dataDom = reactive({
|
|
canvasScaleDom:null as any,
|
|
})
|
|
watch(()=>data.selectObject.model.id,(newVal:any)=>{
|
|
if(newVal){
|
|
canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
|
|
}
|
|
})
|
|
const createCanvas = ()=>{
|
|
if(data.isCanva)return
|
|
nextTick(async ()=>{
|
|
let width = dataDom.canvasScaleDom.offsetWidth
|
|
let canvasSize = {width,height:width}
|
|
data.isCanva = true
|
|
let img = data.selectObject.model.url
|
|
await canvasGeneral.canvasInit(data.canvasDom,canvasSize,img,'',{noErasable:true})
|
|
let oldCanvas = store.state.HomeStoreModule.canvasData.deReconstruction
|
|
if(oldCanvas)canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
|
|
// if(oldCanvas)canvasGeneral.canvas.loadFromJSON(oldCanvas, () => {});
|
|
})
|
|
}
|
|
const openMode = (data:any)=>{
|
|
let {yes,no} = data
|
|
console.log(yes,no);
|
|
Modal.confirm({
|
|
title: '是否栅格化',
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
yes()
|
|
},
|
|
onCancel(){
|
|
no()
|
|
}
|
|
});
|
|
yes()
|
|
}
|
|
const openSetData = ()=>{
|
|
createCanvas()
|
|
}
|
|
onMounted(()=>{
|
|
})
|
|
return {
|
|
canvasGeneral,
|
|
...toRefs(data),
|
|
...toRefs(dataDom),
|
|
openSetData,
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.canvasContent_box{
|
|
height: 100%;
|
|
width: 100%;
|
|
// padding: 2rem;
|
|
background: #e6e6e6;
|
|
.canvasContent{
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.generalCanvas_center{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&.canvas{
|
|
}
|
|
.editFrontBack_pencilbtn{
|
|
position: absolute;
|
|
z-index: 1;
|
|
border-radius: 50%;
|
|
border: 1px solid #000;
|
|
pointer-events: none;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
:deep(.canvas-container){
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
|
|
}
|
|
}
|
|
|
|
</style> |