开发者

How to position an image inside a display window

I am trying to draw a image and it will be rotated in different angles. After rotation the image 开发者_Go百科should be positioned in a display window according to the size(). I tried this using translate(), but i couldn't able to calculate the dynamic coordinates according to the angle in which the image has drawn. My code looks like this

void setup() 
{ 
  size(600, 600); 
  translate(width/2, height/2); 
  drawTriangles(); 
} 

void drawTriangles() 
{ 
   float deg = 180; 
   float rad = radians(deg); 
   rotate(rad); 
   shapes(5, 15, 75, 55); 
} 

void shapes(int edges, float cx, float cy, float r) 
{ 
  float angle = 360.0 / edges; 
  beginShape(); 
  for (int i = 0; i < edges; i++) 
  { 
    vertex(cx + r * cos(radians(angle * i)), cy + r * 
sin(radians(angle * i))); 
  } 
  endShape(CLOSE); 
} 

How to make the image viewable within a display window?


Before you rotate your image, find out what the image corner points are. Let's call them {C1,C2,C3,C4}, and store the coordinates in an int[8]:

PImage myimage = ...;
int w = myimage.width;
int h = myimage.height;
int[] coordinates = {0,0,  w,0,  0,h,  w,h};

After rotating the image, these points will now look like:

C1.x' = C1.x * cos(angle) - C1.y * sin(angle);
C1.y' = C1.x * sin(angle) + C1.y * cos(angle);
...

So in code this looks like:

// buffer the "current" translate/rotate/scale values
pushMatrix();

// rotate the view
rotate(angle);

// determine the coordinates for the corners of the rotated image
int[] rotated_coordinates = new int[8];
for(int c=0; c<8; c+=2) {
  rotated_coordinates[c]   = coordinates[c]*cos(angle) -
                               coordinates[c+1]*sin(angle);
  rotated_coordinates[c+1] = coordinates[c]*sin(angle) +
                               coordinates[c+1]*cos(angle); }

Now, in order to fit your image to the window dictated by size(), you want to reposition and scale the image so that all four corner points touch the edges of your window; we can do this as follows:

// determine the bounding extremities for the rotated image
// (replace C1.x' etc. with the rotated_coordinates[] entry)
int minx = min(min(C1.x',C2.x'),min(C3.x',C4.x'));
int miny = min(min(C1.y',C2.y'),min(C3.y',C4.y'));
int maxx = max(max(C1.x',C2.x'),max(C3.x',C4.x'));
int maxy = max(max(C1.y',C2.y'),max(C3.y',C4.y'));

// translate so that the minx/y are on the x=0/y=0 lines
translate(-minx, -miny);

// scale so that the maxx/y are on the x=width/y=height lines
scaleX(width/(maxx-minx));
scaleY(height/maxy-miny));

// draw image
image(myimage,0,0,width,height);

// restore the previous translate/rotate/scale values
popMatrix();

So you're doing rotation both of the view using rotate(), and you manually track the result of that rotation in terms of how this modifies the image corner coordinates so that you can get the placement right.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜