javascript - 针跟随光标旋转的 Angular

Question

您好，我正在尝试编写一个简单的程序来娱乐。但是我无法获取旋转 Angular 并将其转换为针跟随光标后着陆的数字。我让针跟随在里面表盘。我包括我的 javascript 代码。有人可以帮我吗？

function alienEye(x, y, size, append, img, theNum) {
    var self = this;
    var i = 0;
    var myintID;
    this.x = x;
    this.y = y;
    this.size = size;

    //Create the Eye Dom Node using canvas.
    this.create = function create(x, y, size, append) {
        //Create dom node
        var eye = document.createElement('canvas');
        eye.width = size;
        eye.height = size;
        eye.style.position = 'relative';
        eye.style.top = y + 'px';
        eye.style.left = x + 'px';
        document.getElementById(append).appendChild(eye);
        //Get canvas
        canvas = eye.getContext("2d")



        radius = size / 2;

        //draw eye
        //canvas.beginPath();
        //canvas.arc(radius, radius, radius, 0, Math.PI*2, true); 
        //canvas.closePath();
        //canvas.fillStyle = "rgb(255,255,255)";
        //canvas.fill();
        //draw pupil
        //canvas.beginPath();
        //canvas.arc(radius, radius/2, radius/4, 0, Math.PI*2, true); 
        //canvas.closePath();
        //canvas.fillStyle = "rgb(0,0,0)";
        //canvas.fill();

        //var img = new Image();

        canvas.drawImage(img, - 20, - 20, 100, 100);


        img.onload = function () {
            canvas.drawImage(img, - 20, - 20, 100, 100);
        }

        img.src = 'Stuff/needle.png';


        return eye;
    }
    //Rotate the Dom node to a given angle.
    this.rotate = function (x) {
        this.node.style.MozTransform = "rotate(" + x + "deg)";
        this.node.style.WebkitTransform = "rotate(" + x + "deg)";
        this.node.style.OTransform = "rotate(" + x + "deg)";
        this.node.style.msTransform = "rotate(" + x + "deg)";
        this.node.style.Transform = "rotate(" + x + "deg)";

    }


    this.letsBegin = function () {
        //Update every 100 miliseconds
        myintID = setInterval(function () {
            //Math!
            angleFromEye = Math.atan2((cursorLocation.y - self.my_y), cursorLocation.x - self.my_x) * (180 / Math.PI) + 90;
            //Rotate
            self.rotate(angleFromEye);
            //Refresh own position every 25th time (in case screen is resized)
            i++;
            if (i > 25) {
                self.locateSelf();
                i = 0;
            }

        }, 20);
    }

    this.letsEnd = function () {
        clearInterval(myintID);
    }


    this.locateSelf = function () {
        this.my_x = this.node.offsetLeft + (this.size / 2);
        this.my_y = this.node.offsetTop + (this.size / 2);
        //If it has offsetParent, add em up to get the objects full position.
        if (this.node.offsetParent) {
            temp = this.node;
            while (temp = temp.offsetParent) {
                this.my_x += temp.offsetLeft;
                this.my_y += temp.offsetTop;
            }
        }
    }

    //Call the node create function when the AlienEye Object is created.
    this.node = this.create(x, y, size, append);
    this.locateSelf();
    //Now the node has been added to the page, lets figure out exact where
    //it is relative to the documents top.

    //Get the basic position



    var cursorLocation = new function () {
            this.x = 0;
            this.y = 0;
            //This function is called onmousemove to update the stored position
            this.update = function (e) {
                var w = window,
                    b = document.body;
                this.x = e.clientX + (w.scrollX || b.scrollLeft || b.parentNode.scrollLeft || 0);
                this.y = e.clientY + (w.scrollY || b.scrollTop || b.parentNode.scrollTop || 0);
            }

            //Hook onmousemove up to the above update function.
            document.onmousemove = function (e) {
                cursorLocation.update(e);
            };

Answer 1

如果这就是您的全部代码，您所需要做的就是调用函数。

我设法通过将其添加到脚本底部来让它运行(body 元素的 ID 为“body”):

var img = new Image();
img.src = "Stuff/needle.png";

var eye = new alienEye(40, 40, 50, "body", img, 20);
eye.letsBegin();

编辑:

以下是我如何根据 GameAPI 中的两个点获取 Angular 。这有点冗长......主要 Angular 代码在底部:

getAngle        : function(point1X, point1Y, point2X, point2Y, hyp) {


            //This function uses the arcsine to calculate the angle between
            //the points, but only if necessary.

            //This function includes some shortcuts for common angles.


            if(point1Y == point2Y) {
                if(point1X < point2X)   return 0;
                else                    return 180;
            }

            if(point1X == point2X) {
                if(point1Y < point2Y)   return 90;
                else                    return 270;
            }


            var xDist = point1X - point2X;
            var yDist = point1Y - point2Y;


            if(xDist == yDist) {
                if(point1X < point2X)   return 45;
                else                    return 225;
            }
            if(-xDist == yDist) {
                if(point1X < point2X)   return 315;
                else                    return 135;
            }


            if(hyp==null)
                hyp = Math.sqrt( xDist*xDist  +  yDist*yDist );


            var D_TO_R = this.D_TO_R;


            if(point1X<point2X) {
                //console.log(Math.round(-Math.asin((point1Y-point2Y)/hyp) * D_TO_R)); 
                return Game.Util.fixDirection(-Math.asin((point1Y-point2Y)/hyp) * this.D_TO_R);
            } else {
                //console.log(Math.round(Math.asin((point1Y-point2Y)/hyp) * D_TO_R + 180)); 
                return Game.Util.fixDirection(Math.asin((point1Y-point2Y)/hyp)      * this.D_TO_R+180);
            }

        }

(D_TO_R 是用于弧度/Angular 转换的常量 180/PI。Game.Util.fixDirection 确保 Angular 在 0 到 360 之间 hyp 参数是一个可选参数，如果直 Angular 三 Angular 形的斜边已知，可以节省 CPU 周期)