Skip to content

Latest commit

 

History

History
54 lines (41 loc) · 2.85 KB

README.md

File metadata and controls

54 lines (41 loc) · 2.85 KB
Raw

wxapp-gesture-view

微信小程序自定义组件 gesture-view，支持双指触控的平移、缩放、旋转，兼容 skyline 渲染器。

demo

代码片段：https://developers.weixin.qq.com/s/wmnPFKmY7NQr

代码仓库：https://github.com/LogCreative/wxapp-gesture-view

介绍

微信小程序原生组件 movable-view 只支持平移、缩放，不支持旋转，仅支持 webview 渲染器，并且有性能问题。

gesture-view 组件在微信小程序中原生实现了双指平移、缩放、旋转，并且兼容 skyline 渲染器。算法上参考了 Dan Burzo 的 Pinch me, I'm zooming: gestures in the DOM 一文，使得变换中心始终处于双指中点。初期实现参考了 微信小程序单指拖拽和双指缩放旋转 专栏文章。

由于微信小程序不支持 DOMMatrix，并且无法通过原生 npm 构建的形式正常加载 @thednp/dommatrix 包，这里直接使用了其 cjs（CommonJS）发布文件于 components/gesture-view/dommatrix.js。

示例图片作者 Mudassir Ali。

使用方法

  1. 将 components/gesture-view 文件夹复制到你的项目中。
  2. 在对应页面的 page.json 中引用该组件：
{
  "usingComponents": {
    "gesture-view": "/components/gesture-view/gesture-view"
  }
}
  1. 在 wxml 中直接使用 <gesture-view/> 组件即可，组件内部是你需要展示的内容。
<gesture-view width="100%" height="60vh" scaleValue="1.5" rotateValue="15">
  <image mode="aspectFit" src="/images/pexels-pixelcop-3609832.jpg"></image>
</gesture-view>

参数

参数名 类型 默认值 说明
width String "300rpx" 宽度
height String "200rpx" 高度
translateX Boolean true 是否开启横向移动，关闭请使用 translateX="{{false}}"
translateXValue Number 0 横向移动初始值，单位px
translateY Boolean true 是否开启纵向移动，关闭请使用 translateY="{{false}}"
translateYValue Number 0 纵向移动初始值，单位px
scale Boolean true 是否开启缩放，关闭请使用 scale="{{false}}"
scaleValue Number 1.0 缩放初始值
scaleMin Number 0.1 缩放范围最小值
scaleMax Number 2.0 缩放范围最大值
rotate Boolean true 是否开启旋转，关闭请使用 rotate="{{false}}"
rotateValue Number 0 旋转初始度数