小程序图片移动、缩放、旋转封装组件（二）

于 2019-03-25 15:04:33 发布
阅读量717 收藏 1
点赞数 1
分类专栏： 微信小程序开发 文章标签： 小程序旋转缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41114603/article/details/88795508
版权

附之前关于小程序图片移动、缩放、旋转的文章

首先感谢这么多人的评论；受宠若惊，始料未及= =！；
应大家的的要求 我把这个功能做了一个组件；本来想做成第三方插件；你们可以直接使用的；但是第三方插件提交的时候遇到了点问题；好像个人开发不能提交第三方开发插件申请，所以暂时先把代码放到github上面了，封装后可以根据你们自己的需求进行设计；如有其它必要、合理的需求可以在本文或者github留言，下面附上github地址
小程序图片移动、缩放、旋转封装组件
文档和效果图在doc目录里面

風灬雲
关注
专栏目录
微信小程序内拖动图片实现移动、放大、旋转的方法
12-12
屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负（这点和数学上相反的）以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法 微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作，对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作 wx.drawCanvas(object) 绘制 canvasId 画布标识，传入的cavas-id
微信小程序 canvas 处理图片的缩放移动旋转问题
最新发布
Hacker_Hacker007的博客
07-02 817
~CanvasDrag的路径是引入插件的路径，下面的utils_storageUtil是存储功能的，可不加，utils_storageUtil是在导出图片那块儿使用到的，删掉即可。创建了一个由canvas-drag封装过的画布，然后增加了一些按钮。这里使用到了一个插件，canvas-drag，来实现大部分功能的。下载下来，将这个文件夹拷到自己的文件夹下即可。emmmm，忘记给插件地址了~
微信小程序的拖拽、缩放和旋转手势
weixin_42262436的博客
07-25 4307
在开发中，有时会遇到像App中的手势那样的效果，下面就仿照App实现了一下。 wxml部分： <view class="touch-container"> <view class="msg">{{msg}}</view> <image class="img" src="{{src}}" style="wid
一款人性化的小程序图片裁剪插件支持旋转支持旋转支持旋转
08-10
一款人性化的小程序图片裁剪插件，支持旋转支持旋转支持旋转
wx-xcropper:小程序图片裁切插件（支持图片缩放、拖动；支持选取框缩放、拖动；支持多种比例裁切；支持多种尺寸裁切；支持多张图片裁切）
05-11
xCropper @(关键词)[小程序|图片裁切|多比例|多尺寸|多图] xCropper是一款专为微信小程序开发的图片裁切组件，通过精心的设计与技术实现，配合小程序强大的功能，带来前所未有的裁切体验。特点概述： 功能丰富 ：支持图片缩放和拖动；支持裁切框缩放和拖动；支持多种裁切比例；支持多种裁切尺寸；支持多种裁切模式；支持多张图片依次裁切； 操作简单 ：多张图片一次裁切，每张图片可选择不同裁切比例；一次选择裁切出多种尺寸 配置简单 ：引入组件，配置一个参数即可使用裁切组件 [TOC] xCropper简介 图片裁切是一个非常普通功能，然而微信小程序原生并没有提供；从网上找了几个图片裁切插件功能也都比较简单，且存在各种小问题；因此决定自己尝试开发一个组件，也是抱着抛砖引玉的想法提交到GitHub上，希望大家一起努力完善。 使用 Clone源代码，从 components 目录中把 xcro
微信小程序自定义剪图功能(可以缩放、旋转、浏览、自定义尺寸)
06-24
1、主要功能有：是否裁剪的宽度固定、是否裁剪的高度固定、是否禁用旋转、是否锁定比例、是否限制移动、通过链接地址或打开视频本地图片选择裁剪图片、上下调节裁剪区域的范围、画布大小等 已经封装成组件，需要相应...
LemonJournal：基于Wafer2框架的微信小程序演示-微信小程序演示：柠檬手帐-界面简洁的图片编辑应用，支持图片和文字的移动，旋转，缩放，保存编辑状态并生成预览图
03-04
小程序中的模态输入框为单独封装的组件 代码已可移除AppId等敏感信息，可自行添加自己的AppId和AppSecret以配置后台环境，实现登录测试，详细添加方法见称为“使用方法”，如果本地运行可通过修改app.json文件中page...
LemonJournal-微信小程序Demo：柠檬手帐 - 界面精美的图片编辑应用，支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图.zip
09-23
AppId在 /client/utils/util.js 中相应位置填入 AppId 和 AppSecret在微信开发者工具中重新导入整个项目，上传后台代码后编译运行即可核心代码组件的移动、旋转和缩放主要思路是把  标签（对应图片）和 ...
qt编写的点云显示工具可拖动缩放旋转
12-21
在本项目中，"qt编写的点云显示工具可拖动缩放旋转"利用了Qt库的强大功能，特别是其QGLWidget组件，来创建一个用户交互式的3D点云查看器。QGLWidget是Qt提供的一种OpenGL支持的窗口，它可以用来实现高性能的3D图形...
微信小程序 图片缩放拖动
08-21
微信小程序图片缩放 拖动，亲测可用（别人写的，拿来分享下）。因为小程序程序包大小有限制，把两个gif图片删除就行了，删除不影响使用
全平台（Vue、React、微信小程序）任意角度旋转 图片裁剪组件 ...
03-29
SimpleCrop 目前是 全网唯一 支持裁剪图片任意角度旋转、交互体验 媲美原生客户端 的 全平台 图片裁剪组件。 项目地址： github.com/newbieYoung… 。 特性及优势 和目前流行的图片裁剪组件相比，其优势在于以下几点： 裁剪图片支持任意角度旋转； 支持 Script 标签、微信小程序、React、Vue 等多种开发模式； 支持移动和 PC 设备； 支持边界判断、当裁剪框里出现空白时，图片自动吸附至完全填满裁剪框； 移动端缩放以双指中心为基准点； 交互体验媲美原生客户端。 示例 微信小程序示例 (此图片来源于网络，如有侵权，请联系删除! ) 移动端示例 (此图片来源于
微信小程序手势操作拓展插件，包括拖拽、旋转、缩放等wx-touch-master.zip
09-25
微信小程序手势操作拓展插件，包括拖拽、旋转、缩放等wx-touch-master.zip
微信小程序-图片放缩、旋转、裁剪 for 微信小程序
08-06
weCropper 图片放缩、旋转、裁剪 for 微信小程序，实现方式是canvas作图 使用方法 下载代码，在微信开发者工具中选择相应包路径，打开后可直接查看 说明 项目基础来自这位同学https://github.com/dlhandsome/we-cropper ，增加了旋转功能,优化了些细节。 本来打算做成如下效果（即有个半透明层）： 试过两种方法： 1）在canvas上增加遮罩。--然而小程序里canvas组件是由客户端创建的原生组件，它的层级是最高的。遮罩会被盖住。 2）两个canvas层叠。--在开发工具上好好的，到手机上就不行了。。 另外，由于touchMove绑定的函数里有canvas作图，会对手机性能消耗比较严重。推荐上传压缩图，函数节流等。（尽管如此，还是出现了卡顿。。） 目前只做成这样，凑合着用了。貌似微信以后会出图片裁剪的组件。或者将白俊杰https://github.com/baijunjie/PhotoClip.js 的做法搬到小程序上，这个可能会比较复杂了 最后 求个star^_^
微信小程序图片缩放移动代码
12-25
微信小程序没有图片无极缩放的代码，自己写了个，双击放大，支持两指缩放，移动。
picturebox控件图片缩放和平移
09-17
通过这样的封装，我们能够轻松地在应用程序中使用ZoomablePictureBox控件，实现图片的缩放和平移，提高用户体验。在给定的压缩包文件中，可能包含了使用此封装类的示例项目，通过加载并运行testb.sln，你可以查看和...
小程序图片旋转、缩放、移动后生成图片（特别好用的插件推荐）
qq_36742720的博客
11-28 2603
紧接着原来的项目，在https://blog.csdn.net/qq_36742720/article/details/84307572之后，发现自己在图片旋转后生成图片这里卡了壳，遂在网上寻求方法。好在功夫不负有心人，找到了一个特别好用的插件，一下省了我很多事情，这里给大家推荐： 插件下载地址：https://github.com/yuanwyj/Mini-Program-cropper 另...
小程序的拖拽、缩放和旋转手势 滚动置顶
GUK
07-09 1293
<view class='touch-container'> <view class='msg'>{{msg}}</view> <image class='img' src='{{src}}' style="width:{{width}}rpx;height:{{height}}rpx;left:{{left}}rpx;top:{{top}}rpx;t...
微信小程序Movable View：移动图片与双指缩放实现教程
1. 可移动视图容器 (`movable-view`): 这是一个自定义的小程序组件，其核心功能就是作为一个可以被用户通过触摸操作拖动的视图容器。它允许开发者在其内部放置其他组件，并提供触控事件处理，如`touchend`，用于响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值