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 


作者：貓爪
連結：