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

2023-10-30-1

Browse Source
This commit is contained in:
X1627315083
2023-10-30 10:03:49 +08:00
parent 9a4925ac28
commit 2280092956
7 changed files with 160 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -43,16 +43,6 @@
Library
</div>
</div>
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{sex = 'Female'}">
Female
</div>
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{sex = 'Male'}">
Male
</div>
</div>
</div>
<div class="models_placement_content">
<div class="plcaement_point_content">
@@ -76,6 +66,9 @@
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
<div class="placement_point_item placement_point_item_btn">
<span class="started_btn" @click="setPoint">Point</span>
</div>
</div>
<div class="placement_content_operate_list">
@@ -207,11 +200,11 @@ export default defineComponent({
autoCropWidth: '0', //默认生成截图框宽度
autoCropHeight: '0', //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedBox: false, //固定截图框大小，不允许改变
fixedBox: true, //固定截图框大小，不允许改变
fixedNumber: [1, 2.125], //截图框的宽高比例
full: false, //false按原比例裁切图片，不失真
canMove: true, //上传图片是否可以移动
canMoveBox: true, //截图框能否拖动
canMoveBox: false, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
height: true, //是否按照设备的dpr 输出等比例图片
@@ -231,15 +224,15 @@ export default defineComponent({
watch: {
sex:{
handler(newVal:any,oldVal:any){
let imgbox:any = this.$refs.imgbox
let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
if(imgBoxSizeBG){
if(newVal == 'Male'){
imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
}else{
imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
}
}
// let imgbox:any = this.$refs.imgbox
// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
// if(imgBoxSizeBG){
// if(newVal == 'Male'){
// imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
// }else{
// imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
// }
// }
},
},
@@ -261,23 +254,38 @@ export default defineComponent({
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
let divTop:any = document.createElement('div');
let divBottom:any = document.createElement('div');
let divCenter:any = document.createElement('div');
let div:any = document.createElement('div');
if(imgbox.getElementsByClassName('cropper-view-box-BG').length >= 1){
if(imgbox.getElementsByClassName('cropper-view-box-Bg').length >= 1){
}else{
div.classList.add('cropper-view-box-BG')
div.classList.add('cropper-view-box-Bg')
divTop.classList.add('cropper-view-box-Bg')
divBottom.classList.add('cropper-view-box-Bg')
divCenter.classList.add('cropper-view-box-Bg')
div.classList.add('cropper-view-box-Mask')
divTop.classList.add('cropper-view-box-Top')
divBottom.classList.add('cropper-view-box-Bottom')
divCenter.classList.add('cropper-view-box-Center')
div.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
div.style.width = '100%'
div.style.height = '100%'
div.style.position = `absolute`
div.style.top = `0`
imgBoxSizeBG.appendChild(div)
imgBoxSizeBG.appendChild(divTop)
// imgBoxSizeBG.appendChild(div)
imgBoxSizeBG.appendChild(divBottom)
imgBoxSizeBG.appendChild(divCenter)
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
let cropper:any = this.$refs.cropper
console.log(cropper);
cropper.cropH = cropper.scale*cropper.trueHeight
cropper.cropW = cropper.cropH/2.125
cropper.cropOffsertX = cropper.getImgAxis().x1
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
console.log(cropper.getImgAxis().x1,cropper.scale*cropper.trueWidth/2,cropper.cropW/2);
cropper.cropOffsertY = cropper.getImgAxis().y1
imgBoxSize.addEventListener('mousemove',this.startMove)
this.setImageSize()
@@ -347,12 +355,12 @@ export default defineComponent({
pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
},
]
if(this.printObject.templateId){//编辑
if(this.printObject.shoulderLeft?.length >1){//编辑
console.log(this.printObject);
this.isSubmit = true
this.option.canScale = false
this.option.fixedBox = true
this.option.canMove = false
this.option.canMoveBox = false
// this.option.canScale = false
// this.option.canMove = false
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
@@ -371,20 +379,51 @@ export default defineComponent({
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}else{
this.option.canScale = true
this.option.fixedBox = false
// this.option.fixedBox = false
this.option.canMove = true
this.option.canMoveBox = true
// this.option.canMoveBox = true
}
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
setPoint(){
console.log();
let printObject = JSON.parse(JSON.stringify(this.printObject))
this.printObject = {
"shoulderLeft": [
0.3338,
0.1858
],
"shoulderRight": [
0.6644,
0.1858
],
"waistbandLeft": [
0.3758,
0.364
],
"waistbandRight": [
0.6103,
0.364
],
"handLeft": [
0.3277,
0.4687
],
"handRight": [
0.6764,
0.4715
],
file:printObject.file,
url:printObject.url
}
this.getDefaultPointList(this.imgBox)
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
@@ -866,6 +905,13 @@ export default defineComponent({
}
}
}
&.placement_point_item_btn{
display: flex;
justify-content: center;
.started_btn{
}
}
}
}
@@ -947,6 +993,38 @@ export default defineComponent({
position: relative;
&::-webkit-scrollbar { width: 0 !important }
.cropper-view-box-Bg{
width: 100%;
position: absolute;
}
.cropper-view-box-Mask{
top: 0;
height: 100%;
}
.cropper-view-box-Top{
// border-top: 1px dashed;
/*虚线2 css*/
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
height: 1rem;
opacity: .4;
top: 6%;
}
.cropper-view-box-Bottom{
bottom: 6%;
// border-top: 1px dashed;
height: 1rem;
opacity: .4;
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
}
.cropper-view-box-Center{
// border-left: 1px dashed;
left: 50%;
opacity: .4;
background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
top: 0;
width: 1rem;
height: 100%;
}
}
.perview_mark_loading{