I am using canvas 3d to draw a 3D graph.But by default origin of Coordinates is at top left.For which i used translate and bring it to the center of canvas as follows.
canvasElement.getContext('2d').translate(constants.canvasWidth/2, constants.canvasHeight/2);
where canvasWidth and canvasHeight are already defined.
But now i have another problem with the direction of axis.Now positive y axis is facing down and -ve y-axis facing up.How can make it proper so that +ve y-axis faces up and -ve y-axis faces down?
Please help
Instead of offsetting the centre calculate the y position.
Subtract the y value from the height of the canvas/2.
x1 = canvasHeight/2 + x;
y1 = canvasHeight/2 - y;
Related
I have an SVG element and I am rendering child circle elements with given x, y pixel values/coordinates.
The children are rendered relative to the default origin which is the top left corner of the parent SVG. Is it possible to change this origin?
In my case, I have pixel values/coordinates based on a center origin with both positive and negative x, y values (see this image https://d20khd7ddkh5ls.cloudfront.net/img13_71.jpg) so it would be very convenient if I could set the origin of the svg rather than having to translate the coordinates.
It's easy enough to set a transform-origin, so how do I set a 'coordinate-origin'?
Thanks
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 know the object can be scaled in X axis with Y axis is fixed. But I need to scale an object in one direction which is neither horizontal or vertical, while the perpendicular direction is fixed, is it possible?
For example, if there is a line object which is not horizontal or vertical, I want the length of a line can be extended, while the width cannot be changed.
It's interesting!
How about using angle?
I create a example in https://jsfiddle.net/sapics/mq00xq3y/105/.
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.