I want to create exact Circle Boundary in order to create drag & drop quiz. By dragging and dropping the red circle to purple or blue circle or both areas as shown in the image below:
The quiz
The problem is the purple or blue circle has rectangle boundary when I used red circle to drag and drop and detect that within circle area by isContainedWithinObject function, as shown below:
The rectangle boundary
How to create exact circle boundary like this:
The exact boundary
Related
Im trying to implement a function where user can draw svg line in any shape as he provides the x and y coordinates .
for eg - draw a svg line in green color as the user moves his mouse on screen
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.
I'm creating an HTML5 canvas mapping app that uses the D3 contour plugin to generate an SVG. I need to label the centroid of certain areas that are outside of a calculated path.
For example, I'd like to place a label inside each of the two blue regions:
The green region is an SVG path calculated by D3, and the blue "water" regions are the background showing through areas not covered by the "land" polygon.
I have used .getBBox() for other polygons that have D3-generated paths, but for these regions, the bounding box is the entire SVG.
This codepen demonstrates placing a label on the "land" section of SVG, using .getBBox() - in this example I would like to place a second label on the blue "water" section in the lower right corner.
Thanks for your advice!
You has a concept error. getBBox works well and do what it must to do:
Step 1: You draw WATER
Step 2: Draw the land contour, layer by layer. (Overlaping WATER)
Step 3: get the LAND boundary box (getBBox). And put the label on the center
Step 4: get the WATER boundary box (getBBox). And put the label on the center
At the end you can't see the WATER label:
Posible solution A: Consider WATER level as another layer (modding your data)
Posible solution B: This is just a thought: you can create a mask from the very low layer and used to mask the WATER box as cookie cutter. I think getBBox will give you the right size the final shape.
Recomendation: Try it on differents browsers. Firefox has a bug with getBBox: You can see it here: https://bugzilla.mozilla.org/show_bug.cgi?id=612118 Not solved yet
I have a number of 2D shapes that interlock with no gaps. I can extrude them to 3D without a bevel and they continue to fit together correctly. However if I add a bevel when extruding, the shapes grow which means they overlap each other when adjacent:
Here you can see that the top of red shape (translated +Z for clarity) is the same width as the gap in the blue shape but that the sides of the red shape have expanded.
Is there any way to achieve an inner bevel which doesn't change the shape's outer dimensions?
How we add a text area in google map polygon triangle?
We can draw polygon by drawing tools or by onclick event on map but how we show something in rectangle?
And when we move rectangle then our textarea must be moved, Means this textarea must be related to polygon.
I know we draw triangle by this example:-
https://developers.google.com/maps/documentation/javascript/examples/rectangle-event