![]() ![]() This step is important because otherwise we would always calculate the pointer offsets from the original viewBox values and the user will drag the SVG from the starting point every time.Hope Armstrong Follow Product Designer at Treehouse. Now that the viewBox has been updated, we need to save its new values when the user stops dragging the SVG. If you don’t feel comfortable with the concept of viewBox, I would suggest you first read this great article by Sara Soueidan. Svg.setAttribute('viewBox', viewBoxString) ĭocument.querySelector('.viewbox').innerHTML = viewBoxString We apply the new viewBox values onto the SVG The X & Y values are equal to the current viewBox minus the calculated distances ![]() We create a string with the new viewBox values NewViewBox.y = viewBox.y - (pointerPosition.y - pointerOrigin.y) NewViewBox.x = viewBox.x - (pointerPosition.x - pointerOrigin.x) The viewBox x & y values must be calculated from the original values and the distances We calculate the distance between the pointer origin and the current position This prevent user to do a selection on the page Only run this function if the pointer is down Function called by the event listeners when user start moving/dragging The distances calculated from the pointer will be stored here We save the original values from the viewBox We do this for both the X and Y axis and we apply the calculated values on the viewBox. Now that we have the coordinates of the original position where the user started to drag inside the SVG, we can calculate the distance between the current pointer position and its origin. Var pointerPosition = getPointFromEvent(event) We get the pointer position on click/touchdown so we can get the value once the user starts to drag IsPointerDown = true // We set the pointer as down Function called by the event listeners when user start pressing/touching This variable will contain the original coordinates when the user start pressing the mouse or touching the screen This variable will be used later for move events to check if pointer is down or not Once the page is ready and waiting for any user interactions, we can start handling the mousedown/touchstart events to save the original coordinates of the pointer and create a variable to let us know if the pointer is down or not. If event is triggered by a touch event, we get the position of the first finger This function returns an object with X & Y values from the pointer event Svg.addEventListener('touchmove', onPointerMove) // Finger is movingīecause we could have touch events and pointer events, we need to create a tiny function to returns to coordinates either from the first finger either from a pointer. Svg.addEventListener('touchend', onPointerUp) // Finger is no longer touching the screen Svg.addEventListener('touchstart', onPointerDown) // Finger is touching the screen Add all touch events listeners fallback Svg.addEventListener('mousemove', onPointerMove) // Mouse is moving Svg.addEventListener('mouseleave', onPointerUp) // Mouse gets out of the SVG area Svg.addEventListener('mouseup', onPointerUp) // Releasing the mouse ![]() Svg.addEventListener('mousedown', onPointerDown) // Pressing the mouse Add all mouse events listeners fallback Svg.addEventListener('pointermove', onPointerMove) // Pointer is moving ![]() Svg.addEventListener('pointerleave', onPointerUp) // Pointer gets out of the SVG area Svg.addEventListener('pointerup', onPointerUp) // Releasing the pointer Svg.addEventListener('pointerdown', onPointerDown) // Pointer is pressed We will need to add some fallback to make sure all users will be able to drag the SVG. We can use the Pointer Events to handle all kind of pointers (mouse/touch/stylus/…) but those events are not yet supported by all browsers. To get the mouse or touch position, we first need to add event listeners on our SVG. Let’s check those steps one by one more thoroughly.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |