jsマウスの回転度数および順逆方向の判断の詳細

6337 ワード

マウスがある点を中心に時計回りにn度回転した後に何をするか、反時計回りにn度回転した後に何をするかを判断する必要がある.
まず,中心点,開始点,終了点の3点を得ることができ,3点の座標を知ることができ,余弦定理により回転角度を求めるとともに,3辺のベクトルを知ることができ,フォーク乗算により方向が時計回りか反時計回りかを求めることができる.
演算コードは次のとおりです.
 1 var pointA = {
 2     X: 500,
 3     Y: 300
 4 };
 5 var pointB = {};
 6 var pointC = {};               // A,B,C       ,   ,     
 7                                        //                   
 8 var typeMouse = false;
 9 var allA = 0;                     //            
10 $(document).on('mousedown', function(e) {
11     pointB.X = e.pageX;
12     pointB.Y = e.pageY;
13     typeMouse = true;          //       
14 });
15 $(document).on('mousemove', function(e) {
16     if(typeMouse) {
17     pointC.X = e.pageX;
18     pointC.Y = e.pageY;         //        
19     var AB = {};
20     var AC= {};
21     AB.X = (pointB.X - pointA.X);
22     AB.Y = (pointB.Y - pointA.Y);
23     AC.X = (pointC.X - pointA.X);
24     AC.Y = (pointC.Y - pointA.Y);                   //     AB,AC       
25     var direct = (AB.X * AC.Y) - (AB.Y * AC.X);           // AB AC              
26     var lengthAB = Math.sqrt( Math.pow(pointA.X - pointB.X, 2) +
27     Math.pow(pointA.Y - pointB.Y, 2)),
28     lengthAC = Math.sqrt( Math.pow(pointA.X - pointC.X, 2) +
29     Math.pow(pointA.Y - pointC.Y, 2)),
30     lengthBC = Math.sqrt( Math.pow(pointB.X - pointC.X, 2) +
31     Math.pow(pointB.Y - pointC.Y, 2));
32     var cosA = (Math.pow(lengthAB, 2) + Math.pow(lengthAC, 2) - Math.pow(lengthBC, 2)) /
33     (2 * lengthAB * lengthAC);                 //            
34     var angleA = Math.round( Math.acos(cosA) * 180 / Math.PI );
35     if (direct < 0){
36         allA -= angleA;                       //
37     } else {
38         allA += angleA;                       //
39     }
40     pointB.X = pointC.X;
41     pointB.Y = pointC.Y;                   //
42     }
43 });
44 $(document).on('mouseup', function(e) {
45     typeMouse = false;
46 });

 
転載先:https://www.cnblogs.com/passerma/p/10875793.html