拼图修改

pages/album/photoJigsaw/photoJigsaw.vue

@@ -10,11 +10,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' ,}">
-					<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"
-						:class="item.id"
-						@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
+					<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">
+							<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"
+								:class="item.id"
+								@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
+						</movable-view>
+					</movable-area>
 				</view>
 			</template>
 			<image class="picture-backgrounImg queryInfo"
@@ -22,7 +26,7 @@
 				data-tailorx="0" data-tailory="0"
 				src="../static/album/backgroundImgTo.png"></image>
 		</view>
-		<button @click="toCanvas" style="top:0rpx;position: absolute;">按钮</button>
+		<button @click="toCanvas" style="top:1150rpx;position: absolute;">按钮</button>
 		<!--画图板-->
 		<view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}">
 			<canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas>
@@ -166,6 +170,9 @@ export default {
 		
   },
   methods: {
+    onScale(val){//放大缩小
+			
+    },
     clickActFun(num){//宫格选择
 		  this.titleclick = num
     },
@@ -259,8 +266,8 @@ export default {
           }else{//处理置入的图片
             let type = 'image'
             let src= promiseArray[i].dataset.src
-            let posX = parseInt(promiseArray[i].dataset.tailorx/606*this.screenWidth) //图片所在画板的X轴数据
-            let posY = parseInt(promiseArray[i].dataset.tailory/606*this.screenWidth) //图片所在画板的Y轴数据
+            let posX = uni.upx2px(promiseArray[i].dataset.tailorx) //图片所在画板的X轴数据
+            let posY = uni.upx2px(promiseArray[i].dataset.tailory) //图片所在画板的Y轴数据
             //截图的初始X和Y轴
             //x uni.upx2px(72)+uni.upx2px(promiseArray[i].dataset.tailorx) ---获取左边直至顶部的宽度
             let tailorx = (uni.upx2px(72)+uni.upx2px(promiseArray[i].dataset.tailorx))-promiseArray[i].left
@@ -268,16 +275,15 @@ export default {
 						  tailorx = 0
             }
             //y promiseArrayNum 主边框对顶部的高度   promiseArray[i].dataset.tailory 图片主边框的高度
-            let tailory = (promiseArrayNum+uni.upx2px(promiseArray[i].dataset.tailory))-promiseArray[i].top+10
-            console.log(promiseArrayNum+','+uni.upx2px(promiseArray[i].dataset.tailory)+','+promiseArray[i].top)
-            console.log(tailory)
+            let tailory = (promiseArrayNum+uni.upx2px(promiseArray[i].dataset.tailory))-promiseArray[i].top
+            console.log(uni.upx2px(promiseArray[i].dataset.tailory))
             if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
 						  tailory = 0
             }
             let width = promiseArray[i].width//图片原始的宽度
             let height = promiseArray[i].height//图片原始的高度
-            let swidth = parseInt(promiseArray[i].dataset.widthonce/606*this.screenWidth)//要使用的图像的宽度
-            let sheight = parseInt(promiseArray[i].dataset.heightonce/606*this.screenWidth)//要使用的图像的高度
+            let swidth = uni.upx2px(promiseArray[i].dataset.widthonce)//要使用的图像的宽度
+            let sheight = uni.upx2px(promiseArray[i].dataset.heightonce)//要使用的图像的高度
             promiseArray[i]={
 						  type:'image',
 						  src: src,
@@ -308,8 +314,8 @@ export default {
           let textCtx = textCanvas.getContext('2d')				// 创建二维绘图
           // 获取设备设备像素比
           const dpr = uni.getSystemInfoSync().pixelRatio
-          textCanvas.width = res[0].width * dpr					// 设置canvas像素宽
-          textCanvas.height = res[0].height * dpr				// 设置canvas像素高
+          textCanvas.width = res[0].width * dpr	// 设置canvas像素宽
+          textCanvas.height = res[0].height * dpr	// 设置canvas像素高
           textCtx.clearRect(0, 0, res[0].width, res[0].height)	// 设置画布大小
           textCtx.scale(dpr, dpr)
          
@@ -320,17 +326,29 @@ export default {
           for(let i = 0; i <= promiseArray.length-1; i++){
             const tx = textCanvas.createImage()
             tx.src = promiseArray[i].src									// 线上地址或者本地地址都可以
-            tx.width = promiseArray[i].width	
-            tx.height = promiseArray[i].height	
+            tx.width = promiseArray[i].width
+            tx.height = promiseArray[i].height
             tx.onload = () => {
               // 图片  裁剪 ：X  Y   宽度 高度 
               if(i==promiseArray.length-1){//背景
                 textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
               }else{//插入的图片
-                //promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight*1.72, 
-                textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth*1.03, promiseArray[i].sheight*1.4, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)	
+                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)
+                  }
+                })
+                
               }
-              
             }
           }
           this.textCanvasType=false
@@ -390,6 +408,21 @@ export default {
 			top: 0;
 			left: 0;
 		}
+		/deep/ movable-view {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height:100%;
+		}
+		/deep/ movable-view img{
+			display: block;
+			width: 100%;
+		}
+		/deep/ movable-area {
+			position:fixed;
+			overflow: hidden;
+		}
 	}
 	.jigsaw-canvas{
 		display: block;