Suppose I have some arbitrary input image with width w1 and height h1. I want to rotate this image all the way around 360 degrees back to the starting position. However, if the image is of anything except a circle, then the edges of the image will be clipped if the canvas it is drawn onto remains at size w1 by h1.
What I need then is to determine the canvas size (width w2 and height h2) that can be used for all rotated versions of the input image. I know that w2 == h2, and thus the desired canvas size is a square, because it is obvious that we are rotating something about a center point, and the final image (after 360 rotations) is essentially a circle.
The other thing to consider is that objects such as squares will have corners that will stick out, so just using the max value of width or height for both dimensions also does not work.
One solution I have come up with is to create the canvas larger than I need (for example by setting w2 and h2 to max(w1, h1) * 2, rotating everything, and then trimming all the transparent pixels. This is not very efficient and I would much rather be able to calculate the tightest bounding box upfront.
This is a geometry question. You essentially want to find the diameter (d) of a circle that would inscribe your original canvas and then w2 = h2 = d
The diameter of such a circle would be √(w1^2+h1^2)
So w2 = h2 = √(w1^2+h1^2)
Also, to avoid clipping, you might want to take the ceiling of that result rather than rounding.
If the image being rotated in a square, you'd have to make the canvas height and width the same length as the hypotenuse.
w = h = sqrt(h^2 + w^2)
(I do not know actionscript)
However, if the image you have is not in a square, you'll essentially have to find the point farthest away from the center...
PS: It's late and I'm rambling, so I'm sorry if this might be wrong.
Your canvas need to be a square.
If you are going to rotate a body like the green figure around any point (in this example Point A), the side of the square is the double of the distance to the most distant point to A in the body.
Related
Consider a 4x4 pixel HTML canvas element.
The coordinate system spans from (0,0) in the top left to (4,4) in the bottom right.
This represents a 5x5 grid.
It seems like the canvas squeezes one extra pixel in each dimension, without changing the width or height. How do I account for this if I want to draw precise pixels on an NxN canvas?
The coordinates (x,y) don't index pixels as if the canvas is a 2-d array.
In this case the region between grid lines does coincide with single pixels, but if we treat the canvas as a pixmap, then a pixel is the space between gridlines.
To draw pixel (i, j) with top-left corner at (x,y), do
canvas_context.fillRect(x, y, 1, 1);
Scene2d's setScale(float) method does scale the actor and all of it's children appropriately but is not updating the width / height or the x / y properties, causing everything to be out of position. Is this intended and if it is, is there a good work around? Setting the size manually after scaling resizes the children too, making everything too small / big.
Of course it might be possible I am not understanding how it works but I am stuck on this for a while now and can't seem to find a solution.
Edit: Turns out it works as intented. Here is a screenshot of my problem
Green: actual element
Orange: original width/height,
Silver: scaled width/height,
Silver dot: x and y of the element
Blue dot: origin, manually set after setting x and y to wished position
This is the outcome after scaling, removing it from one group and adding it to another, then moving the element to its position. The silver rectangular is where the green element should be. I get the wished results when the element is unscaled / in original size.
As you can see, the actor / group scaled perfectly and the visual / drawn result is also the one expected. However, the actual element is offset, messing everything up
Thanks for your help.
I have begun working with SVGs and have (quickly) hit a road block.
I am trying to find a way to and a border around a rectangle but for it to only "expand" inside. Currently I am just drawing a path around the rectangle and using stroke width. This has the desired effect of showing a "filling" animation when used with css transition. But I don't want it to expand outside of the bounds of the rectangle. See images
with path
As you can see the stroke width is going in both directions, outside of the bounding rectangle and inside. How would I get rid of the outside bit?
Draw the <rect> within an inner <svg> element which is the same size as the <rect>. The inner <svg> element will clip the <rect>.
You can also do this with a clip-path or a clip if you want but the inner <svg> way is simpler.
I don't believe it is possible to have the stroke only appear on one side of the line (someone correct me if that's wrong).
Here are two approaches to achieving the effect you want:
Approach #1:
Simply put the bounding rectangle before the filled inner rectangle in your SVG. The filled rectangle will be "above" the bounding rectangle due to SVG precedence rules, and if you expand it to the right size it will cover up the inside part of the bounding rectangle's stroke.
Approach #2:
Set the stroke-width to half its current value, then draw the bounding rectangle half a stroke width further out in all directions.
I need to create this shape :
The bounds are not clear in this picture but in real this is regular curve.
The inner circles are my inner elements.
I have some challenge with implementing this element :
I useed <div> and i can't the top border with border-radius and any another method.
Used <div> and set background-image for it but i have problem in bounds and i want to change mouse cursor exactly in element bounds.
I used <img> and set <map> and <area> for it for setting my bounds but i have problem with my inner elements.
Finally i used HTML5 and canvas element but for inner elements,the circles , i can't find any regular solution.it's very important the bounds for element
How can i implement this object?
You can pretty much use HTML5 Canvas. From your question I read you cannot determine the bounds of the circle to change the cursor. Detecting whether cursor is inside a circle is pretty easy actually. You'll definitely have the x,y positions of the center of circle along with the radius right ? So all you need to do is check if the distance between the cursor's x/y coordinates and the center of the circles is less than (or equal to) the radius or not. If yes, then it's inside the circle, else it's outside :)
I'm trying to create a 3D Carousel using CSS3 (transform).
But, there is a problem.
Look at the pictures below:
The first image is result of my current code (which likes looking carousel from inside, also with bugs :P ), but I want to get something like second image. (looking like a carousel from outside, and bug free!)
This is my code.
I can use negative values of degrees for this purpose; but if I do that, the height of left and right divs will be bigger than center div. Like this.
How to get something like the second image? Which CSS Transform codes should I use?
here is working Demo of what you want
EDIT:
In order to fix the height issue on applying the negative transform rotate, you need to give -ve translation along z-axis and also -ve and +ve translation along X-axis to left and right elements respectively.
EDIT:
well there are lot of tutorials explaining the use of css3 translation
I am pointing to one of those
http://www.w3schools.com/css3/css3_2dtransforms.asp
You simply need to reverse the perspective angles; for a1 you needed rotateY(-20) and for c1 you needed rotateY(20):
http://jsfiddle.net/thundercracker/upEC6/4/
EDIT:
Seeing your comment; the height of the div is going to be larger because the edge of the div is virtually closer to you. If you want the divs to appear to be the exact same height, you need to reduce their initial height a few pixels, or increase the height of the center div to 'zoom' it, like the edges of the rotated divs are 'zoomed in'. When the rotation angle is reversed you don't notice the height difference because it is small.
EDIT:
In addition the far edges of the div slightly smaller than the closer edges; if your divs were long enough one edge would be the height of the screen and then other would be a tiny point.