HTML/JS detecting areas on an image - javascript

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...

Related

FabricJS object coordinates relative to an image instead of whole canvas

I'm trying to create a small website using the FabricJS library, which adds additional features to the web canvas element.
My issue that I, however, have is that i want to resize the canvas (in red) so that it fills the whole webpage.
On this canvas, there is a background image (in green) where I'll create some drawings on (in orange, this could be lines, squares,...).
Now, I would like to export all drawings in a coordinate system relative to the image and not to the whole canvas, because it should be possible to freely move around and zoom in/out the image for an enhanced drawing experience.
My idea, on how to solve this, would be to calculate the image position relative to the canvas and subtract them from the drawings - but that includes a lot of calculation.. Maybe there is a more genius approach with FabricJS?
Moreover, how can i guarantee that my drawings move around and zoom in/out with the image, so that my drawings are always true to the image?
I've thought about this for days and came to the realization that i need input from the professionals.
I think toLocalPoint() might help. Given an object imageObj and absolute coordinates left and top of your drawing, you can find the relative coordinates like this:
const abs = new fabric.Point(left, top)
const rel = imageObj.toLocalPoint(point, 'left', 'top')
console.log(rel.x, rel.y)
As for your second question: there is no easy way to "tie" two objects together, other than grouping them - and I assume you don't want to group them. Therefore, you would need to listen to all the appropriate events emitted by one object and make the adjustments to the other object in their handlers. To find out what events make sense to listen to in your case, see the events demo.

Drawing interactively onto a <div>

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.

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

HTML5 Canvas - Having 2 Canvas Objects side - by - side

I know you can layer canvases on top of each other just as if you were making an image in Photoshop but are you able put canvas objects above and below each other or side-by-side?
I'm looking to draw a graph which allows you to choose a space and depending on what color choice you have it'll change the block based on that choice.
Here's my thought:
Canvas #1 - Draw Graph Paper
Canvas #2 - Right side of Canvas #1 - Tab that has 4 color choices. I'd figure out the x-y of these to grab the color based on the color image. Canvas 1 block color would reflect this choice.
Is this a good way of going about this implementation?
Yes you can place canvases above, below and side-by-side each other. A canvas is an HTML element and can be positioned like any other using CSS.
I'd probably try to avoid using a canvas for your color choice tab unless it's absolutely necessary for some reason you haven't mentioned. If you use standard DOM elements instead you'll be able to bind to the click event directly rather than having to figure out the mouse position relative to graphics in your canvas.
Here are some good reasons not to use canvas to create UI components.

Placing points on top of an image with HTML/Javascript

I would like to find some code or a technique to place points on top of an image in HTML. When the user clicks on the image, javascript event calls a function with the x,y positions of the pointer relative to the origin of the image. Ideally, the user would also be able to zoom in/out on bigger images that can't fit on the page.
Thanks for any help/ideas!
It sounds like you should look into HTML5, particularly the Canvas element:
Here are some resources:
Reference Documentation
How to draw with HTML5 Canvas
Lets call it a drawing surface

Categories