I would like to identify the center of an SVG, so that I can manipulate multiple SVGs with ease.
I am trying to make multiple examples of the basic polygons (3 to 8 sides), and quickly realized that I either hade to make my own, which involves a lot of math, or I could pull from wikipedia the current ones. The problem with the former is that it takes a lot of time to translate the coordinates from Sketchup. The problem with the latter is that they are oriented differently and of different size.
I know that you can transform, scale, and rotate the SVG, but I need to know the coordinates of the center of the SVG. How do I find this out, so I can set universal manipulations?
Take the transform="rotate(degrees x y)", I need to know the center to accomplish this.
JS Fiddle
Here, I would like to set all the centers to the same, and then scale them to the same height and width, and potentially rotate them individually so that they all have a flat bottom, not a vertex.
The generic answer to your question isn't obvious...
It might be simpler for polygons, particularly convex polygons: you can iterate on the path and find its bounding box by computing the max and min of the x and y coordinates of each point of the path.
Then you can decide that the center of the shape is the center of the of the bounding box.
An alternative is to put an invisible element at what you estimate to be the center (for complex shapes, the concept of "center" can be variable), and get its coordinates to find out where the center is. Particularly for rotating purpose: you might want to do this rotation around a specific point which might not be the geometrical center.
Related
Currently I am using canvas to draw the gold circle, then snip off the areas half way to adjacent stars with globalCompositeOperation : destination-out, then paste the result into the main canvas.
I am contemplating changing to svg for this.
The closest method I have found is clip masks. I would have to create a set of clip-masks for each circle (star), this seems excessive if there were 2000 stars.
Another way would be to create polygons, but the math required to calculate the path may be beyond my capabilities.
So before I go down either of these routes, I would like to know if there is a better way or which of the above methods are recommended.
I want to apply Unsupervised learning on images through OpenCV and python to detect and categorise some special patterns in image and form different clutters.
If this image is example how I can detect the yellow pattern?
Very interesting problem. If circle detection is showing good matches, you can consider the difference of color histograms in patches inside and outside the circles. Also worth investigating is the difference in edge histograms in small windows on the image.
To check the inside of the circles, you can take a square that is about 1.4 times wide as the circle radius, with the same center as the circle's center. For the outside, take a few squares about this size but are located further than the radius in x and y directions. I think approximate values like these should do.
I created my own little 2D-Engine with DirectX (okey, should be more like a GUI in the end) and tried to create rounded edges for a simple Rectangle. Since I never done this with a graphics framework before I had no idea how to supply this.
For now, I just overlapped 5 Rectangles and 4 circles (the circles are used for the rounded edges). It does work with opaque colors but if I add alpha into the rectangles the circles are making problems. (Shown in the image below - i should have choose another colors...)
<# Open Image #>
I can't find a solution myself (I googled and whondered I found nothing about rounded edges in DirectX) and I do believe there is a much powerful and faster method doing this. So my final question is, what are the common algorythm to create a rectangle with rounded edges in Direct3D9 ?
The common way to draw rounded quads is the use of textures with an alphachannel. It's very easy and the most of the gui's uses images to achieve a specific look. If you draw only single-colored boxes it may look very generic after a while (even if they have fancy rounded corners ;) ).
But if you want to draw rounded quads directly, I would suppose to generate a custom geometry, which fits the desired area directly without overlapping (need for alphablending). In you case it would be something like this:
The more triangles you're using for the corner the smoother it will look.
I got my country lat/long boundaries from koordinates.com. Now I want to fill in the interior with dots.
Since the file I have is KML, I was thinking of converting the coordinates to cartesian using the NetTopologySuite.
I do not want a polygon overlay. I want to generate dots/coordinates for the polygons interior - ideally at a density of my choosing.
I have seen algorithms like this one, http://alienryderflex.com/polygon_fill/. Is there a library that will do this for me? Alternatively, can someone share code?
Ultimately, I will convert the dot coordinates back to lat/long and populate a globe like this one
http://code.google.com/p/webgl-globe/
I'm affraid GIS isn't my area of expertise, but I've got two ideas:
Generate a set of random points. You can use a Point-In-Polygon function to determine if you're points are in the right place.
You can use a rectangle grid of points and use a 'resolution' to determine how many points there will be and how close. You can offset the grid positions to make them look more random if you need to. You'll check if the point inside the bounding rectangle of your polygon is inside the polygon or not.
Notice that the webgl-globe example uses a grid of points(similar to point(2)) converted to spherical coordinates.
Both ideas is kind of similar, only the points distribution differs.
You can find a roughly related implementation I did using actionscript here,
but I would also suggest asking on the GIS site.
The issue we are trying to solve the issue of locating a point in two different representations of a plane. The first plane we have is rotated to create perspective; the second is a 2d view of that same plane. We have 4 points on each of the plans that we know to be equivalent. The question is if we have an arbitrary point in plane 1, how do we find the corresponding point in plane 2?
It is best probably to illustrate the use case in order to best clarify the question. We have an image illustrated on the left.
Projective plane
2D layout diagram of space
So the givens that we have are the red squares from both pictures. Note that if possible, I’d like it to be possible that the 2D space isn’t necessarily a square. These are available to us ahead of time and known. I also have green dots laid out on the plane in the first image. I’d like to be able to do a projection of the dot in image 1 onto the space in image 2.
Note also for the image 1 I do not have a defined window or eye position. I just know that the red square from image 1 is a transform of the red square form image 2 and that the image 2 is in 2D space.
This is a special case of finding mappings between quadrilaterals that preserve straight lines. These are generally called homographic or projective transforms. Here, one of the quads is a square, so this is a popular special case. You can google these terms ("quad to quad", etc) to find explanations and code, but here are some for you.
Perspective Transform Estimation
a gaming forum discussion
extracting a quadrilateral image to a rectangle
Projective Mappings for Image Warping by Paul Heckbert.
The math isn't particularly pleasant, but it isn't that hard either. You can also find some code from one of the above links.
Update
And this is one of my favorites: Computing a projective transformation