收藏
回答

transform rotate 旋转后 movable- view可以缩放但无法进拖动?

// view transform rotate 旋转后 movable- view可以缩放但无法进拖动?
<template>
  <view
    class="xz-image"
    :style="{ width: width, height: height }"
    :class="{ 'is-full-screen': isFullScreen }"
  >
    <movable-area style="width: 100%; height: 100%">
      <movable-view
        style="width: 100%; height: 100%"
        direction="all"
      >
        <image
          :src="imgSrc"
          mode="aspectFit"
          @click="isFullScreen = !isFullScreen"
        />
      </movable-view>
    </movable-area>
    <view
      class="full-screen"
      @click="isFullScreen = !isFullScreen"
    >
      <image
        src="https://xzfw.xiznjw.com:9011/mini-app/img/fullscreen.png"
        mode="aspectFit"
      />
    </view>
  </view>
</template>
<script>
import { previewImage } from '@/api/common'
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '412rpx'
    },
    preview: {
      type: Boolean,
      default: true
    },
    src: {
      type: String,
      default: ''
    }
  },
  computed: {
    imgSrc() {
      if (this.src) {
        return previewImage(this.src)
      }
    }
  },
  data() {
    return {
      isFullScreen: false
    }
  }
}
</script>
<style lang="scss" scoped>
.xz-image {
  box-shadow: 0rpx 4rpx 10rpx 0rpx #eeeeee;
  border-radius: 10rpx;
  display: flex;
  position: relative;
  &.is-full-screen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vw !important;
    width: 100vh !important;
    z-index: 9999999;
    transform: rotate(90deg);
    transform-origin: calc(100vw / 2) calc(100vw / 2);
    background-color: #fff;
  }
  .full-screen {
    position: absolute;
    padding: 15rpx;
    background-color: #61a4b7;
    border-radius: 7rpx;
    right: 15rpx;
    top: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 24rpx;
      height: 19rpx;
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
}
</style>


回答关注问题邀请回答
收藏

1 个回答

  • H1HAO 🇨🇳
    H1HAO 🇨🇳
    04-24
    对的,是有这个问题,如果想强行横屏使用的话可以换个思路movable-area不旋转,还是竖屏状态,然后里面的movable-view也是竖屏状态,但是movable-view里面的元素可以进行中心旋转,这样的话用户看起来是横屏,但是其实只是错觉,我这边用uniapp写了一个,你小程序可以试着模仿一下,不要直接复制,语法和写法不同
    <view class="maxWh" style="pointer-events: auto" @tap.stop="()=>{}">
    				<view class="maxWh re" style="background: rgba(0,0,0,0.6);backdrop-filter: blur(0px);">
    					<swiper :duration=300 class="maxWh" :current="current" circular disable-touch vertical
    						:touchable="false" @change="swiperChange">
    						<swiper-item class="maxWh" v-for="(item,index) in list" :key="index">
    							<movable-area class="fixed-box animation-slide-slow maxWh" scale-area @click="clickClose">
    								<movable-view :x="position.x" :y="position.y" out-of-bounds scale
    									class="overflow-hidden" direction="all" :scale-min="0.1" :scale-max="20"
    									:style="{width:sliderSize.width,height:sliderSize.height}"
    									style="transition: height 0.3s">
    									<view class="ab po-centers">
    										<image :src="item" :style="{width:sliderSize.height,height:sliderSize.width }"
    											mode="aspectFill" :draggable="false" show-menu-by-longpress
    											style="transform: rotate(90deg);" @click.stop="()=>{}">
    										</image>
    									</view>
    								</movable-view>
    							</movable-area>
    						</swiper-item>
    					</swiper>
    					<view class="ab po-br" style="z-index: 2;backdrop-filter: blur(0px)">
    						<button class="bIn padding-lg bg-tr" @click="is_show=false">
    							<u-icon name="close" color="#fff" size="36rpx"></u-icon>
    						</button>
    					</view>
    					<view class="ab po-centerX po-top" style="z-index: 2;backdrop-filter: blur(0px)"
    						:style="{opacity:current>0?1:0.3}">
    						<button class="bIn padding bg-tr" @click="Toggle(0)">
    							<u-icon name="arrow-up" color="#ffffff" size="40rpx"></u-icon>
    						</button>
    					</view>
    					<view class="ab po-centerX po-bottom" style="z-index: 2;backdrop-filter: blur(0px)"
    						:style="{opacity:(current+1)<list.length?1:0.3}">
    						<button class="bIn padding bg-tr" @click="Toggle(1)">
    							<u-icon name="arrow-down" color="#ffffff" size="40rpx"></u-icon>
    						</button>
    					</view>
    				</view>
    			</view>
    		</view>
    		<view class="fixed rotate po-tl" v-if="is_sheetShow">
    			<view class="re maxWh" style="background: rgba(0,0,0,0.3)" @click="is_sheetShow = false"></view>
    			<view
    				class="ab po-bl width-max bg-white radius-tl radius-tr overflow-hidden safeDistance animation-slide-bottom">
    				<view class="">
    					<button class="bIn bg-white padding-tb" v-for="(item,index) in sheetList" :key="index"
    						v-if="item.show" @click="controls(item,index)">
    						<view class="text-df">{{item.name||'-'}}</view>
    					</button>
    				</view>
    				<view class="bg-bgColor padding-tb-xsm"></view>
    				<view class="">
    					<button class="bIn bg-white padding-tb" @click="is_sheetShow = false">
    						<view class="text-df">取消</view>
    					</button>
    				</view>
    	</view>
    
    
    <script>
    	export default {
    		name: "pictureView",
    		props: {},
    		data() {
    			return {
    				system: {},
    				is_show: false,
    				list: [],
    				current: 0,
    				sheetList: [ {
    					name: '转发',
    					show: false,
    					id: 0
    				}, {
    					name: '保存',
    					show: true,
    					id: 1
    				} ],
    				is_sheetShow: false,
    
    
    
    
    				elementWidth: 0,
    				elementHeight: 0,
    				position: {
    					x: 0,
    					y: 0,
    					source: "friction"
    				},
    				sliderSize: {
    					width: 0 + "px",
    					height: 0 + "px"
    				},
    			};
    		},
    		mounted() {
    			this.system = this.$hostInfo.getSystem()
    
    
    		},
    		methods: {
    			/**
    			 * 显示
    			 */
    			show( list, index ) {
    				this.is_show = true
    				this.$nextTick( () => {
    					this.$u.getRect( `#element` ).then( res => {
    						this.elementWidth = res.width
    						this.elementHeight = res.height
    						this.list = list
    						this.current = index
    						this.getPictureSize()
    					} )
    				} )
    			},
    			/**
    			 * 切换图片
    			 */
    			swiperChange() {
    				this.getPictureSize()
    			},
    			/**
    			 * 获取图片大小并且定位
    			 */
    			getPictureSize() {
    				var that = this
    				var image = new Image();
    				image.src = this.list[ this.current ];
    				image.onload = function() {
    					var imgWidth = image.height
    					var imgHeight = image.width
    
    
    					var targetWidth = imgWidth;
    					var targetHeight = imgHeight;
    
    
    					var maxWidth = that.elementWidth; //图片最大宽
    					var maxHeight = that.elementHeight; //图片最大高				
    					var scale = imgWidth / imgHeight; //原图宽高比例
    
    
    					//如果原图宽大于最大宽度
    					if ( imgWidth > maxWidth ) {
    						targetWidth = maxWidth;
    						targetHeight = targetWidth / scale;
    					}
    					//缩放后高度仍然大于最大高度继续按比例缩小
    					if ( targetHeight > maxHeight ) {
    						targetHeight = maxHeight
    						targetWidth = targetHeight * scale;
    					}
    
    
    					// 计算缩放后的中心位置
    					if ( targetWidth != maxWidth ) {
    						that.position.x = ( maxWidth / 2 ) - ( targetWidth / 2 )
    					}
    					if ( targetHeight != maxHeight ) {
    						that.position.y = ( maxHeight / 2 ) - ( targetHeight / 2 )
    					}
    					that.sliderSize = {
    						width: targetWidth + "px",
    						height: targetHeight + "px"
    					}
    				}
    			},
    			/**
    			 * 点击关闭组件
    			 */
    			clickClose() {
    				if ( this.is_sheetShow ) return
    				this.is_show = false
    			},
    			/**
    			 * 长按显示菜单
    			 */
    			toSave() {
    				this.is_sheetShow = true
    			},
    			/**
    			 * 菜单操作
    			 */
    			controls( item, index ) {
    				if ( item.id == 1 ) {
    
    
    				}
    			},
    			/**
    			 * 左右切换
    			 */
    			Toggle( type ) {
    				if ( type == 0 ) {
    					if ( this.current == 0 ) {
    						// this.current = this.list.length - 1
    						return
    					}
    					this.current = this.current - 1
    				} else {
    					if ( ( this.current + 1 ) == this.list.length ) {
    						// this.current = 0
    						return
    					}
    					this.current = this.current + 1
    				}
    			}
    		}
    	}
    </script>
    
    
    <style>
    	.rotate {
    		width: 100vh;
    		height: 100vw;
    		overflow: hidden;
    		transform: rotate(90deg);
    		transform-origin: 50vw 50vw;
    		z-index: 11;
    	}
    
    
    	/** 必须提升样式优先权(!important) **/
    	button[disabled] {
    		opacity: 0.3 !important;
    		background: transparent !important;
    	}
    </style>
    
    04-24
    有用
    回复 1
    • 赵伟
      赵伟
      04-26
      好的 谢谢 我试试
      04-26
      回复
登录 后发表内容