拼图优化

pages/album/photoJigsaw/photoJigsaw.vue

@@ -11,11 +11,15 @@
 			<template v-for="(item,index) in pictureJigsawPosition">
 				<view class="picture-position" @scroll="onScroll($event,index)" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
 					<movable-area scale-area :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx'}">
-						<movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="1">
+						<!--scale-min最小倍数  scale-max最大倍数  scale-value每次放大缩小倍数 image需要和movable-view大小一致-->
+						<movable-view direction="all" @scale="onScale" scale="true" scale-min="0" scale-max="4" :scale-value="1" :style="{width:item.realTimeWidth+'px',height:item.realTimeHeight+'px'}">
+							<!--data-XXX自定义参数-->
 							<image class="queryInfo"
 								data-type="image" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url" 
 								:data-tailorx="item.left" :data-tailory="item.top" :data-id="item.id"
+								:data-primitiveWidth="item.primitiveWidth" :data-primitiveHeight="item.primitiveHeight"
 								:class="item.id"
+								:style="{width:item.realTimeWidth+'px',height:item.realTimeHeight+'px'}"
 								@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
 						</movable-view>
 					</movable-area>
@@ -122,9 +126,14 @@ export default {
       pictureJigsawPosition:[//图片框位置
         {
           id:'img1',
-          url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
+          //url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
+          url:'https://img2.baidu.com/it/u=272669934,2134014224&fm=253&fmt=auto&app=138&f=JPEG?w=1132&h=800',
           width:'243',
           height:'320',
+          realTimeWidth:'1132',
+          realTimeHeight:'800',
+          primitiveWidth:'1132',
+          primitiveHeight:'800',
           top:'151',
           left:'61',
           radius:'0',
@@ -134,6 +143,10 @@ export default {
           url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
           width:'243',
           height:'320',
+          realTimeWidth:'332',
+          realTimeHeight:'340',
+          primitiveWidth:'332',
+          primitiveHeight:'340',
           top:'151',
           left:'312',
           radius:'0',
@@ -143,6 +156,10 @@ export default {
           url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
           width:'346',
           height:'266',
+          realTimeWidth:'332',
+          realTimeHeight:'340',
+          primitiveWidth:'332',
+          primitiveHeight:'340',
           top:'530',
           left:'61',
           radius:'0',
@@ -167,11 +184,26 @@ export default {
     query.select('.jigsaw-picture').boundingClientRect(res => {
       this.screenWidth = res.width
     }).exec()
-		
+    this.lodaImgFun()
   },
   methods: {
+    lodaImgFun(){//获取图片
+      this.pictureJigsawPosition.forEach((item,index)=>{
+			  uni.getImageInfo({
+				  src: item.url,
+				  success: (res) => {//res.width res.height
+			      // item.primitiveWidth = res.width//原始宽度
+			      // item.primitiveHeight = res.height//原始高度		
+				  },
+				  fail: (err) => {
+				    console.error('获取图片信息失败:', err)
+				  }
+			  })
+      })
+      console.log(this.pictureJigsawPosition)
+    },
     onScale(val){//放大缩小
-			
+      console.log(val)
     },
     clickActFun(num){//宫格选择
 		  this.titleclick = num
@@ -276,7 +308,7 @@ export default {
             }
             //y promiseArrayNum 主边框对顶部的高度   promiseArray[i].dataset.tailory 图片主边框的高度
             let tailory = (promiseArrayNum+uni.upx2px(promiseArray[i].dataset.tailory))-promiseArray[i].top
-            console.log(uni.upx2px(promiseArray[i].dataset.tailory))
+            //console.log(uni.upx2px(promiseArray[i].dataset.tailory))
             if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
 						  tailory = 0
             }
@@ -284,6 +316,11 @@ export default {
             let height = promiseArray[i].height//图片原始的高度
             let swidth = uni.upx2px(promiseArray[i].dataset.widthonce)//要使用的图像的宽度
             let sheight = uni.upx2px(promiseArray[i].dataset.heightonce)//要使用的图像的高度
+						
+            let primitiveWidth = promiseArray[i].dataset.primitivewidth//原始宽度
+            let primitiveHeight = promiseArray[i].dataset.primitiveheight//原始高度
+						
+						
             promiseArray[i]={
 						  type:'image',
 						  src: src,
@@ -295,6 +332,8 @@ export default {
 						  posY:posY,
 						  tailorx:tailorx,
 						  tailory:tailory,
+              primitiveWidth:primitiveWidth,
+              primitiveHeight:primitiveHeight,
             }
           }
           
@@ -335,18 +374,10 @@ export default {
               }else{//插入的图片
                 var widthScale = 0//宽度比例
                 var heightScale = 0//高度比例
-                uni.getImageInfo({
-                  src: tx.src,
-                  success: (res) => {
-                    widthScale = res.width/promiseArray[i].swidth
-                    heightScale = res.height/promiseArray[i].sheight
-                    console.log(widthScale+','+heightScale)
-                    textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth*2.63, promiseArray[i].sheight*2.04,promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)	
-                  },
-                  fail: (err) => {
-                    console.error('获取图片信息失败:', err)
-                  }
-                })
+								
+                widthScale = promiseArray[i].primitiveWidth/promiseArray[i].width
+                heightScale = promiseArray[i].primitiveHeight/promiseArray[i].height
+                textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth*widthScale, promiseArray[i].sheight*heightScale,promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)	
                 
               }
             }