首页
学习
活动
专区
工具
TVP
发布

图片缩放拖拽等操作

跟系统图库的效果一样哦,先贴一张美女图片,听说有美女,男人就会多看一眼,不知道是不是真的,哈哈 布局文件需要注意的一点是 scaleType一定要是 matrix,这样才能对图片进行一系列的矩阵操作,例如放大缩小,拖拽...*/ float minScaleR = 1.0f;   /** 最大缩放比例*/ static final float MAX_SCALE = 10f;   /** 初始状态*/...static final int NONE = 0;   /** 拖动*/ static final int DRAG = 1;   /** 缩放*/ static final int ZOOM...:"+p[0]+",最小缩放级别:"+minScaleR);                 matrix.setScale(minScaleR, minScaleR);               ...}   if (p[0] > MAX_SCALE) {   //Log.d("", "当前缩放级别:"+p[0]+",最大缩放级别:"+MAX_SCALE);                 matrix.set

2.2K60
您找到你想要的搜索结果了吗?
是的
没有找到

轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

由于我们的技术栈采用的是 React, 目前还没有一个成熟库可以同时支持自由拖拽缩放, 我们不得不用 react-dragable 和 react-resiable两个库来实现拖拽缩放, 但是这样我们要维护的数据结构就相当复杂了...(当然vue生态有成熟的vue-dragable等来支持自由拖拽缩放), 所以最后笔者决定自己来实现一个....我们从可视化搭建平台的实际业务出发, 可以分析出拖拽缩放有如下几个功能点: 自由拖拽 支持控制点, 多方位缩放 支持自由控制层级 支持组件静态化(即为了实现固定, 预览页面等效果) 拖拽缩放的数据能回传给上层组件并提供受控机制...实现以上四点我们就可以实现一个可用的拖拽缩放组件....接下来笔者就来介绍一下实现的开源拖拽缩放组件rc-drag.

89920

微信小程序单指拖拽和双指缩放旋转

小程序单指拖拽和双指操作是一个比较常用的功能,效果如下图 实现这三个功能,主要用三个触摸事件touchstart、touchmove、touchend <view style="height: 100vh...translateX: 0, // 位移x坐标 单位px translateY: 0, // 位移y坐标 单位px distance: 0, // 双指接触点距离 scale: 1, // <em>缩放</em>倍数...this.setData({ translateX: onePageX - startMove.x, translateY: onePageY - startMove.y }) } 双指<em>缩放</em>...双指<em>缩放</em>的原理是根据两点坐标求出距离(勾股定理),然后在用移动坐标的距离比就可以求出<em>缩放</em>倍数 touchmove touchMove(e) { const touches = e.touches...== 2这个判断的原因是防止图片跳动,因为如果你两个手指触摸,然后离开一个手指,我是禁止<em>拖拽</em>的,只有双指都离开后再次触摸才能单指<em>拖拽</em> 双指旋转 双指旋转的原理是根据三角函数求出起始点的角度,然后再求出移动坐标的角度

2.1K20

从0到1设计通用数据大屏搭建平台

二、快速了解可视化大屏2.1 什么是数据可视化从技术层面上来讲,最直观的就是前端可视化框架:Echart、Antv、Chart.js、D3.js、Vega 等,这些库都能帮我们快速把数据转换成各种形式的可视化图表...三、设计思路3.1 技术选型前端框架:React 全家桶(个人习惯)可视化框架:Echarts\DataV-React (封装度高,json结构的配置项易拓展) D3.js(可视化元素粒度小、定制能力强...)拖拽插件:dnd-kit (满足树状结构视图的跨组件拖拽)布局插件:React-Grid-Layout(网格自由布局,修改源码,支持多个方向的拖拽,自由布局、锁定缩放比等)3.2 架构设计下图是我们搭建平台的整体架构设计...、等宽缩放、全屏铺满等,不同的缩放方式,决定了我们在计算宽高比例的优先级。...3、拖拽器实现背景:React-Grid-Layout 拖拽插件不支持自由布局和组件不同纬度拖拽:解决方案:通过分析源码,对不同纬度的拖拽事件以及拖拽目标碰撞事件进行了重写,并且也拓展了锁定宽高比、旋转透明度等功能

3.1K40

窗口动画缩放,过渡动画缩放,Animator时长缩放_关闭动画缩放好不好

我们通常会使用它的四个子类AlphaAnimation、RotateAnimation、ScaleAnimation和TranslateAnimation,他们分别可以实现渐变动画、旋转动画、平移动画、缩放动画...功能,当然我们今天的主角就是缩放动画 ScaleAnimation。...X坐标类型 private int mPivotYType = ABSOLUTE; //缩放中心点的Y坐标类型 private float mPivotXValue = 0.0f; //缩放中心点的X坐标比例...:缩放中心点的X坐标比例 pivotYType:缩放中心点的Y坐标类型 pivotYValue:缩放中心点的Y坐标比例 public class Test{ private void test(){...//示例传参实现的是,以控件中心为缩放点,从1.0倍缩小到0.5倍,即原图的二分之一,不设置缩放点类型,默认坐标原点以控件为准 ScaleAnimation animation = new ScaleAnimation

2.3K20

D3.js 力导向图的显示优化(二)- 自定义功能

摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能。...既然 D3.js 辣么灵活,那是不是实现很多我们想做的事情呢?在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能。...支持按钮缩放功能 说完删除选中点,在可视化视图中缩放操作也是比较常见的功能,D3.js 中的 d3.zoom() 就是用来实现缩放功能的,且该方法经过其他厂的业务考验相对来说成熟稳定,那我们还有什么理由要自己做呢...采用滚轮控制缩放的方案的话,不了解 Nebula Graph Studio 的用户很难发现这种隐藏操作,而且滚动控制缩放无法控制缩放的明确比例,举个例子,用户想缩放 30% / 50%,对于这种限定的比例...通过查看 d3.zoom() 代码,我们发现 D3.js 本质是获取事件中 d3.event 的缩放值再针对整个画布修改 transform 属性值,但这样处理 svg 中的节点和边元素 x、y 坐标不发生变化

4.1K50
领券