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

因为没有搜索到,所以 自己写了一个

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


旋转效果.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)/[√(x1²+y1²)*√(x2²+y2²)]
            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)/[√(x1²+y1²)*√(x2²+y2²)]
            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)';            
        },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,086评论 25 708
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • 也许我属于执着无悔的那一群,以飘零做为最后归宿。 漂浮于空气中,漂泊在旅程里 将生命时而飘洒、时而飘散、时而飘落 ...
    杳煦阅读 174评论 0 0
  • 这几天看了一个消息,陈翔六点半的腿腿姑娘被杀了,我不是粉丝,六点半的视频也只是偶尔看,但是听到这个消息还是挺不可思...
    喜欢牛奶的鱼儿阅读 793评论 1 5