Drawing interactively onto a <div> - javascript

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.

Related

Using Free-Form-Deformation (or similar technique) in Web

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/

Changing colors of shapes in HTML5 canvas

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.

Hovering over different segments in a circle

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

HTML/JS detecting areas on an image

On web (actually webview in mobile development), I have an image of a basketball court. I need to detect the click(touch) of the area on the court image, whether it is within the 3 point line or outside of it. What is the simplest way of achieving this? Old school image map? SVG? Canvas tag?
This is easiest done on a <canvas> element using well known frameworks like Kinetic and Fabric.
You would load the image in the bottom layer, then apply a 3pt layer over the whole image. On top of the 3pt layer is a 2pt layer in the form of an arc. The layering would look like this, from top to bottom:
- 2pt "arc" layer on either side |
- 3pt "full court" layer | Click propagation
- court image V
So when the player touches inside the 2pt arc layer, you know it's 2pt. When the player touches outside the arc, it's the 3pt layer that catches the touch. Additionally, frameworks might allow a propagation to underlying layers. You must prevent that one.
An image map would likely be the least complex implementation. Otherwise, you'll want to subscribe to a click anywhere on the court and then examine the mouse coordinates relative to the image.
If I were you, I'd save yourself the pain of writing client-side code for it and just use an image map. They work well for things like this.
http://www.w3schools.com/tags/tag_map.asp
You can use maybe this solution when you don´t use canvas: Click image and get coordinates with Javascript (2006)
For canvas there is a solution, too:
How do I get the coordinates of a mouse click on a canvas
element?
Getting mouse location in canvas
The simplest solution is getting an library and use it´s function...

Drawing basic shapes with HTML/CSS/Javascript

I need to design a web app that allows visitors to draw and label basic shapes. The visitors will be drawing a basic map of a store. The shapes drawn will need to be stored in a database (their coordinates and sizes) along with their labels and a few options so they can be easily replicated later in a different app.
What's the easiest way to accomplish this on a web page?!
If I was doing this, I'd use Raphaël.
Check out the demos on the above link, it can do all sorts of crazy.
If you're after an actual code sample, I'll have a go using Raphaël if you like.
It works in many browsers:
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
Take a look at http://zwibbler.com
You can draw some cool shapes using pure CSS.
Check working example at http://jsfiddle.net/yFn6z/1/
Also more way to draw CSS shapes with borders http://www.vanseodesign.com/css/creating-shapes-with-css-borders/http://www.sendesignz.com/index.php/css/68-how-to-draw-speech-bubble-and-shapes-with-css3http://net.tutsplus.com/articles/news/fun-with-css-shapes/
If you want to draw vector shapes of all kinds use Raphaël javascript library.
If its lines and circles, You can use Bresenham's algorithm (Read up more in google, a 1x1px div with the color of your choice represents each point of a line or circle) once the algorithm has been implemented, you can use setAttribute to assign whatever attributes you want to to each line or circle that the user draws and store all the data by separating each shape with some proper delimiters and store it as a text file using FSO. The stored text file can be used as a means to save the users progress.. etc.

Categories