Is there any way to stop OL3 from only showing the points inside the viewport? Specifically when on a polygon for me. I have polygons being clipped because some points are outside the viewport and I need to zoom out in order to have the entire polygon displayed.
Figured it out - turns out you can make a square shaped polygon with 4 points fine, which I had done. But to avoid the problem I was having you need to add the first point again as a fifth point.
Related
I have draw several polygons in a canvas. I am now interested in how to find the coordinates (vertices) of the selected polygon. I can find the selected polygon (region) using mouse coordinates, but I need to redraw it if it is selected, which is why I need its coordinates to do that.
A similar answer that I found so far is this one https://help.geogebra.org/topic/-solved-how-do-i-get-a-list-of-coordinates-from-a-polygon- using GeoGebra, but I am using HTML5 and JavaScript!
Once you draw something on a canvas, you can not get the coordinates of the object you drew unless you have some image processing algorithm.
Instead, you need need to keep the polygon object you drew on the canvas in memory and you need to define it's boundaries on the canvas.
This way, when the user clicks on the canvas, you simply get the mouse coordinates on the canvas and you calculate which polygon was clicked by checking where you drew your polygon and checking if the mouse clicks enters the boundaries of this polygon.
Sounds like you are trying to solve a couple different problems:
1) Figure out which polygon the user clicked. As was mentioned, if you are keeping an array of your polygons in memory, and can implement an isPointInPath method, then you can loop through your in-memory polygons and check if any of them were clicked. Don't forget that to get an accurate check, you may need to take your given "mouse x" and "mouse y" coordinates (from a click event, for example) and subtract the canvas's page X and Y coordinate.
(See the SO answer How do I get the coordinates of a mouse click on a canvas element? for more detail.)
2) Once you've determined the user has clicked polygon P, you want to redraw it. You should be able to redraw it no problem, by simply redrawing the same polygon using the same coordinates as before (for example, you could change your strokeStyle or fillStyle to a different color to represent the selection).
If you want to make the polygon larger and in the same position, that's a different question - basically, you need to translate the canvas to the center of the polygon, then scale the canvas, then draw your polygon. If this is new to you, there's a tutorial available at http://codetheory.in/canvas-rotating-and-scaling-images-around-a-particular-point/ (uses images instead of polygons, but same concept).
Note that if your polygon is complex, even determining the right point to scale around may be difficult. The question "what is the center of a complex polygon" has several different answers; a simple answer is to average all of the polygon's point's X and Y values (Center X = avg(X), Center Y = avg(Y)). If that doesn't look right, there are more complicated approaches available in another SO question, What is the fastest way to find the "visual" center of an irregularly shaped polygon? .
Hope this points you in the right direction!
Using geojson.io page I want to draw some districts/countries.
I'm drawing each district separately as there is no multipolygons in Leaflet Draw. However when I'm drawing the borders even with maximum zoom - the borders will never be exactly the same. Coordinates will differ to some extend which is natural. Hence when I am downloading the data in topojson , the data are not valid to display meshes between different districts
How to achieve the goal to have the borders always with the same coordinates?
For example it could be achieved by having the markers visible during drawing and just picking up the one I'm interested in(on a same border) by mouse click - the same way the shape is finished.
I have downloaded the source code, read it (it is nice), searched through docs and thinking how to adjust it for my goal but I'm lost :/
Leaflet.Snap did the trick.
I was afraid that snapping will be not exact for the borders but it is :)
I have code that draws a square and plots points inside a canvas element. I use a d3.drag function to drag the square separate from the points and a d3.zoom function to zoom on BOTH the points and the square as well as pan both. The problem I'm having is two-fold:
Once zoomed, I sort of lose the ability to drag the square. Sort of in the sense that if you click around enough (typically the original spot of the square, not current), you can grab the square again.
Once I am able to grab the square again, the zoom renders to the very original zoom layer, not the current zoom.
Here is a jsFiddle
I found this answer that recommends adding:
square.on("mousedown", function() { d3.event.stopPropagation(); });
but have not had any luck.
TIA
I'm my current project I need to draw robots and move them around.
A robot is composed of a circle and a box which shows the current orientation of the robot.
My problem is that I when I animate them, the orientation box moves in a strange way because of its rotation...
Here's what I mean: http://jsfiddle.net/zmunB/
Thanks for your help.
Balzard.
This fiddle shows another option. It may not be quite as elegant as rajkamal's solution, but it may be easier to understand if you are not used to working with matrices. You should be able to add features to it at will (notice the 'eye' I added).
Basically, I am just adding the features to a set, and applying the transformations to each element in the set. Kick off the animations by clicking the colored squares to the right. Note that 'Move relative' will make the set move in the direction it is 'looking'.
Please refer this fiddle. http://jsfiddle.net/apUvX/2/ , for transformed movements.
Here in "onAnimation" method of circle, we are transforming the circle's center coordinate to the
rectangles coordinate system using Matrix.x,Matrix.y and assigning the result to the the x,y of the rectangle.
I have a raphael.js shape which I am plotting circle's on top of. I only want a circle to appear if the circle does not go off the boundary of the shape it is being plotted on to.
To make this more clear, here is an example of what I do not want to happen:
Example http://img682.imageshack.us/img682/4168/shapeh.png
I want the circles outside of the grey area not to appear. How would I detect wether a circle is inside or outside of the grey shape?
One possible way to dertermine if a point is inside closed path is this:
Choose coordinates that are definitely outside the shape.
Make a line from that point to your actual point in question.
Count, how often the line intersects with the path.
if the number of intersections is odd, then your point is inside. If it's even, the point is outside.
I don't know if that help you very much since I don't know raphael.js at all. But it's a working geometrical approach to the problem.
You could just apply a clip-path (that should be defined to be the grey shape you have in your example) on a group (<g> element) containing the circles.
See this example from the w3c SVG testsuite for how to use clip-paths.
This looks very similar to "Hit-testing SVG shapes?".
You'll just need to call getIntersectionList() on the circle's position, and see if it returns the big gray shape.