{"id":16271982,"url":"https://github.com/logcreative/wxapp-gesture-view","last_synced_at":"2025-08-03T01:32:24.715Z","repository":{"id":236321056,"uuid":"792344484","full_name":"LogCreative/wxapp-gesture-view","owner":"LogCreative","description":"微信小程序自定义组件 gesture-view，支持双指触控的平移、缩放、旋转，兼容 skyline 渲染器。","archived":false,"fork":false,"pushed_at":"2024-04-28T15:28:46.000Z","size":1096,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-21T04:11:46.609Z","etag":null,"topics":["wechat","wechat-app","wxapp"],"latest_commit_sha":null,"homepage":"https://developers.weixin.qq.com/s/wmnPFKmY7NQr","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LogCreative.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-26T13:31:00.000Z","updated_at":"2024-11-13T07:50:25.000Z","dependencies_parsed_at":"2024-04-28T16:42:26.923Z","dependency_job_id":null,"html_url":"https://github.com/LogCreative/wxapp-gesture-view","commit_stats":null,"previous_names":["logcreative/wxapp-gesture-view"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LogCreative%2Fwxapp-gesture-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LogCreative%2Fwxapp-gesture-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LogCreative%2Fwxapp-gesture-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LogCreative%2Fwxapp-gesture-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LogCreative","download_url":"https://codeload.github.com/LogCreative/wxapp-gesture-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228046854,"owners_count":17861109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["wechat","wechat-app","wxapp"],"created_at":"2024-10-10T18:15:37.464Z","updated_at":"2024-12-06T18:56:41.545Z","avatar_url":"https://github.com/LogCreative.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wxapp-gesture-view\n\n微信小程序自定义组件 gesture-view，支持双指触控的平移、缩放、旋转，兼容 skyline 渲染器。\n\n![demo](https://github.com/LogCreative/gesture-view/assets/61653082/c7cbdcce-6da8-4557-8b03-b98d333f00fb)\n\n代码片段：https://developers.weixin.qq.com/s/wmnPFKmY7NQr\n\n代码仓库：https://github.com/LogCreative/wxapp-gesture-view\n\n## 介绍\n\n微信小程序原生组件 [`movable-view`](https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html) 只支持平移、缩放，不支持旋转，仅支持 webview 渲染器，并且有性能问题。\n\n`gesture-view` 组件在微信小程序中原生实现了双指平移、缩放、旋转，并且兼容 skyline 渲染器。算法上参考了 Dan Burzo 的 [Pinch me, I'm zooming: gestures in the DOM](https://danburzo.ro/dom-gestures/) 一文，使得变换中心始终处于双指中点。初期实现参考了 [微信小程序单指拖拽和双指缩放旋转](https://cloud.tencent.com/developer/article/2235491) 专栏文章。\n\n由于微信小程序不支持 `DOMMatrix`，并且无法通过原生 npm 构建的形式正常加载 [@thednp/dommatrix](https://github.com/thednp/dommatrix?tab=readme-ov-file) 包，这里直接使用了其 cjs（CommonJS）发布文件于 [components/gesture-view/dommatrix.js](components/gesture-view/dommatrix.js)。\n\n示例图片作者 [Mudassir Ali](https://www.pexels.com/photo/blue-and-green-color-abstract-painting-3609832/)。\n\n## 使用方法\n\n1. 将 [components/gesture-view](components/gesture-view) 文件夹复制到你的项目中。\n2. 在对应页面的 `page.json` 中引用该组件：\n```json\n{\n  \"usingComponents\": {\n    \"gesture-view\": \"/components/gesture-view/gesture-view\"\n  }\n}\n```\n3. 在 wxml 中直接使用 `\u003cgesture-view/\u003e` 组件即可，组件内部是你需要展示的内容。\n```html\n\u003cgesture-view width=\"100%\" height=\"60vh\" scaleValue=\"1.5\" rotateValue=\"15\"\u003e\n  \u003cimage mode=\"aspectFit\" src=\"/images/pexels-pixelcop-3609832.jpg\"\u003e\u003c/image\u003e\n\u003c/gesture-view\u003e\n```\n\n## 参数\n\n| 参数名 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| width | String | \"300rpx\" | 宽度 |\n| height | String | \"200rpx\" | 高度 |\n| translateX | Boolean | true | 是否开启横向移动，关闭请使用 `translateX=\"{{false}}\"` |\n| translateXValue | Number | 0 | 横向移动初始值，单位px |\n| translateY | Boolean | true | 是否开启纵向移动，关闭请使用 `translateY=\"{{false}}\"` |\n| translateYValue | Number | 0 | 纵向移动初始值，单位px |\n| scale | Boolean | true | 是否开启缩放，关闭请使用 `scale=\"{{false}}\"` |\n| scaleValue | Number | 1.0 | 缩放初始值 |\n| scaleMin | Number | 0.1 | 缩放范围最小值 |\n| scaleMax | Number | 2.0 | 缩放范围最大值 |\n| rotate | Boolean | true | 是否开启旋转，关闭请使用 `rotate=\"{{false}}\"` |\n| rotateValue | Number | 0 | 旋转初始度数 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogcreative%2Fwxapp-gesture-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogcreative%2Fwxapp-gesture-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogcreative%2Fwxapp-gesture-view/lists"}