I have a known rect (grey) the outer parent element that contains an image element (orange). It's overflow is hidden.
I want to calculate the padding required to allow the image element(known width and height) to be rotated to a known angle (for this e.g. lets say 30 degrees).
It has proven to be relatively easy to calculate this if i were able to allow the parent(grey) element to expand to accommodate, but i can't.
create list of 4 image edge points p0,p1,p2,p3
rotate them the same way as the image will be rotated
double a=x-x0,b=y-y0,c,s;
c=cos(alfa);
s=sin(alfa);
x=a*c-b*s+x0;
y=a*s+b*c+y0;
x,y is the point
x0,y0 is center of rotation
alfa is the rotation angle
compute min,max of rotated points x,y coordinates this gets you the bounding box
summary
let (x0,y0) be the original image gray box size (X,Y) from your image
let (x1,y1) be the original image size (xa,xb) from your image
let (x2,y2) be the rotated image bounding box size (xmax-xmin,ymax-ymin) from bullet 3
if ((x2<=x0)&&(y2<=y0)) the image fits so stop
let mx=x0/x2 and my=y0/y2 be the needed scales to fit the image
do not zoom:
if (mx>1.0) mx=1.0;
if (my>1.0) my=1.0;
now select the correct scale m
m=mx; if (m>my) m=my;
now the m holds the scale needed to apply on rotated image to fit the gray area
do not forget to center the image ...
Related
I have two colored rectangles, both being represented by a 2D array that directly corresponds to their coordinates(ex. [0][0] is the same as (0,0)). Things such as the width, height, and origin of each rectangle are known.
As of now, I want their colors to "blend" in the area they intersect. Detecting if a point is within both rectangles is easy enough, and I have the point's coordinates relative to the origin of my first rectangle as it is the one I am iterating through for color blend checking.
My problem is getting the point's coordinates relative to the second rectangle so I may get that rectangle's color at that point. Here is a visual example of what I mean.
Visual representation of the problem. The black dot is a point on both Rect 1 and 2.
Note that relative to the canvas, the top left corner of Rect 1 is always considered (0,0), and Rect 2 will always appear "on top" of Rect 1.
My idea is to do a simple math equation to get the X and Y coordinates of the point on Rect 2, but so far it has not worked out.
I am using Fabricjs to create a crop image functionality. I am rendering an image on a canvas and the crop area on that image can be rotated. Before rotating, provided the left offset, top offset, width and height values (bounding rect) and angle , how can I calculate the bounding rect values before doing actual rotation?
Images below show the crop area before and after rotating.
I was trying to have a wheel on a canvas with multiple equal size segments similar to wheel of fortune. On the circumference of the wheel, i.e arc of each segment, I want to have an image attached that needs to rotate with wheel.
I was able to draw multiple images, but they have be positioned with respect to (0, 0) (top-left) of the canvas only. Is there any way to position them relative to some point instead of the origin? In my case the centre of the circle (300, 300)?
You can translate the origin of your canvas by calling .translate(x, y) method of the canvas drawing context; in your example both x and y would be 300.
See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations for more information on canvas transformations.
It seems that if you scale a set in raphael, it will scale the elements inside, but not translate them proportionally. So for instance if I have two squares next to each other in my set, and I scale the set up, the squares begin overlapping each other instead of the second square moving over as it resizes in order to stay right next to the first square. Is there a way to get this behavior in raphael?
As Ian mentioned, the key is to set the X,Y origin for the scale. By default, when you scale an element, it uses the geometric center of the element as the origin to scale from:
path.transform('S1.5'); // Scale 1.5x in both axis
So if you scale a set of objects, it will scale each individual element from it's own individual geometric center.
But you can optionally set an X and Y origin for the scale:
path.transform('S1.5,1.5,0,0'); // Scale 1.5 in X and 1.5 in Y, with origin set at the Paper's 0,0 as the origin.
Therefore, if you have a set of elements, and all of them are scaled using the Paper's 0,0 as their scale origin, then they will all scale proportionally to each other.
I am trying to make an image resizer and cropper, but am having trouble with resizing it from a desired point.
Currently, you can resize (just changing the with+height of an <img> element) and move around the image (offsetting the top and left margins of the <img> element). The problem is once you move it and resize it again, it does so from the center of the image. I would like it to resize relative to the center of the crop window.
Here is an image of what I currently have (top) and what it should be like (bottom):
http://i.imgur.com/eAE4IEF.jpg
I have been unable to figure out the math of how to resize it and then move it so the origin is not in the center of the image, but in the center of the red window.
I would appreciate any help with this.
This is essentially scaling an individual point inside the image (the center of the crop box) by the given scale factor, which involves multiplying each of the coordinates of the point by that factor.
new_center_x = old_center_x * new_image_width/old_image_width
new_center_y = old_center_y * new_image_height/old_image_height
http://jsfiddle.net/jDXHz/5/
You can then shift both the image and the box back by the difference between the new and old position to keep the box stationary while the image scales around it.