- 综合排序
- 最热优先
- 最新优先
- 来自专栏娱乐心理测试
小程序的拖拽、缩放和旋转手势
.pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 ].pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 // 计算角度，旋转(优先) var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2)/(preTwoPoint.x1 - preTwoPoint.x2 )*180/Math.PI if (Math.abs(perAngle - curAngle) > 1) { that.setData({ msg: '旋转 twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2)) that.setData({
1.7K40发布于 2018-06-08 开源：16点位，6特性，拖拽旋转库（DDR）
一句话总结超丝滑拖拽旋转库，16点位，带边界检测，圆角控制，动态位置指示器，拖拽旋转无抖动，动态箭头，完全开源拖拽库，坐标精准，旋转后，坐标始终为左上角那个点的坐标前言目前拖拖拽拽的项目非常流行比如低代码 而这些离不开前端底层的拖拽框架基于canvas实现的拖拽框架，非常丝滑，自由度高，但是做一些复杂业务难度较大所以使用div+css+js实现了一款16点拖拽旋转的库没有耐心看文章的同学，可以直接访问：https ://ddr.mx2d.cn/特性一：16点位我们来看看16个点分别是哪些上下左右四条边算4个点，可调整大小4个顶点可以拖拽，可同时调整两条边的大小顶点边缘有4个点，可拖拽旋转内置4个点可调整圆角大小（ 默认不开启）特性二：旋转无抖动无论是高速拖拽，还是旋转后拖拽，都没有抖动，非常丝滑。 ，分4个象限，每个顶点比较两条边，做了16次判断特性四：自带指示器这可不是一个普通的指示器，而是一个动态的指示器如果当前在拖拽，则显示坐标如果是调整大小，则显示宽高如果是旋转则显示度数厉害吧,跟达文西学的
7910编辑于 2026-05-06- 来自专栏小孟开发笔记
微信小程序单指拖拽和双指缩放旋转
小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图 实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend <view style="height: 100vh : [] // 起始点touch数组 }, }) 单指<em>拖拽</em> 单指<em>拖拽</em>比较简单，只需要记录移动的点坐标，然后减去起始点坐标，就可以求出针对页面的移动距离 touchstart touchStart(e == <em>2</em>) { // 单指<em>拖拽</em> this.setData({ translateX: onePageX - startMove.x, translateY: == <em>2</em>这个判断的原因是防止图片跳动，因为如果你两个手指触摸，然后离开一个手指，我是禁止<em>拖拽</em>的，只有双指都离开后再次触摸才能单指<em>拖拽</em> 双指<em>旋转</em> 双指<em>旋转</em>的原理是根据三角函数求出起始点的角度，然后再求出移动坐标的角度 pageY- p<em>2</em>.pageY return Math.atan<em>2</em>(y, x) * 180 / Math.PI } touchend touchEnd() { // 保存当前<em>旋转</em>角度 this.data.oldRotate
3.9K31编辑于 2023-03-07 - 来自专栏Unity3D
【Unity3D】鼠标拖拽物体实现任意角度自旋转
Unity3d鼠标拖拽物体实现任意角度自旋转 主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向（x轴）移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向 （y轴）移动增量 通过勾股定理获取拖拽长度，长度越长旋转越快 在project setting--Input 可以设置 代码分享 UnityEngine; System.Collections; public 6f; //旋转速度// private float tempSpeed; //阻尼速度// private float axisX = 1; //鼠标沿水平方向移动的增量// onDrag) { tempSpeed = speed; } else { if (tempSpeed > 0) { tempSpeed -= speed * 2 { // this.transform.Rotate(new Vector3(axisY, axisX, 0) * Rigid(), Space.World); //这个是是按照之前方向一直慢速旋转
5.4K30发布于 2020-03-11 - 来自专栏计算机视觉CV
图像旋转：getRotationMatrix2D详解--无损失旋转图片
最终实现效果： [test.png] [test_rotated.jpg] 1. getRotationMatrix2D详解 opencv的getRotationMatrix2D函数可以获取旋转变换矩阵 我们先对一个点基于原点进行旋转，如下图，将V1点逆时针旋转\theta角度到V2点，缩放比例我们先假定为1. 计算旋转变换矩阵 记V1 =（x1, y1）,V2 = (x2, y2) 那么 x1 = cosa y1 = sina x2 = cos(a + \theta) = cos\theta*cosa - sina ，如果是需要绕任意点（tx，ty）旋转，我们可以 1.先把旋转点平移到原点 2.然后进行以上旋转操作 3.按1的逆操作平移回去 就可以得到绕任意点旋转点变换矩阵： [g1bYCHmjHXy6qA3FtJjGyw 2. warpAffine操作 2.1 获取M矩阵 得到变换矩阵M，对图像每个点进行M变换就可以得到旋转后的图像，这一步可以通过opencv的warpAffine得到。
26.4K122发布于 2021-03-06 - 来自专栏网页前端
2d转换缩放与旋转
## 本章将介绍简单的2d缩放的实现，并且举几个简单的应用案例。 No.1缩放属性 ? ? No.2旋转属性 transform: rotate(45deg); 上代码，可以去vscode来打一打代码。
70610发布于 2021-04-13 - 来自专栏游戏开发之旅
2D图像中点的旋转
2D图像中点的旋转 先从向量内积说起，向量a = (x1, y1)，b = (x2, y2) a▪b = <a,b>= |a||b|cosθ = x1x2+ y1y2 几何表示 ? a.b = |a|cosθ|b| 如果b为单位向量，|b|=1，那么向量a,b的内积就是向量a在向量b方向上的投影 点的逆时针旋转可以看做是以原点为起点的向量绕原点逆时针旋转；更进一步，保持向量不动， 让坐标轴顺时针旋转θ。 坐标轴旋转，新的坐标轴可以表示为 x1 = (cosθ, -sinθ), y1 = (sinθ, cosθ) 这里用单位向量表示，只是指示一下新坐标轴的方向而已。 顺时针旋转可以同理求得，这里不在详述。 同样的思考方式可以应用在PCA理解上
1.3K30发布于 2019-12-02 - 来自专栏青蛙要fly的专栏
图片操作系列 —（2）手势旋转图片
这次我们继续来看第二个操作，那就是如何用手势来旋转图片。 所以我们本文我们一共要实现二个功能： 根据二个手指头的旋转来使图片跟着旋转 当二个手指头放开后，图片会自动回归到合适的位置。 = 2) { return false; } //获取二个手指头的中心点的X与Y值，等会选择二个手指头的中心点作为旋转的中心 int pivotX = (int 也许有人就会问了,你这边按照二个手指的中点作为旋转中心去旋转，岂不是会旋转超出原来的图片的边界。 然后根据这个当前最终图片的变化角度来进行适当的旋转，让其旋转到合适位置。 我们用Math.atan2(v[Matrix.MSKEW_Y], v[Matrix.MSCALE_X])来获取弧度。再用Math.toDegrees来获取相应的最终图片的旋转的度数。
4.3K40发布于 2018-08-29 - 来自专栏前端 TS/JS 核心讲堂
js拖拽-javascript拖拽缩放示例
❌ 移动端兼容性差方式 2：基于 mousedown mousemove mouseup 的自定义拖拽（推荐用于 UI 组件内部拖拽）✅ 完全可控，性能高✅ 可精细控制动画、边界、吸附等效果✅ 兼容性极佳 （包括移动端 touch 事件）❌ 需手动处理所有逻辑本文重点讲解方式 2 —— 这也是你在表格、看板、列表排序中最常用的实现。 “抓”在点击点 在 document 上监听 mousemove/mouseup 避免鼠标移出元素后失效三、高级拖拽：可拖拽、可冻结、可编辑、可排序如我早期另一篇文章-用JS/HTML/CSS 构建可拖拽 pointer; } button:hover { background: #40a9ff; } </style> </head> <body> <h2> 拖拽缩放示例（逻辑/数据/展现分离）</h2>
15421编辑于 2026-04-01来自专栏韩曙亮的移动开发专栏【CSS3】CSS3 2D 转换 - rotate 旋转 ④ ( 旋转案例 )
一、需求分析 给定一个 盒子模型 , 鼠标移动上去后 , 通过旋转的方式 , 出现一个 新的 盒子模型 布局 , 旋转上去后 , 新的布局会覆盖住之前的 盒子模型 ; 实现原理如下 : 在绘制的时候 相关的属性 : 旋转中心点 , 默认的初始角度 , 旋转的动画持续时间 ; /* 设置以左下角为中心旋转 */ transform-origin: left IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3 2D /* overflow: hidden; */ } div::before { content: "2D 一半时的样式 : 旋转完成后的样式 :
1.1K20编辑于 2023-10-11拖拽RecyclerView
挥别第三方库：原生ItemTouchHelper掌控RecyclerView拖拽与侧滑原始译文参考：开发技术前线（原作者：PaulBurke/译者：objectlife）如果你还在使用残破累赘的第三方库 （比如早期的SwipeToDismiss）或者深陷于手写GestureDetector和onInterceptTouchEvent的泥沼来处理列表的侧滑删除和长按拖拽，那你需要立刻停下。 不仅仅是手势的剥离，它直接掌控了拖拽中悬浮视图的z-轴阴影（elevation抬升）、回位动画轨迹（dropsettling）甚至支持自定义约束方向。
6110编辑于 2026-04-25来自专栏coding个人笔记js拖拽
开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。 先看一下之前写的： 如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。
6.9K30发布于 2020-04-24来自专栏用户7873631的专栏js拖拽
/*js拖拽逻辑: 第一：为什么要定位? 因为 ? 往左往上left top要定位的哈 第二：为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的. 鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <!
6.1K41发布于 2020-10-30来自专栏用户7873631的专栏js拖拽
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;;list-style: none;} #div{width: 100px;height: 100px;background: black;position: absolute;} </style> </head> <body> asdj
6.6K10发布于 2020-10-28来自专栏全栈程序员必看JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div（1）解决问题，当在拖拽事件所在的页面按下键盘的ctrl+A全选后，再去拖拽div，浏览器会默认去搜索网页中的内容，拖拽功能就会失效，（搜索网页内容是浏览器的默认行为，所以要想不发生这种情况 例如： btn.onclick = function(){ alert(1); }; btn1.onclick = function(){ alert(2); }; 可以将setCapture()方法用到鼠标拖拽div的例子中，但是注意，在给mousedown事件中，调用的box的**setCapture()方法之后，会有一个问题，就是当鼠标松开之后，事件还会一直被捕获 优化拖拽代码 在之前拖拽div的代码中，如果要拖拽多个内容，就需要重新为一个内容绑定事件，所有的操作都要重新写一遍，所以对之前的代码进行了优化： 定义函数，将拖拽的方法封装起来，方便调用，要拖拽哪个元素
3.3K20编辑于 2022-08-24</body> </html> <script> window.onload = function () { // 获取拖拽的节点 let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候来自专栏编程内马尔原生JS拖拽
IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS拖拽 class="box" id="drag">
16K40编辑于 2022-11-15 - 来自专栏sofu456
winform 文件拖拽
winform 重写函数，而不是控件委托事件 protected override void OnDragDrop(DragEventArgs drgevent) protected override
2.3K20发布于 2020-10-28 - 来自专栏向治洪
可拖拽gridview
(); mOffset2Top = (int) (ev.getRawY() - mDownY); mOffset2Left = (int) ( + mOffset2Left; mWindowLayoutParams.y = downY - mPoint2ItemTop + mOffset2Top - mStatusHeight + mOffset2Left; mWindowLayoutParams.y = moveY - mPoint2ItemTop + mOffset2Top - mStatusHeight mPoint2ItemTop 手指按下的点到该Item的上边缘的距离，如上图的1号线 mPoint2ItemLeft 手指按下的点到该Item的左边缘的距离，如上图的2号线 mOffset2Top DragGridView item显示出来，这样子就实现了GirdView的拖拽效果啦，接下来我们来使用下我们自定义可拖拽的GridView吧，先看主界面布局，只有我们自定义的一个DragGridView <RelativeLayout
5.5K50发布于 2018-01-29 - 来自专栏万丈高楼平地起
table表格拖拽
sortable //安装sortablejs npm install sortablejs --save //引用 sorttablejs import Sortable from 'sortablejs' 2. (tbody, { animation: 150, //动画 handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽) filter /** * 在做列拖拽功能时发现问题：表头位置错乱，但是内容列正常 * 于是我给el-table绑定key，每次拖拽结束改变key触发表格重新渲染 * 但引出新的问题：表格重渲拖拽事件丢失，导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例，功能正常 * **/ this.key del: "删除", }, { roleId: 20002, roleName: "咯阿时候2"
3.4K20编辑于 2022-03-09 - </transition-group> </draggable> 2个组件左右结构 evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex) console.log(this.colors); } }, mounted () { //为了防止火狐浏览器拖拽的时候以新标签打开 ghostClass{ opacity: 1; } .bottom{ width: 200px; height: 50px; position: relative; background: blue; top:2px ; left: 2px; transition: all .5s linear; } </style> options配置如下 var sortable = new Sortable(el, { group来自专栏全栈程序员必看
vuedraggable自由拖拽_vue可视化拖拽编辑
最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入 首先在 :key="element.text" class = "drag-item"> {{element.text}}
2.6K40编辑于 2022-09-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号