I have an interactive map of country in my canvas. User can move and zoom it.
This map consists of different regions of that country.
The next thing I want to do is when user hovers specific region of country on map (each region is made by functions: beginPath,moveTo, lineTo, closePath, fill, stroke), this region gets highlighted and then when user clicks on that region, some popup appear.
What is the way of implementing this?
Thanks to GameAlchemist and markE comments (also thanks to markE link http://dougx.net/map/usmap.html)
I've come to solution: each time mousemove event fires, I draw each region. But I neither stroke nor fill it. So after each closePath method I use IsPointInPath() method to check if mouse hovers this region and from that point I can highlight it or do whatever I need.
The key thing there (thanks to https://shifteleven.com/demo/canvas-hit-detection/) that I don't fill and stroke regions - the thing that takes computer resources. I just draw hidden path and check if mouse hovers this path - region. Follow the link above and it provide it with example of up to 100000 planets drawn on canvas. You may notice that it takes some time to draw these planets and how fast it determines which planet is clicked.
Related
I'm trying to develop a very simple sketch program that can draw the dimensions of buildings. For example, if I want to draw a 24'x24' house, it would simply be a square with each side representing 24'. I've read that SVG/Javascript may be ideal, but I'm looking for some specific guidance.
Here is a link to a 30 second video showing exactly what I need: https://vid.me/96Mz
I'm able to draw those shapes by clicking in one spot and then moving the mouse to another location to draw a wall, then click again to produce a third corner, and then a final time to close the shape. I'd need the area to be calculated too.Preferably the dimensions of each side would be able to be shown as labels.
Here's an example of an image I'd like to be possible:
Click Here
Can you think of anything to help me build a simple version? Any feedback is huge, thanks a lot.
I'm building a canvas paint tool where the use simply drags his mouse to draw on the canvas. As I understand it lines is the best way for the job. So on mouse down I create a KineticJS Line object and when the user drags I add a point between the last mouse position and the current. Note, I only have one line object that has multiple points.
When the user releases his mouse the Line is finished and whenever you click again to draw more, I create a new line object.
Problem with this is that if you are going to draw a text, say "My name is x" That would result in many line objects, 1 for each character (and 2 for "x" and "i").
Is there a better way to do this? My idea was to have only one line object, and onmousedown you simply not add a line from the previous position, and then when u drag you do. But I don't think KineticJS Line supports that.
So basically, can I improve the way I let the user draw?
Your current design of having 1-2 polylines that define one letter is fine.
Both canvas and Kinetic can support a whole paragraph of characters before lagging in performance.
If you want 1 single definition for a whole sentence, you can use a custom Kinetic.Shape.
With Shape, you get full access to a wrapped canvas context. You could use that context to do your second idea--a single context.path drawing a sentence through a saved set of moveTo and lineTo commands.
Personally I would go with your current design (1-2 polylines per character) because the performance is fine and you get more flexibility. (For example, if you want to draw the person's name in a different color is easier in your current design).
With the keydragzoom library, you can mouse drag over a map to make rectangle selection, see this example: http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/2.0.9/examples/events.html
What I want is to use this as a selection tool, i.e. to select particular rectangle, and keep the rectangle (the selection) displayed. But the rectangle always dissapears after ending the mouse drag. Is there any way how to achieve this with this library?
I tried to set noZoom option to true, but it didn't help. I know I can draw my own rectangle, but it would require to handle situations when selecting a new rectangle, etc. So I would like to do it within this library.
When drawing an editable Polygon on a map using Google's V3 API, is there some event I could register for that tells me when one of the polygon's points (only made visible by the editable flag) is clicked? I want to be able to enable a user to draw a polygon, using right clicks, and "complete" the polygon by clicking on the first point plotted. I begin by creating a Polygon of one point, and add each successive point with each right-click. I use the mousemove event to create two "completion" lines, two fainter lines (two Polylines) from the last point plotted to the current mouse position on the map, and from the current mouse position on the map to the first ("anchor") point. When I click on that first point, I'd like to be able to "finish" the Polygon, by taking away these completion lines, inferring the intent of the user now to either edit the points already drawn with the handles the editable Polygon provides, or save the Polygon's coordinates to my application.
Is there a way to do this? (As I've written this, I've thought of one solution: create a small circle, invisible, around the first ("anchor") point, and detect when that invisible circle is clicked. But I wanted to see if there was something built-in in the API that I could use.)
Are you trying to roll your own polygon editor? I would suggest using the drawing library instead:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools
Also see events section:
http://code.google.com/apis/maps/documentation/javascript/reference.html#DrawingManager
Have small web page at
www.peterbio.com/mom/test.htm
Someone wrote the code with mouse over and creating image map. When you click on one of the purple balloons another image shows up.
***Need some help adding more code so that I can add another rollover-mouseover picture to a different balloon in image. I do not know how. But with an example and addition to the code at page above I can learn a little.
Then I can do the same so that all balloons in picture will do a mouseover and show other JPG's (I will add different images later). You can use the same jpg out there to add a 2nd, 3rd, etc rollover image.
***Also need to know what free map program I can use to create image map so I can do same with rest of balloons ---UNLESS--- you are so kind as to add other coordinates to image map and use same image for all the other balloons.
Not sure if images will need to be prefeteched or not. They will be about 110k or less.
Thanks so much for your kind help. Trying to just do something for my family since my mother passed away. A coping thing I suppose.
PC
<map name="momMap" id="momMap">
Each area is a balloon in this case, define by the coordinates, then the action "onmouseover" triggers the javascript function "changeImage" that takes an attribute "newimage" which is the name of the image to show.
The coordinates of the ballon you want to set up are inserted by pairs. For example 0,0 would mean the top left corner, the more pairs you add, the more vertex your shape has, the area formed joining those vertex would be the one affected by the javascript action.
<area shape="poly" coords="326,93,316,136,275,165,250,163,235,127,261,100,286,66,308,68" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/>
So "poly" sets the area type to polygon, and coords defines where and how many vertex there are. Try to keep those vertex coordinates in order, to avoid confusing some browsers.
There are also other shapes you can use apart from the polygon, those are, circles and rectangles. The use of those types of areas is described here.
You asked for an example, this will show the same image (since I don't know any other image in that folder) in a 100px square from the top left corner of the parent image:
<area shape="poly" coords="0,0,100,0,100,100,0,100" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/>
So in conclusion, you just need to set up a new area for each balloon, or for that matter any area of the image you want a hover effect on. To ease you the paid of finding the coords on the image, I've located this script that will ease you the task