135 lines
2.9 KiB
Vue
135 lines
2.9 KiB
Vue
<template>
|
|
<div class="generalCanvas">
|
|
<div class="canvasBox" ref="canvasBox">
|
|
<editCanvas v-if="canvasLoad" ref="editCanvas"
|
|
:config="canvasConfig"
|
|
:clothingImageUrl="modelUrl"
|
|
:clothing-image-opts="{
|
|
imageMode:'contains',
|
|
}"
|
|
></editCanvas>
|
|
</div>
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
|
|
} from "vue";
|
|
import {message} from 'ant-design-vue'
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { useI18n } from "vue-i18n";
|
|
import canvasGeneral from "@/tool/canvasGeneralCopy";
|
|
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
|
|
import defaultModel from "@/assets/images/homePage/defaultModel.png"
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
editCanvas,
|
|
},
|
|
emits:['setGenerateImg'],
|
|
setup(props,{emit}) {
|
|
const { t } = useI18n();
|
|
const store = useStore();
|
|
const isShowMark = ref(false)
|
|
const component = reactive({
|
|
})
|
|
const data = reactive({
|
|
canvasLoad:false,
|
|
canvasConfig:{},
|
|
modelUrl:'',
|
|
})
|
|
const dataDom = reactive({
|
|
editCanvas:null,
|
|
canvasBox:null
|
|
})
|
|
const openSetData = ()=>{
|
|
// dataDom.canvasContent.openSetData()
|
|
}
|
|
const addImage = (value)=>{
|
|
console.log(value)
|
|
// dataDom.editCanvas.addImageToLayer(value.imgUrl)
|
|
dataDom.editCanvas.addImageToLayer(value.url)
|
|
}
|
|
const addBottomImage = (value)=>{
|
|
dataDom.editCanvas.changeFixedImage(value)
|
|
}
|
|
const getData = async ()=>{
|
|
|
|
}
|
|
const getCanvasData = ()=>{
|
|
|
|
return canvasExport
|
|
}
|
|
const setCanvas = (url)=>{
|
|
return new Promise((res,rev)=>{
|
|
let img = new Image()
|
|
console.log(url)
|
|
img.onload = ()=>{
|
|
let wH = [1,1]
|
|
let domHeight = dataDom.canvasBox.offsetHeight - 200
|
|
let imgHeight = img.height
|
|
wH = [1,domHeight/imgHeight]
|
|
data.canvasConfig.width = img.width * wH[1]
|
|
data.canvasConfig.height = domHeight
|
|
console.log(data.canvasConfig,123123123)
|
|
data.canvasLoad = true
|
|
res('')
|
|
}
|
|
img.src = url
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
nextTick(()=>{
|
|
let url = new URL(defaultModel, import.meta.url).href
|
|
data.modelUrl = url
|
|
setCanvas(url).then(()=>{
|
|
})
|
|
})
|
|
});
|
|
onBeforeUnmount(()=>{
|
|
data.canvasLoad = false
|
|
// canvasGeneral.canvasClear()
|
|
})
|
|
return {
|
|
...toRefs(data),
|
|
...toRefs(dataDom),
|
|
isShowMark,
|
|
openSetData,
|
|
addImage,
|
|
getData,
|
|
getCanvasData,
|
|
};
|
|
},
|
|
data(prop) {
|
|
return {
|
|
};
|
|
},
|
|
computed: {
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
mounted() {},
|
|
|
|
methods: {
|
|
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.generalCanvas{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
> .canvasBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |