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
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);
Using flex I have two adjacent div(s), where the first container will dynamically set the height based on the content, and the latter will follow be 100% of its height.
In the latter div, an SVG document at full height draws a polyline. However, despite the SVG document resizing its height, the polyline point are fixed in absolute values, thus not responsive.
At normal width:
Once the width is shrunk:
intended result should scale:
Would it somehow be possible to set points relative to SVG document size, or perhaps set some point from 0,0 axis and the rest from the bottom?
JsFiddle:
https://jsfiddle.net/khaled_nabil/jov9cstg/4/
One solution is change your preserveAspectRatio to none, but that will stretch the stroke as well.
preserveAspectRatio="none"
updated fiddle: https://jsfiddle.net/majnhguz/
Update:
You can address that by by using this on your path:
vector-effect="non-scaling-stroke"
updated fiddle: https://jsfiddle.net/rv9kup7z/
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 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 :)
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.