fix
This commit is contained in:
@@ -1,34 +1,32 @@
|
||||
<template>
|
||||
<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
|
||||
<a-modal
|
||||
class="addDetails_modal generalModel"
|
||||
class="addDetails_modal generalModel fullScreen"
|
||||
v-model:visible="addDetails"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.addDetailsModal"
|
||||
width="78%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:destroyOnClose="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
:mask="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="addDetails_center">
|
||||
<div class="modal_title_text">
|
||||
<div>{{ $t('addDetails.AddDetails') }}</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
@@ -90,6 +90,7 @@ export default defineComponent({
|
||||
ratio = [1,1]
|
||||
imgData.value = data
|
||||
nextTick(()=>{
|
||||
let contentBox = document.querySelector(".editFrontBack_center");
|
||||
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
|
||||
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
|
||||
document.removeEventListener('mousemove', mouseMove);
|
||||
@@ -97,33 +98,36 @@ export default defineComponent({
|
||||
let img = new Image();
|
||||
img.onload = async function(){
|
||||
loadingShow.value = true
|
||||
let scale = img.width/img.height
|
||||
let height = canvasBox.offsetHeight;
|
||||
canvasWH.value = height
|
||||
canvasBox.style.width = height * scale+'px'
|
||||
let scale
|
||||
|
||||
|
||||
let wScale = 1
|
||||
let hScale = 1
|
||||
let styleWidth = Number(data.style.width.split('px')[0])
|
||||
let styleHeight = Number(data.style.height.split('px')[0])
|
||||
let width = contentBox.offsetWidth;
|
||||
let height = contentBox.offsetHeight;
|
||||
if(styleWidth>styleHeight){
|
||||
hScale = styleHeight/styleWidth
|
||||
exportWH = img.width
|
||||
canvasWH.value = width
|
||||
scale = img.height/img.width
|
||||
console.log(width,scale)
|
||||
canvasBox.style.height = width * scale+'px'
|
||||
}else{
|
||||
wScale = styleWidth/styleHeight
|
||||
exportWH = img.height
|
||||
canvasWH.value = height
|
||||
scale = img.width/img.height
|
||||
canvasBox.style.width = height * scale+'px'
|
||||
}
|
||||
editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
|
||||
editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
|
||||
ratio = [wScale,hScale]
|
||||
// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
|
||||
// width:canvasWH.value * wScale,
|
||||
// height:canvasWH.value * hScale,
|
||||
// })
|
||||
await frontBackCanvasObj.canvasInit(canvasBox,{
|
||||
width:canvasWH.value * wScale,
|
||||
height:canvasWH.value * hScale,
|
||||
},data.maskUrl,'',{})
|
||||
},data.maskUrl,'',{noWheel:true})
|
||||
// undividedLayer
|
||||
canvas = frontBackCanvasObj.canvas
|
||||
|
||||
@@ -383,6 +387,8 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
background: #e6e6e6;
|
||||
cursor: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
@@ -272,10 +272,10 @@ methods: {
|
||||
left: 50%;
|
||||
border-radius: 2rem;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(50px circle at var(--x) var(--y),#39215b 0,transparent 100%);;
|
||||
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
|
||||
}
|
||||
.content_bottom_item .active{
|
||||
background: #39215b;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user