计算画布点的x，y位置 [英] calculate the x, y position of a canvas point

问题描述

我试图在html5和javascript中学习一些画布，我想创建这些典型的Illustrator太阳光线：

I'm trying to learn some canvas in html5 and javascript and I want to create those typical Illustrator sun rays:

但我的问题是，我想自动化并使其完全

But my problem is that I want to automate it and make it full screen.

要计算中间点的坐标并不困难，这是外边的点，我似乎不能抓住。

To calculate the coordinates of the points in the middle isn't hard, it's the outer points that I cant seem to get a grip on.

K，所以这是我得到的。
问题在于为外部坐标创建数组的for循环。

K, so this is what I got. The problem lies in the for-loop for creating an array for the outer coordinates.

所以它从屏幕中心开始计算。
如果它是第一个点（我们现在忽略内部点），它需要x_coordinate变量（它是屏幕的水平中心），并将width_between_rays除以2（因为我想模拟上面的图片

So it starts calculating from the center of the screen. If it's the first point (we ignore the inner points for now) it takes the x_coordinate variable (which is the horizontal center of the screen) and adds the width_between_rays divided by two (because I want to mimic the picture above with some space between the two upper rays).

其余的点被检查，如果他们被两分，看看是否应该添加width_between_rays之间（应该是偏移或某些东西）或width_of_rays到最后一点cordinates。

The rest of the points are checked if they are divided by two to see if I should add the width_between_rays (should probably be offset or something) or the width_of_rays to the last points cordinates.

这看起来很直接，但因为窗口大小不是一个固定的大小，我需要一些计算其中点应该是，如果，例如;点的位置在屏幕的宽度/高度之外。
所以我的计算方法不工作（我想）。

Well this seems pretty straight forward but since the window size isn't a fixed size I need some way of calculating where the point should be if, for example; the position of a point is outside the width/height of the screen. So my way of calculating this doesn't work (I think).

无论如何，有人（明显比我聪明）方向？

Anyways, can someone (who's obviously smarter than me) point me in the right direction?

function sun_rays(z_index, element, color, number_of_rays, width_of_rays, width_between_rays) {
        // Start the canvas stuff
        var canvas = document.getElementById(element);
        var ctx = canvas.getContext("2d");
        console.log();
        ctx.canvas.width  = $(window).width();
        ctx.canvas.height = $(window).width();
        ctx.fillStyle = color;

        // calculate the window size and center position
        var window_width = $(window).width();
        var window_hight = $(window).height();
        var x_coordinate = window_width / 2;
        var y_coordinate = window_hight / 2;

        // create an array for the center coordinates
        var center_coordinate_array = new Array();
        for(i=0; i < number_of_rays; i++){
            center_coordinate_array[i] = new Array(x_coordinate, y_coordinate);
        }

        // create an array for the outer coordinates
        var outer_coordinate_array = new Array();
        for(i=1; i == number_of_rays*2; i++){

            if(i == 1) {
                // X
                var last_outer_x_coordinate = x_coordinate + (width_between_rays/2);
                // Y
                if(last_outer_x_coordinate < window_width) {
                    last_outer_y_coordinate = last_outer_y_coordinate;
                } else {
                    $x_coordinate_difference = last_outer_x_coordinate - window_width;
                    last_outer_y_coordinate = x_coordinate_difference;
                }

                center_coordinate_array[i] = new Array(last_outer_x_coordinate, last_outer_y_coordinate);
            } else {
                if(i % 2 == 0) {
                    // X
                    last_outer_x_coordinate = last_outer_x_coordinate + width_of_rays;
                    // Y
                    //calculate the y position

                    center_coordinate_array[i] = new Array(last_outer_x_coordinate);
                } else {
                    // X
                    last_outer_x_coordinate = last_outer_x_coordinate + width_between_rays;
                    // Y
                    //calculate the y position

                    center_coordinate_array[i] = new Array(last_outer_x_coordinate);
                }
            }

        }
    }

推荐答案

看起来你应该使用trig函数来做这样的事情。

It seems like you should use the trig functions to do something like this.

var coordinate_array = [];
var xCoord = 0;
var yCoord = 0;
var angleIncrement = 15;
var i = 0;

//iterate over angles (in degrees) from 0 to 360
for (var theta = 0; theta < 360; theta += angleIncrement) {
    //angle is in sector from bottom right to top right corner
    if (theta >= 315 || theta <= 45) 
    {
        xCoord = $(window).width();//point on right side of canvas
        yCoord = abs($(window).width()/2 * tan(theta));
        yCoord = tranformY(theta,yCoord);
    } 
    //angle is in sector from top right to top left corner
    else if (theta > 45 && theta <= 135) 
    {
        yCoord = 0; //top is zero 
        xCoord = abs($(window).height()/2 * tan(theta));
        xCoord = transformX(theta, xCoord);
    } 
    //angle is in sector from top left to bottom left corner
    else if (theta > 135 && theta <= 225) 
    {
        xCoord = 0; //left edge on a canvas is zero
        yCoord = abs($(window).width()/2 * tan(theta);
        yCoord = transformY(theta, yCoord);
    }
    //angle is in sector from bottom left to bottom right corner
    else // theta > 225 && theta < 315
    {
        yCoord = $(window).height();
        xCoord = abs($(window).height()/2 * tan(theta));
        xCoord = transformX(theta, xCoord);
    }
    coordinate_array[i++] = new Array(xCoord, yCoord);        
}

//Transform from cartesian coordinates to top left is 0,0
function tranformY(theta, y)
{
  var centerYCoord = $(window).height()/2;
  //if angle falls in top half (Quadrant 1 or 2)
  if(theta > 0 && theta < 180)
  {
    return centerYCoord - y;
  }
  elseif(theta > 180 && theta < 360)
  {
    return centerYCoord + y;
  }
  //coord falls on 0/360 or 180 (vert. median)
  return centerYCoord;
}

//Transform from cartesian coordinates to top left is 0,0
function transformX(theta, x)
{
  var centerXCoord = $(window).width()/2;
  //if angle falls in right half (Quadrant 1 or 4)
  if(theta > 270 || theta < 90)
  {
    return centerXCoord + x;
  }
  elseif(theta > 90 && theta < 270)      
  {
    return centerXCoord - x;
  }
  //coordinate falls on 270 or 90 (center)
  return centerXCoord;
}

 //now draw your rays from the center coordinates to the points in coordinate_array
 //NOTE: This code will need to be cleaned up - I just wrote it in the textbox.

这篇关于计算画布点的x，y位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！