uniapp实现图片的放大缩小可拖拽

官网地址：https://uniapp.dcloud.io/component/movable-view?id=movable-view

实现放大缩小主要依赖 - movable-view

注意： movable-area指代可拖动的范围，可放大缩小范围，在其中内嵌movable-view组件用于指示可拖动的区域。

            即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。

            当然也可以不拖动，而使用代码来触发movable-view在movable-area里的移动缩放。

参数说明：

案例：实现图片一定区域的放大缩小和拖拽

<view class="scaleImg">
  <movable-area>
    <movable-view  direction="all" scale-value="1" scale-min="1" scale="true" scale-max="4">
      <image src="https://wisdom-museum.oss-cn-chengdu.aliyuncs.com/平面图.jpg" mode=""></image>
    </movable-view>
  </movable-area>	
</view>

 

styles

  注意：

       movable-view 必须设置width和height属性，不设置默认为10px

       movable-view 默认为绝对定位，top和left属性为0px

       当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-         area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

.scaleImg {
		width: 605px;
		height: 760px;
		&>movable-area {	
			height: 760px;		
			width: 100%;
			position:fixed;
			overflow: hidden;
			left: 0;
			z-index: 1000;
			movable-view{
				display: flex;
				justify-content: center;
				width: 100%;
				height: 100%;
				image {
					width: 605px;
					height: 760px;
				}
			}
		
		}
	}