I have a canvas where you can draw and I would like the user to see the size of the point he is drawing. So I need to draw a custom cursor as 10x10 pixel square on the canvas.
Of course I would not like to paint over the image while the user is just moving the mouse.
My ideas how I could do this:
I could somehow backup the original image and paint it all over every time
I could move a with the cursor. But I would need to forward every click and make it invisible if the cursor left the canvas.
I could create a layered canvas with a second canvas on top of mine just for drawing the cursor.
What would be the best to do this?
Update
Sorry, I did not explain myself very well. The cursor will need to change color and snap to a grid, so I really need to paint it myself. I know about css cursor:url(...) that does not work for me.
Checkmark+1 to PitaJ and David Starkey--they are correct.
The simplest/most efficient solution is to modify the cursor itself. As mentioned, you can even do custom images for the cursor to do your color changes.
But if you absolutely need snap-to-grid then you have to go with something like the layered cursor canvas. There's no way to force a user's cursor into grid alignment. (Think of the pranks that would result!)
Both number 1 and 3 would work. I would go with number 3 myself. "Best" however is up to you.
CSS3:
#canvas1 {
cursor: url(./myCursor.cur), none;
}
Related
I want to draw an image on top of my html page depending on my mouse movement.
How can i do that? Is it a better approach to put the image below the rest of the html and scratch the html somehow away, or tu put the image above it and add it partially on top.
I found solutions on the internet with 2 images on top of each other where the top one is erased with canvas, but since i have multiple elements i want to overwrite, i have no idea how to solve it.
Assuming I've interpreted the question correctly, that the requirement is to allow the user to 'scratch away' at the page gradually revealing an image, you could do it either way.
There are libraries that will create a canvas of a page (or part thereof) such as htm2canvas. Using one of these you turn your page into an image, place it over the given image and remove (make transparent) pixels on the top canvas as the mouse moves. The drawback with this approach is that it's possible the conversion of the HTML to canvas isn't totally complete. There may be some aspects for example of CSS that aren't correctly rendered.
To be sure therefore it's probably better to do it the other way round. Lay a blank canvas over the page and copy the image to another canvas with the same dimensions but which is outside the viewport. As the mouse moves over the blank canvas copy the relevant pixels from the offscreen canvas to it.
If you could confirm that I've understood your question correctly I could go into more detail.
There's quite a few questions about this where the solution provided is to just set the top left and top down values of the image to the position of the mouse/touch, however what I want to do is to have an actual dragging movement. Regardless as to where on the canvas I press, if I drag my finger to the right x pixels, I want the image to move to the right x pixels. Same goes with left, up, and down.
I'm at a complete loss as to where to even start with this. I will be handling mobile touch events, so I feel like using canvas.addEventListener('touchmove') would be the best option, but I'm not sure.
I already have the canvas repainting and everything handled, just really need help with the logic for dragging the image in real time, instead of just snapping it into position.
Get the point where the interaction starts (touchstart) and use it to calculate how much the finger moved on the screen (in the touchmove callback) and add it to the image position (also in touchmove).
PS: Also I recommend using something like PIXI JS for canvas/WebGL stuff ... unless you need a custom solution.
I am searching a radial progress bar. recently found in stackoverflow using canvas. but the circle not smooth edges. how to fix this blurry image.
JSFIDDLE : http://jsfiddle.net/fd3k7prh/
Image:
It seems OK on my screen. As long as you don't scale canvas inside e.g. CSS it should not be blurred. Please make sure whether you have zoom enabled in your browser (e.g. by holding ctrl+mouse scroll) and your browser is displaying 100% image.
As Canvas is displaying vector image, it should not be blurred in normal zoom. However, zooming it in will always make it blurry, because it needs to be overscaled.
Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.
On a click of some button I need to show an image of a vinyl record. The image will appear somewhere next to the button and is a transparent png to make it look round.
The problem is it needs to be shown using a circle mask animating from a dot in the centre of the image and expanding to show the whole "record". How to create a rounded animated mask that will reveal the "record" image without zooming/rescaling the image.
Does anyone know a JavaScript or preferably jQuery library capable of something like that?
If you know of such a thing in a different language it might help me to write something of my own.
Thanks.
Perhaps you could create a large white (or background-colored) PNG with an alpha transparency hole in the center. Place this on top of the image to be revealed, then scale it up while keeping it pinned at its center point. Once it's scaled to the point where the entire underlying image is within the transparent hole, remove the covering image.
I have no idea how this would perform (probably badly!), but it's a thought.
HTML comes in rectangles as a rule, if you have an image with transparency, then you can scale it, keeping it's centre constant.
If you need it to be selectable only within the circle, then you will need to check the mouse coordinate for click operations to see if it is within the circle, within it's containing rectangle. See: How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery
#6bytes suggested using rounded corners.
Chrome and FireFox currently surround round-corners via the border-radius and -moz-border-radius CSS attributes, so you can achieve a circle visually with 50% border radius. However, this is only a visual difference on an underlying rectangle, clicks within the rectangle still count as being on the circle itself.
#circle {
-moz-border-radius: 50%;
border-radius: 50%;
}
Basic Rectangle Demo: http://jsfiddle.net/rL4BU/2/
You can put some code in to check if clicks are within the circle to fix this.
Circle Clicks Demo: http://jsfiddle.net/rL4BU/4/