Html 5 Canvas keeping track of position when rotating rendered image - javascript

I have been trying to get this working but nothing yet! My math level isn't that good as well. What I have right now is that I have an arrow which is pointing North and when the mouse is being held, the arrow points to where the mouse moves. I have a bounding box that determines when the arrow is being selected with the mouse.
After a rotation however, I lose that bounding box as it is still on the original position. Is there anyway to make the bounding box move to the new coordinates or is there any way where when I click on the rotated arrow, I make the arrow know that it is being clicked on?
Thanks in advance!

Related

Openlayers 3 map, how refresh without having focus

I have two similar problems with an Openlayers 3 map. They both pertain to making the map refresh/redraw when it doesn't have focus; i.e. when the mouse is not over it.
1) I show an outline of a country when the mouse is over it, but it becomes transparent when the mouse moves off. However, if the country is at the edge of the map view and I move the mouse off that edge of the map, the country stays outlined, because the map never sees the mouse over another area outside the country.
2) When I click on a country, it becomes permanently highlighted (i.e. a layer becomes visible). I have a button off the map that when clicked resets all the layers to transparent. When I click the button, nothing happens until I move the mouse back over the map, at which point the change becomes apparent and the layers disappear.
Is there a way to force the map to update when the mouse is not over it?
I have tried several options: map.redraw(), layer.redraw(), source.refresh(), map.refresh(), layer.refresh(), source.refresh(), document.getElementById("map").focus() and anything else I can find suggested to force a map to refresh, but none of them work until the mouse is moved over the map.
My mistake, simple bug. Failed to update the style directly, assuming another routine was handling it.

Always Show Mouse Over Canvas

I'm working on a javascript/canvas game, and using mouse position to determine what blocks to dig. Whenever I use the movement controls the mouse disappears though, which is annoying because then I have stop moving and move the mouse to see its position again.
So I'm looking for a way to make the mouse always visible on the canvas, opposite to using CSS cursor: none to make it invisible.
Full project here: https://gist.github.com/TuckerFlynn/0a52278878a888b0f695
The mouse can certainly navigate off-canvas, so...
Hide the mouse when it's over the canvas.
Draw your own "fake cursor" following the current mouse position reported by canvas's mousemove.
If the mouse leaves the canvas, just leave the fake cursor visible as a reminder of the mouse's last canvas position.
Your "fake" canvas cursor doesn't have to look like a mouse. It could even be a simple cross. Or if you really want it to look like a mouse, then move an image of a mouse around the canvas.

Disable Fabric JS brush

I have a simple stamp tool, which places a translucent geometrical shape like star, hexagon on mouse down, moves it on mouse move from its center and places it fully opaque on mouse up. But, it is giving me a trail of pencil brush on mouse move, no matter what. I do not need this pencil stroke. How can this be disabled ?
I have tried to set the width of freeDrawingBrush to 0 and now the stroke does not stay on the canvas, but it still shows during mouse move when the stamp shape is moving and then goes away on mouse up. Is there a way to disable this ?
I have also tried to disable freeDrawingMode but then disabling canvas wide selection of objects does not work, and hence I need a way to somehow stop the pencil brush when the stamp tool is selected.

get mouse coordinates within image in canvas

I've got a HTML Canvas with an image in it and I would like to get mouse coordinates where user clicked within the image.
I can do this in a way, that I get mouse coordinates starting from top-left corner of the canvas, but I need to use top-left corner of the image itself as [0,0] point.
I am working with this example http://phrogz.net/tmp/canvas_zoom_to_cursor.html
thanks
The context.translate(x,y) command does exactly what you're asking for.
context.translate will move the origin of the canvas to the x,y coordinates given to it. So if x,y is the top left corner of the "hit" image, then you can make x,y the origin (effectively 0,0) using context.translate(x,y)
You don't present code, but I assume that you have already:
determined where the user clicked the mouse,
determined if the user clicked the image by hit-testing the mouse coordinate against the bounds of the image,
have available the x,y where you originally drew that image on the canvas
To illustrate, if you context.translate(imageLeftX,imageTopY) and a then fillRect(0,0,1,1) will draw a rectangle in the top left corner of the image.

Zoom in on mouse position in KineticJS

Question:
How do I zoom in on the mouse position on mouse wheel scrolls?
Details:
I am trying to merge this complete solution on Stack Overflow, which allows for zooming of the stage, with this incomplete solution, which allows for zooming in around the mouse when clicked. I have forked the jsfiddle code here. The code works fine once you get it zoomed in, but upon first scrolling, the stage jumps to a different location and I can't figure out why. Can anyone tell me why it is happening, and how to solve it. Thanks.
Just a guess, but you are using the mouse position relative to the page not the canvas
When you zoom, the position under your mouse position gets changed (the reason of jumping). To move back the position to its original position, you need to pan the offset( difference between the previous position and the new position(after zoom)). To avoid stage jumping to a different location, you can use stage.setOffset function of KineticJS.
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/

Categories