I'm working on displaying interactive map in html5.
I have created zones of map as array of numbers (representing coordinates)
like:
Zone1=[{x=3,y=4}, {x=8,y=5}]
and I have also created a map which is an array of zones
like:
map=[zone1, zone2....]
I have no problem drawing the zones in the canvas using context.lineTo() function, the same way I'm able to capture the mouse position on click and determine on which zone a user has clicked using point in polygon algorithm.
My difficulty arises when I want to fill color of of the zone when it is clicked at.
Anybody have ideas?
PS:
The shapes I made are irregular
I'm not in to using JavaScript libraries like jQuery or anything else
HTML5 Canvas does not know of notion of shapes of objects which you can manipulate. You have two options in your situation:
Use SVG to draw what you need (check examples on W3Schools)
Use some JS canvas library which adds abstraction to provide notion of shapes (check out EasleJS)
Write your own abstraction over canvas to provide shapes
You should know however, that even with such libraries, "shapes" are getting fully redrawn. Possibly, entire scenes are redrawn. SVG alleviates this, it's performance decreases as number of shapes/objects grows.
You can't. The shapes you created are not variables or referenceable in any way once they are added to the canvas. You could redraw the shape with a new colour over the old one, but I think your best bet would be to use a library to handle this for you.
Since I have used it myself, my own suggestion would be Kinetic.js, but there are a plenty to chose from.
Related
Our AI model recognizes an object in an image and creates a mask on it.
It returns a raster image of mask that covers the detected object.
Here have a look at this example:
Now the black outline is what AI model gives us, and sometimes it makes little errors setting the boundary around the object like shown in red rectangle in the image.
I want to allow the user to correct this outline by dragging the outline.
One way that comes to my mind is to use Free Form Deformation or something similar but I don't know how to do that in React Native, I can't find a library etc. (and don't have much time to implement it from scratch)
Someone please give me a direction on this, Thank you.
If you know coordinates you can use Skia and SVG paths https://shopify.github.io/react-native-skia/docs/shapes/path/ to draw your boundary and using Canvas touch handlers you can allow users to change coordinates.
Example of path building: https://youtu.be/7SCzL-XnfUU
Or this example of a hand drawing app: https://medium.com/react-native-rocket/building-a-hand-drawing-app-with-react-native-skia-and-gesture-handler-9797f5f7b9b4
And this example https://blog.notesnook.com/drawing-app-with-react-native-skia/
Right now, I am working with bezier curves in fabric.js. Assuming, for instance, 3 of them, with intersections between them. I need to find the exactly crossing point and, even more difficult, draw the selection in other canvas. For fabric.path, I'm using
perPixelTargetFind: true,
Image to clarify the situation:
Finally, after a long time, I can't find any solution in fabric library, a workaround pass for convert to svg, use a another library or program your own proccess (pretty hard) and convert back to fabric.
The final solution is use paper.js, it has some functions to detect intersections and colissions, and, also, is very powerful for some other task.
I'm building a game in HTML5. I have hundreds of images that look similar to this:
And at certain points in the game I want to draw an outline around them. Like this:
I want to do different tracing colors at different times and don't want to end up with [number of sprites] * [number of colors] of additional images for memory and bandwidth reasons so I'm looking at vector drawings.
What I need to come to a solution on are really two separate things:
Calculate a vector path for each frame in a spritesheet. This can be either dynamically or ahead of time and stored.
Draw the vector path
The engine I'm using for the game is ImpactJS. It doesn't have any support for vector operations. The author of the game engine I'm using did his own vector drawing manually by exporting the vectors from Illustrator for a particular image, then using an online converter tool to change them to HTML5 syntax. This isn't the best method for hundreds of images so I thought I'd see what information others of you have.
I would like to still draw the images using ImpactJS since this game is already pretty far along, and just do a second-pass drawing of the outline of the image when necessary.
Thank you for any help!
I am building a web application in which the user would be able to draw zones (polygons) onto a video. A solution I already implemented was to put a <div> on top of the video player, catching the mouse clicks.
What I'm willing to do right now, is being able to draw on that <div> with the mouse:
Click on the block to draw a point
A button, Draw zone, which would fill a polygon with the existing points
A button, Delete canvas, which would reset the block
I am looking for directions about which library to use. Already heard about:
Raphael (raphaeljs.com/#demo)
jsDraw2D (jsdraw2d.jsfiction.com/demo/linepolygon.htm)
Problem
Raphael looks monstruous but kinda overkill for what I want to do. And on the contrary, jsDraw2D seems to work just fine from what I tested (only drawed manually though).
I have several constraints such as:
The user is drawing the points with the mouse (by clicking)
The user is drawing on a <div> with opacity on (the filled polygon should be transparent too)
I need to store the points' coordinates (or of the polygon at least)
Question
What should I use ? Should I stick to Raphael even though it's a bit difficult to implement (I've basically no background in JavaScript) ? Or do you know of a JavaScript library which could do what jsDraw2D does but in better ?
Thanks,
You should use SVG because they are obviously more interactive and easy to implement. If you've ever used Khanacademy then probably you'll come to know that they use SVG in their scratchpad.
Moreover, SVGs are also w3c recommended like canvas.
If you are able to go for HTML5 Canvas could be a good choice.
I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo