Draw circle subscribed to a polygon - javascript

We have a polygon with an irregular form (in example, a city boundaries polygon).
We need to draw a "circle" with a defined radius (ie, 4km) bound to this polygon, in other words, if point at 4km fall outside the polygon, we need to keep the polygon point as point.
I've attached a sample image, the red border is our polygon, the blue circle is what we need to get. As you can see, the blu circle doesn't exceed the polygon boundaries.
Any help?


Use floodfill algorithm to make a set of points inside the shape, then paint points form the set which are not further form center of circle than its radius.

Related

Draw Rectangle for scattered points

I have some scattered points for which I need to draw a rectangle / circle / polygon as a background. I have only coordinates (x,y) of selected points.what will be the maths formula to this? These points are inside canvas and I need to draw the outer shape for selected points in canvas itself. Tried with canvas rect .
Attaching one more image:

Cannot plot polyline on D3 spinning globe

I am trying to draw a polyline path on a Mike Bostock spinning globe and animate a circle along it. So far I have learned how to do that along a polygon such as in the following example which has a circle travelling along Russia borders: http://jsfiddle.net/xqmevpjg/11/
Using the same code as in the fiddle above, I tried to add a polyline (e.g. a maritime route in Asia). My coordinates I plug in as follows:
{"type":"Feature","properties":{"name":"AsiaRoute"},"geometry":{"type":"polyline","coordinates":[[
[93.36182, 19.83325],
[92.92236, 18.58833],
[89.01123, 16.02932],
[88.26416, 12.96642],
[88.13232, 10.94591],
[90.02197, 9.47548],
[94.021, 9.43213],
[94.72412, 12.2803],
[97.36084, 12.62359],
[97.49268, 11.42013],
[96.70166, 9.17192],
[96.43799, 6.99663],
[98.41553, 5.86126],
[99.38232, 4.54836],
[100.12939, 3.23307]
]]},"id":"RML"},
This however does not work. The animation does not appear and the path is not even drawn on the globe. The only thing I can do is as follows :
(a) change the polyline to a Polygon, but then it connects the beginning to the end of the path and messes up the animation, or
(b) change geometry type to polygon once again, but this time "mirroring" the coordinates back to front so that I end up with a polygon which looks like a line. This doubles the amount of coordinates unnecessarily and then I am forced to divide my path length by 2 so that the animation stops 'half way'.
Is there a reason why I cannot simply plot the polyline as desired?? Help please :)

Be it a GeoJSON or a TopoJSON, these are the accepted values for the geometry:
Point
MultiPoint
LineString
MultiLineString
Polygon
MultiPolygon
GeometryCollection
So, in your case, change polyline to LineString or MultiLineString.
Here is the specification for GeoJSON: http://geojson.org/geojson-spec.html#appendix-a-geometry-examples
And for TopoJSON: https://github.com/mbostock/topojson-specification/blob/master/README.md#22-geometry-objects

how to choose random x,y coordinates of a polygon

I have a shape, a polygon. I have the x,y coordinates of the edges of this polygon.
I'd like to draw 50 circles of 10 pixel radius randomly in this shape.
How do I randomly choose a position in my polygon?
I'm doing this in canvas with javascript, but I don't need any actual code. Maybe some math equations or some direction would be enough

You'd get the whole area of the polygon , apply a rand function on it and draw the circles, if you need to avoid intersection you could create a 'collision' function. Perhaps this helps:
Set: https://en.wikipedia.org/wiki/Set_%28mathematics%29
Calculating the area of a polygon: http://www.wikihow.com/Calculate-the-Area-of-a-Polygon

Google Maps: Checking if a polyline passes thru a circle

I would like to ask how do I check if a certain Polyline passes thru a Circle? In the image below, the red polyline passes inside the green circle. I know it is possible to determine if a marker is within a circle but i don't know how to do it or if it is feasible for polylines.
I still have 8 reputation points so I can't post images, here's the link to the image: http://i.stack.imgur.com/0fzXu.png
Thanks in advance! :)

I'd probably do the following:
Get bound of circle.
Filter the polyline coordinates and find the points that fall into that bound.
Calculate distance between circle center and each of those points. (circle/bound center can be easily obtained by some built-in method)
If any distance < circle radius, it gives you result.
Only problem with this algo is, if your polyline goes through the circle but your list of popyline coordinates does not contain one that falls in the bound. I haven't come up with a solution for that yet :)

Draw a Rectangle and then draw a scale down Rectangle inside previous Rectangle

How to draw sale down rectangle inside another rectangle? Let say I have coordinates of a rectangle which is transformed at position x,y. Now, I need to draw a scale down rectangle inside the previous recangle, Just like this,
http://www.uploadimage.co.uk/thumbs/849968trim%20Rect.png

The idea is simple, if you have the outer rectangle coordinates you must take the following steps:
find the center of the outer rectangle
move outer rectangle so that its center will coincide with origin (0,0)
scale the edge coordinates of outer rectangle by a ratio (ex: 0.7)
compute inner rectangle coordinates
move both outer and inner rectangle back in position
If you know a little bit of math you can actually combine all those transformation into a single one so it will be faster.

Categories

Resources