@@ -235,7 +233,7 @@ export default defineComponent({
//选择不同的色块
selectColorItem(index,color){
let hex
- if(color.r){
+ if(color?.r){
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
}else{
hex = '#FFFFFF'
@@ -276,10 +274,10 @@ export default defineComponent({
//清除当前的颜色
clearCurrentColor(){
this.selectColor = {}
- this.fileList = []
+ // this.fileList = []
this.reviewColor={}
this.pantongName = ''
- this.pantongNameList = []
+ // this.pantongNameList = []
this.tcxColor = ''
},
@@ -485,17 +483,19 @@ export default defineComponent({
justify-content: space-between;
}
.modal_img{
- width: 40rem;
+ width: 45rem;
+ // width: 40rem;
height: 5rem;
overflow-x: hidden;
display: flex;
+ align-items: center;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: 4rem;
height: 4rem;
- margin: 0 1rem 1rem 0;
+ margin: 0 1rem 0 0;
position: relative;
cursor: pointer;
border: 0.1rem solid #DCDCEC;
@@ -553,39 +553,6 @@ export default defineComponent({
.upload_centetn::-webkit-scrollbar {
display: none;
}
- .color_review_block{
- margin-right: 4rem;
-
- .color_review_content{
- width: 16.5rem;
- height: 16.5rem;
- background: #FFFFFF;
- border: 0.1rem solid #DCDCEC;
- }
-
- .pantong_name{
- margin-top: 1rem;
- font-size: 1.6rem;
- font-weight: 400;
- color: #030303;
- text-align: left;
- font-weight: bold;
- }
-
- .clear_button{
- padding: 0 2.8rem;
- height: 3.2rem;
- line-height: 3.2rem;
- background: #EFEEFF;
- font-size: 1.2rem;
- font-family: Roboto;
- color: #343579;
- display: inline-block;
- margin-top: 1rem;
- cursor: pointer;
- }
- }
-
.upload_file_item{
// margin: 0 2rem 2rem 0;
margin: 0;
diff --git a/src/component/LibraryPage/ModelPlacement.vue b/src/component/LibraryPage/ModelPlacement.vue
index ebf75548..cf33cb9c 100644
--- a/src/component/LibraryPage/ModelPlacement.vue
+++ b/src/component/LibraryPage/ModelPlacement.vue
@@ -43,16 +43,6 @@
Library
-
@@ -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{
diff --git a/src/views/HistoryPage.vue b/src/views/HistoryPage.vue
index 13717434..e2828dab 100644
--- a/src/views/HistoryPage.vue
+++ b/src/views/HistoryPage.vue
@@ -230,8 +230,6 @@ export default defineComponent({
overflow: hidden;
min-width: 1024px;
position: relative;
- left: 50%;
- transform: translateX(-50%);
.page_content {
position: relative;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2976cde5..fd8d9f54 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -141,7 +141,7 @@
@dragover.prevent
@drop="dragDrop($event, index)">
-
![]()