js 根据鼠标拖动(或者手机长按)旋转

作者 : 开心源码 本文共992个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共89人阅读
由于没有搜索到,所以 自己写了一个

废话不多说,直接上效果图

旋转效果.gif

废话不多说,直接上代码,顺便给个数学的公式图

.png

将公式变化为js代码

            //得到 向量1            var x1 = (beginPointX - bgCenterX);            var y1 = (beginPointY - bgCenterY);            //得到 向量2            var x2 = (event.center.x - bgCenterX);            var y2 = (event.center.y - bgCenterY);            //计算cos =(x1x2+y1y2)/[√(x12+y12)*√(x22+y22)]            var cos =( x1 * x2 + y1 * y2) /( Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2)) * Math.sqrt(Math.pow(x2, 2) + Math.pow(y2, 2)) );            // 弧度            var radina = Math.acos(cos);            // 角度            var angle =  180 / (Math.PI / radina);

控件的需求是根据鼠标拖来旋转,所以使用到了Vue-touch 控件的 pan 事件,而后控件的大小固定宽高300px, 完整的控制代码

  panmove:function(event){            //得到 向量1            var x1 = (beginPointX - bgCenterX);            var y1 = (beginPointY - bgCenterY);            //得到 向量2            var x2 = (event.center.x - bgCenterX);            var y2 = (event.center.y - bgCenterY);            //计算cos =(x1x2+y1y2)/[√(x12+y12)*√(x22+y22)]            var cos =( x1 * x2 + y1 * y2) /( Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2)) * Math.sqrt(Math.pow(x2, 2) + Math.pow(y2, 2)) );                        var radina = Math.acos(cos);            console.log(radina);            // 角度            var angle =  180 / (Math.PI / radina);            //假如在中线左边 就需要加 180度            if(event.center.x <150){                angle = 180 + (180 - angle);            }            this.styleObject.transform =  'rotate(' + angle + 'deg)';                    },

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » js 根据鼠标拖动(或者手机长按)旋转

发表回复