页面调整
This commit is contained in:
X1627315083
@@ -3,12 +3,19 @@
|
||||
<div class="canvasBox" ref="canvasBox">
|
||||
<editCanvas v-if="canvasLoad" ref="editCanvas"
|
||||
:config="canvasConfig"
|
||||
:clothingImageUrl="modelUrl"
|
||||
:clothingImageUrl="changeImageUrl"
|
||||
@changeCanvas="changeCanvas"
|
||||
:clothing-image-opts="{
|
||||
imageMode:'contains',
|
||||
}"
|
||||
></editCanvas>
|
||||
>
|
||||
<template #customTools="{ toolButtonProps }">
|
||||
<div class="custom-tool-btn" :class="{active:isHiddenModel}" @click="setHiddenmodel()">
|
||||
<i class="fi fi-rr-eye"></i>
|
||||
<div class="tool-tooltip">Hidden model</div>
|
||||
</div>
|
||||
</template>
|
||||
</editCanvas>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
@@ -24,12 +31,26 @@ 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"
|
||||
import FemaleAdultModel from "@/assets/images/homePage/FemaleAdultModel.png"
|
||||
import FemaleChildModel from "@/assets/images/homePage/FemaleChildModel.png"
|
||||
import MaleAdultModel from "@/assets/images/homePage/MaleAdultModel.png"
|
||||
import MaleChildModel from "@/assets/images/homePage/MaleChildModel.png"
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
editCanvas,
|
||||
},
|
||||
props:{
|
||||
selectSexAge:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {
|
||||
sex:'',
|
||||
age:'',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
emits:['setGenerateImg','setCanvasJSON'],
|
||||
setup(props,{emit}) {
|
||||
const { t } = useI18n();
|
||||
@@ -40,10 +61,11 @@ export default defineComponent({
|
||||
const createProbject = inject('createProbject',()=>{})
|
||||
const data = reactive({
|
||||
canvasLoad:false,
|
||||
isHiddenModel:true,
|
||||
canvasConfig:{},
|
||||
modelUrl:'',
|
||||
probjects:computed(()=>store.state.Workspace.probjects),
|
||||
undoStack:0,
|
||||
changeImageUrl:'',
|
||||
})
|
||||
const dataDom = reactive({
|
||||
editCanvas:null,
|
||||
@@ -52,19 +74,31 @@ export default defineComponent({
|
||||
const openSetData = ()=>{
|
||||
// dataDom.canvasContent.openSetData()
|
||||
}
|
||||
const addImage = async (value)=>{
|
||||
if(!data?.probjects?.id){
|
||||
await createProbject()
|
||||
|
||||
const setFixedImg = ()=>{
|
||||
let sex = props.selectSexAge.value
|
||||
let age = props.selectSexAge.age
|
||||
let changeImageUrl = ''
|
||||
if(sex == 'Male' && age == 'Adult'){
|
||||
changeImageUrl = MaleAdultModel
|
||||
}else if(sex == 'Male' && age == 'Child'){
|
||||
changeImageUrl = MaleChildModel
|
||||
}else if(sex == 'Female' && age == 'Adult'){
|
||||
changeImageUrl = FemaleAdultModel
|
||||
}else if(sex == 'Female' && age == 'Child'){
|
||||
changeImageUrl = FemaleChildModel
|
||||
}
|
||||
// dataDom.editCanvas.addImageToLayer(value.imgUrl)
|
||||
dataDom.editCanvas.addImageToLayer(value.url)
|
||||
changeImageUrl = new URL(changeImageUrl, import.meta.url).href
|
||||
return changeImageUrl
|
||||
}
|
||||
const addBottomImage = (value)=>{
|
||||
dataDom.editCanvas.changeFixedImage(value)
|
||||
const changeFixedImage = async ()=>{
|
||||
await nextTick()
|
||||
data.changeImageUrl = setFixedImg()
|
||||
dataDom.editCanvas.changeFixedImage(data.changeImageUrl, {
|
||||
imageMode: "contains", // 设置底图包含在画布内
|
||||
});
|
||||
}
|
||||
const getData = async ()=>{
|
||||
console.log(dataDom.editCanvas.getCanvasManager().commandManager)
|
||||
// if(dataDom.editCanvas.getState())
|
||||
dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv)=>{
|
||||
emit('setGenerateImg',rv)
|
||||
})
|
||||
@@ -75,7 +109,6 @@ export default defineComponent({
|
||||
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
|
||||
@@ -99,16 +132,26 @@ export default defineComponent({
|
||||
emit('setCanvasJSON',getCanvasJSON())
|
||||
},5000)
|
||||
}
|
||||
const setHiddenmodel = ()=>{
|
||||
data.isHiddenModel = !data.isHiddenModel
|
||||
let index = dataDom.editCanvas.layers.findIndex((item)=>item.type == "fixed")
|
||||
let layerId = dataDom.editCanvas.layers[index].id
|
||||
let canvasManager = dataDom.editCanvas.getCanvasManager()
|
||||
canvasManager?.layerManager?.toggleLayerVisibility(layerId);
|
||||
}
|
||||
const addImage = (url)=>{
|
||||
dataDom.editCanvas.addImageToLayer(url.url,{imageMode:'contains'})
|
||||
}
|
||||
onMounted(() => {
|
||||
nextTick(()=>{
|
||||
let url = new URL(defaultModel, import.meta.url).href
|
||||
data.modelUrl = url
|
||||
setCanvas(url).then(()=>{
|
||||
data.changeImageUrl = setFixedImg()
|
||||
setCanvas(data.changeImageUrl).then(()=>{
|
||||
})
|
||||
})
|
||||
});
|
||||
onBeforeUnmount(()=>{
|
||||
data.canvasLoad = false
|
||||
data.isHiddenModel = true
|
||||
// canvasGeneral.canvasClear()
|
||||
})
|
||||
return {
|
||||
@@ -116,10 +159,12 @@ export default defineComponent({
|
||||
...toRefs(dataDom),
|
||||
isShowMark,
|
||||
openSetData,
|
||||
addImage,
|
||||
getData,
|
||||
getCanvasJSON,
|
||||
changeCanvas,
|
||||
changeFixedImage,
|
||||
setHiddenmodel,
|
||||
addImage,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
@@ -150,5 +195,65 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.custom-tool-btn {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
transition: all 0.2s ease;
|
||||
i{
|
||||
font-size: 3rem;
|
||||
display: flex;
|
||||
}
|
||||
&.active{
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.custom-tool-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
&.active{
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.custom-tool-btn:hover .tool-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tool-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tool-tooltip:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user