![]() Clicking and dragging in the canvas will move the image around, and scrolling your mouse wheel while over the canvas will zoom in to and out of the image at the exact position of your cursor. You can also see a fully working JSFiddle here.Ĭheck out the example below. If you just want a fast answer to “how do I transform a point to the transformed canvas space”, click here to go right to the secret sauce. ![]() This article goes into why and how this works, but you don’t really need to know that to accomplish this. So, I set out to create a nice modern version that worked and that I could understand, and that made use of the canvas’s built in transformation tracking. And all the examples required you to track your own version of the transformations applied to the canvas, but now with getTransform we can make use of the fact that the canvas already stores all of it’s transforms. All examples and info online followed bad practices or use outdated features to work. I wanted to be able to add intuitive zooming and panning in an image editing web app I was working on, but this turned out to be a bit harder than I expected. Add the event listeners for mousedown, mousemove, and mouseup getContext ( "2d" ) // event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas. getElementById ( "myPics" ) const context = myPics. When true, moving the mouse draws on the canvas let isDrawing = false let x = 0 let y = 0 const myPics = document. ![]() MouseEvent.x Read onlyĪlias for MouseEvent.clientX. The amount of pressure applied when clicking. ![]() MouseEvent.webkitForce Non-standard Read only This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). The type of device that generated the event (one of the MOZ_SOURCE_* constants). MouseEvent.mozInputSource Non-standard Read only Instead of using this deprecated (and non-standard) property, you should use PointerEvent and look at its pressure property. The amount of pressure applied to a touch or tablet device when generating the event this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). MouseEvent.mozPressure Non-standard Deprecated Read only Returns true if the shift key was down when the mouse event was fired. The Y coordinate of the mouse pointer in global (screen) coordinates. The X coordinate of the mouse pointer in global (screen) coordinates. The secondary target for the event, if there is one. The Y coordinate of the mouse pointer relative to the whole document. The X coordinate of the mouse pointer relative to the whole document. The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. The Y coordinate of the mouse pointer relative to the position of the last mousemove event. The X coordinate of the mouse pointer relative to the position of the last mousemove event. Returns true if the meta key was down when the mouse event was fired. Returns the vertical coordinate of the event relative to the current layer. Returns the horizontal coordinate of the event relative to the current layer. Returns true if the control key was down when the mouse event was fired. The Y coordinate of the mouse pointer in local (DOM content) coordinates. The X coordinate of the mouse pointer in local (DOM content) coordinates. The buttons being pressed (if any) when the mouse event was fired. The button number that was pressed (if applicable) when the mouse event was fired. Returns true if the alt key was down when the mouse event was fired. This interface also inherits properties of its parents, UIEvent and Event.
0 Comments
Leave a Reply. |