图片旋转

pages/album/photoJigsaw/photoJigsaw.vue

@@ -9,7 +9,7 @@
 		<view class="jigsaw-picture" data-type="view" id="jigsawPicture" ref="jigsawPicture" v-if="textCanvasType==true">
 			
 			<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' ,}">
+				<view class="picture-position" :class="photoNewNum==index?'photoNewStye':''" @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'}">
 						<!--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'}">
@@ -19,7 +19,7 @@
 								: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',transform:rotate(item.transform+'deg')}"
+								:style="{width:item.realTimeWidth+'px',height:item.realTimeHeight+'px',transform:'rotate('+item.transform+'deg)'}"
 								@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
 						</movable-view>
 					</movable-area>
@@ -97,7 +97,7 @@
 						<image src="../static/album/photoCheck02.png"></image>
 						<view>替换</view>
 					</view>
-					<view class="btn-list">
+					<view class="btn-list" @click="rotateFun()">
 						<image src="../static/album/photoCheck03.png"></image>
 						<view>旋转90°</view>
 					</view>
@@ -178,6 +178,8 @@ export default {
 			
       textCanvasType:true,//临时控制画布显隐
       bottomCheckType:false,//控制脚部按钮切换
+			
+      photoNewNum:0,//当前选择的是第几张图片
     }
   },
   onLoad(option) {
@@ -190,6 +192,18 @@ export default {
     this.lodaImgFun()
   },
   methods: {
+    rotateFun(){//旋转90°
+      var rotateNum = this.pictureJigsawPosition[this.photoNewNum].transform
+      if(rotateNum==0){
+        this.pictureJigsawPosition[this.photoNewNum].transform = 90
+      }else	if(rotateNum==90){
+        this.pictureJigsawPosition[this.photoNewNum].transform = 180
+      }else	if(rotateNum==180){
+        this.pictureJigsawPosition[this.photoNewNum].transform = 270
+      }else	if(rotateNum==270){
+        this.pictureJigsawPosition[this.photoNewNum].transform =0
+      }
+    },
     lodaImgFun(){//获取图片
       this.pictureJigsawPosition.forEach((item,index)=>{
 			  uni.getImageInfo({
@@ -232,6 +246,7 @@ export default {
     handleTouchMove(event,index) {
     },
     handleTouchStart(event,index) {//changedTouches[0]  pageX横向 pageY属相  //rect (top, right, bottom, left)
+      this.photoNewNum = index
       this.transpositionStartMes = event.changedTouches[0]
       this.transpositionStartIndex = index
     },
@@ -442,6 +457,10 @@ export default {
 			top: 0;
 			left: 0;
 		}
+		.photoNewStye{
+			border: solid 2px green;
+			box-sizing: content-box;
+		}
 		/deep/ movable-view {
 			display: flex;
 			align-items: center;