微信小程序 — 图片实现缩放，拖拽功能

7月前作者：棒怡情分类：Toy博客阅读(69) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序 — 图片实现缩放，拖拽功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

movable-view 可移动的视图容器，在页面中可以拖拽滑动。

movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

如果想让图片实现缩放，拖拽效果。则可以把图片放到movable-view容器里面。movable-view 可移动的视图容器，在页面中可以拖拽滑动。

效果如下：

movable-view可移动的视图容器

代码如下，布局文件代码： sacle-value 定义缩放倍数

<view style="display: flex;margin-top: 10rpx;">
  <movable-area scale-area>
    <movable-view direction="all"  scale scale-min="0.5" scale-max="4" scale-value="1">
      <image src="/images/test.jpg" mode='widthFix' style="width:750rpx;height: 500rpx"></image>
    </movable-view>
  </movable-area>
</view>

ps:图片从网上下载。如有侵权，请联系删除！文章来源地址https://www.toymoban.com/news/detail-541724.html

到了这里，关于微信小程序 — 图片实现缩放，拖拽功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序图片拖拽排序组件

图片拖拽排序是一个比较常用的组件，常用于发帖或者评论等内容上传模块，我借鉴了《一款优雅的小程序拖拽排序组件实现》这篇文章的拖拽思路，封装成wx-drag-img发布到npm 实现原理：每个图片初始化我都会封装成一个拖拽的数据结构，然后通过触发touch事件，根据key的变

2024年02月09日
浏览(47)
微信小程序实现拍照并拿到图片对象功能

微信小程序提供了函数chooseImage 我们可以在wxml中定义一个按钮这里绑定了一个点击事件叫 photograph 然后我们在js中编写代码如下这里我们点击后调用了wx.chooseImage 回调中接受了一个res对象其中的tempFilePaths字段就是我们要到图片集合我们运行代码然后用手机真机调试然后

2024年02月07日
浏览(33)
微信小程序实现图片下载与保存功能

首先，定义了一个全局的定时器变量 timer 。在 downloadImage 函数中，如果 timer 已经存在，就清除它，以确保每次只有一个下载任务在进行。然后，设置一个新的定时器，延迟1秒后开始执行下载任务。这是为了防止频繁触发下载操作。在定时器的回调函数中，首先显示一个加

2024年02月03日
浏览(57)
[微信小程序]在图片上的特定区域点击实现功能

目录一、功能描述二、两种不同的解决方法 1.方法一：image组件和view组件相结合 2.方法二：获取点击事件的位置信息对于前端初学者,在前端设计尤其是地图功能设计过程中，偶尔会碰到下面这个问题：实现在图片上特定区域内的点击进行跳转或其它功能。对于这个问题，

2024年02月02日
浏览(33)
vue - 【让一张图片可以拖动】鼠标点击拖曳拖拽图片及鼠标滚轮放大缩小功能实现，让一张图片图像在页面内可以任意拖动拖曳及鼠标滚轮可以缩放控制大小功能效果（完整实例源码，一键复制开箱即用！）

在vue网页h5项目开发中，实现一个图片图像可用鼠标拖曳拖拽位置，并且用鼠标滚轮可以放大缩小图片。一键复制代码，开箱即用。找个页面，复制粘贴。

2024年02月13日
浏览(47)
使用taro+canvas实现微信小程序的图片分享功能

二轮充电业务中，用户充电完成后在订单详情页展示订单相关信息，用户点击分享按钮唤起微信小程序分享菜单，将生成的图片海报分享给微信好友或者下载到本地，好友可通过扫描海报中的二维码加群领取优惠。使用场景及功能：微信小程序生成海报图片分享好友下载图

2024年02月05日
浏览(49)
uniapp中使用canvas，在微信小程序中实现图片缩放移动涂鸦文字

最近需要一个功能，在微信中编辑图片，实现对图片的涂鸦、加文字、缩放、移动，以下基本能实现该功能。 uniapp中使用画布，实现图片的编辑-批量批改图片 1.初始化画布图片，图片是网络图片，非本地图片，所以需要先获取图片信息，直接使用uni.getImageInfo（如果是本地图

2024年04月14日
浏览(42)
【微信开发】微信小程序实现实时聊天功能

最近在做一个项目，需要运用到实时聊天功能，分享一下。分为： 1.界面如何布局以及细节； 2.如何实现实时更新； 3.全部代码展示；一、界面如何布局以及细节： 1.说到底，聊天界面就是循环一个数组，每一行为一个单位（item），循环（wx.for）我

2024年02月04日
浏览(37)
微信小程序原生开发功能合集十五：个人主页功能实现

本章个人主页功能实现，展示当前登录用户信息、个人主页、修改密码、浏览记录、我的收藏、常见问题、意见反馈、关于我们等界面及对应功能实现。另外还提供小程序开发基础知识讲解课程，包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实

2024年02月06日
浏览(75)
微信小程序---图片裁剪、旋转、预览、上传功能实现（已经封装成组件，需要的到资源下载）

1、可以拍摄或选择本地图片上传图片数据 2、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小，还可以缩放操作，需要的可以解除限制即可 1、点击图片上传按钮时，跳转页面到cropper进行图片选择剪切 wx.navigateTo({ url: `/pages/cropper/cropper?d

2023年04月26日
浏览(42)