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;
				}
			}
		
		}
	}