Question

您好我正在尝试编写一个简单的程序以获得乐趣..但是我无法获得旋转角度并将其转换为针跟随crusor后针落入的数字。我让针跟随里面表盘。我包含了我的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中根据两点获得角度的方法。它有点冗长......主角码位于底部：

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是弧度/角度转换的常数180 / PI。Game.Util.fixDirection确保角度在0到360之间。hyp参数是if的可选参数已经知道右三角形的连字符，以节省CPU周期）

跟随光标的针的旋转角度

1 个答案: