uni 图片缩放后 ，设置图片可拖动位置

最新推荐文章于 2025-06-21 16:41:01 发布
最新推荐文章于 2025-06-21 16:41:01 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： uni-app相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dbmonkey/article/details/105919824
本文介绍了一个关于图片放大的滑动边界控制问题，当图片放大后，原本的<movable-area>默认尺寸导致图片可以被上拉至屏幕外。通过调整<movable-area>的宽高，可以限制图片放大的滑动范围，使其只能滑动到指定位置，从而避免图片滑动超出屏幕。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在工作中遇到一个问题，图片放大后，可以一直往上移动，直到图片差点都移动到屏幕外，而实际想要的效果，是图片放大后，只能上拉到指定位置。

处理方法：设置<movable-area>的宽高。默认宽高只有10px，我一开始没注意到这个问题，默认的10px刚好就在顶部，所以图片放大后可以被上拉到差点都在屏幕外。

uniapp｜实现多端图片上传、拍照上传自定义插入水印内容及拖拽自定义水印位置,实现水印相机、图片下载保存等功能
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
05-28 1万+
本文以基础视角，详细讲解如何在uni-app中实现图片上传→水印动态编辑→图片下载的全流程功能。
uni-app技术分享| 用uni-app实现拖动的诀窍
anyRTC的博客
10-12 2407
还在为实现类似于QQ视频通话 那样的视频窗口随意拖动而苦恼吗？福音来了，今天就为大家解决这样的烦恼。 前提： 使用 anyrtc 基本实现音视频(nvue页面) 需求: 两人通话时可随意拖动小视频 实现原理： uniapp的nvue内置原生插件 BindingX。具体可查看 uniapp 原生插件引入、 BindingX 效果展示： 项目地址： Call_uniapp 具体实现： 1. 在实现音视频功能插件提供的视频容器外边包裹一层。 如：(使用 anyRTC 音视频插件) <view ref=
uniApp中 将2一张图片叠加到指定位置
山外小楼
02-22 1118
uniApp中 将2一张图片叠加到指定位置
uniapp实现丝滑般的长按拖动排序
最新发布
2401_84520694的博客
06-21 718
本文实现了一个移动端长按拖动排序功能，通过触摸事件(@touchstart、@touchmove、@touchend)监听用户操作，记录初始位置和实时计算偏移量。核心逻辑包含位置交换判断(checkSwapPosition)和实际交换操作(swapItems)，使用transform实现平滑过渡动画，并处理边界情况。代码采用Vue实现，包含拖拽状态管理、位置计算和性能优化，如阻止默认滚动行为、响应式数据更新等，适用于小程序或移动应用的列表排序场景。
uniapp触摸拖动元素改变位置
weixin_51426266的博客
04-24 789
【代码】uniapp触摸拖动元素改变位置。
uni-app 手势放大图片
Mr_wuying的博客
01-31 1650
手势缩放图片 <movable-area> <movable-view direction="all" :scale="true" scale-min="1" scale-max="4" :scale-value="scale"> <image :src="item.type==1?item.imageUrl:item.houseTypeUrl" mode=""></image> </movable-view> </movabl
uni-app引入图片缩放
weixin_46073823的博客
11-21 1213
aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 widthFix：宽度不变，高度自动变化，保持原图宽高比不变 例： <view class="text-zuijinone"><image src="../../../static/logo.png" mode="aspectFit">&
uniapp海报内容并生成海报二维码图片（可拖拽，可调节大小）
10-19
在描述中提到的“可拖拽，可调节大小”特性，指的是用户可以通过拖动和缩放操作来改变海报上的元素位置和尺寸。uniapp提供了触摸事件处理和计算布局的方法，我们可以监听用户的触摸事件，根据手指移动或缩放的动作...
uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能
一个女胖子的博客
12-12 4036
小程序的swiper阻止切换没有实现，同时该组件在小程序端明显卡段，动画不流畅，也没有native那种回弹的效果，跟产品商量了一下也对比了一下决定做个实验，小程序端直接用uni.previewImageAPI，毕竟用户就是想放大看看图片，没必要做那么多嵌套，动画流畅，体验敢强最重要；至于关闭定位索引和在弹框slot别的内容这些暂时在小程序端先不做；
Android实现图片在屏幕内缩放和移动效果
08-26
在实现图片在屏幕内缩放和移动效果时，需要计算图片的精确位置，以确定手指是否点在图片内。不同于普通缩放的图片充满屏幕，屏内缩放的图片只占据屏幕的一部分，因此需要判断手指是否点在图片内，才能进行各种操作。...
微信小程序内拖动图片实现移动、放大、旋转的方法
12-12
屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负（这点和数学上相反的）以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法 ...
uniapp动态修改样式_掌握Photoshop图层样式技术
weixin_29689845的博客
12-30 597
凹凸贴图效果“等等，什么？” 您会惊叹：““图层样式”菜单中没有凹凸贴图效果！” 的确如此，但是通过将“图案覆盖”和“斜面和浮雕”结合使用，我们可以使用可控光源实现带纹理的凹凸贴图表面。此技术需要两张图像：一个用于纹理和颜色，另一个用于深度图。深度图不需要任何色相，因为它基于复合值确定深度，黑色是最低值，白色是最高值。在某些情况下，您可能会为两者使用相同的图像，但是在我们的示例中，我们将使用完全不...
uni-app使用movable-view移动超出movable-area范围的问题
总结前端开发中遇到的问题，分享前端知识
07-29 3075
movable-view是一个可移动的View，需要需要做为movable-area的直接子组件时候才能使用。官方文档提示说movable-area和movable-view需要设置width和height，不设置的话默认为10px。但是在业务中，我们想要移动的组件不可能仅仅是movable-view，比如一个image。这是我们仅仅需要将image放在movable-view即可。代码如下： <movable-area class="movableArea"> <movab.
uni-app图片 设置浏览功能 实现双指放大缩小 拖动移动
qq_42822054的博客
03-02 5344
首先，点击触发图片浏览界面 在浏览界面去实现图片移动和放缩 图片设置双指放大缩小这个功能相对来说比较简单的，是用于官方文档的路径(组件->视图容器->movable-area)，movable-area可以做双指放大缩小，并且放大的同时可以左右移动图片(页面)，至于怎么做呢？ 用HBuilder X编辑器创建个uni-app项目 html代码 <template> <view> <view class="uni-paddin.
uniapp 做一个查看图片的组件，图片可缩放移动
qq_56995244的博客
09-12 1486
要注意 transform的translate和scale属性在同一标签上不会一起生效。因为是手机端，所以需要触摸可移动，双指放大缩小。查看图片使用 uni-popup 弹窗。方法直接调用组件open方法就OK了。首先在components里建个组件。缩放就根据双指距离的变大变小进行缩放。外面组件调用时引用或者全局注册后使用。移动就根据触摸效果进行偏移图片。外面图片上加个点击事件。
uni中自带的拖动、缩放movable-area的使用
10-23 1882
联系微信：zkhh666 1、因为官方我没找到相关代码（懒） 2、我放大后拖动，总是显示不全（自己本），然后就写下使用这个组件 3、我先写点官方文档中的东西吧：字节小程序不支持、movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。 废话不多说，上代码了 Ps：我这里把movable-view宽度没写死，可能会很笨，有更好的方法可以提，我的需求是点击图片，弹出框 + 弹出框里面的内容可以放大，所以我copy了一下元素 Ps1：因为里面的比外面的，你可以进
【uniapp】canvas实现图片拖拽功能
lumpsi的博客
09-09 5360
上面我们已经将当前被选中的对象移到了layers数组的尾部，因此在长按移动图片这一步骤中，我们就只需判断layers[layers.length - 1] 对象的isDrag属性是否为true，如果是则获取每次移动了的多少距离，并不断修改被选中图片的左上角坐标点。在前面我已介绍过，layers数组中下标越往后图层层级越高（因为canvas默认新绘制的图片会覆盖先绘制的图片），因此我们只需要反向遍历layers，优先判断图层层级较高的图片是否被选中即可。四个条件，就可以断定选中了图片。
uni-app预览图片-图片设置双指或双击放大缩小
漫天随飞雪的博客
09-10 7661
主要用到的 弹框uni-popup 弹出图片 ，然后弹出的图片 movable-area设置双指或双击放大缩小 <!-- start点击大图弹框 --> <!-- 插屏弹窗 --> <uni-popup ref="showimage" :type="type" :mask-click="true" @change="change"> <view class="uni-image imagecontent"> <movable-area ...
uniapp实现自定义图片预览手势缩放滑动下一页等(精简版,原生微信小程序同理)
qq_41956361的博客
05-06 1120
uniapp实现自定义图片预览手势缩放滑动下一页等(精简版,原生微信小程序同理)
uniapp 拖动图片四角缩放
02-15
### 实现 UniApp 中拖动图片四角完成缩放效果 为了实现在 UniApp 中通过拖动四个角落来调整图片大小的效果，可以利用 uni-app 提供的 Canvas API 和触摸事件处理机制。具体来说，可以通过监听触控事件并动态更新 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值