第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

js 根據(jù)鼠標拖動(或手機長按)旋轉

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

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


旋转效果.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)';            
        },



作者:猫爪
链接:https://www.jianshu.com/p/2b1d0b5fae88


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消