I use a magic trackpad (a touchpad) and one thing I have noticed is that applications such as Adobe Photoshop will let me scroll diagonally (both X and Y axis at the same time).
I never thought about using that same functionality in my browser, as I didn't have any use case for it. Until now. I'm working on a project which has a "canvas" (a drawing area) that is bigger than the visible area of the browser.
I have scrolling bars (overflow: auto;), but moving around the canvas just doesn't feel as "good" (in terms of UX) as with Photoshop. That's because I can't scroll both axes at the same time.
Eg, if I'm at the top left corner of the canvas and I want to go to the bottom right corner, in Photoshop I just touch-drag diagonally two fingers on my touchpad, but in Chrome/Safari/Firefox I first have to scroll down and then scroll right.
Visual example: https://codepen.io/alexandernst/pen/XWpPJNj (the left area shows the entire canvas, the right one is what the user sees. Try to scroll in the right area until you see the red square.)
Is there any way I can implement diagonal scrolling?
Related
I am trying to build a website that moves to sections using arrow keys on the keyboard or swipe on mobile/tablets. I am using FullPage. Is it possible to have a grid like website where the user can move in a square grid like fashion rather then just up and down?
It is possible. But might be much easier without fullpage.js
So you could have the page fixed but it content overflow. So that would allow you to be able to scroll at all direction.
You could add a mouse listener to scrollTo(x,y). Where x and y are the mouse pointer location
I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!
I have a mousepen pad. I wrote a drawing app with Javascript for it and I can use it with full functionality. When I connect the pad to pc, it acts like a mouse. It fits the whole screen, but my drawing canvas is not that big.
I want the pad to fit (map) into the canvas. So, when I point in the top-right corner of the pad with the pen pointer, it currently points in the top-right corner of the PC's screen, but I want it to only point in teh top-right corner of my div.
How do I do this?
Overview diagrams in GoJS, which consist of a rectangle representing the viewport and a smaller version of the observed diagram, show some interesting behavior:
When dragging the rectangle representing the viewport close to an edge, the whole overview diagram shifts into the opposite direction.
Is there any way to disable this behavior, so the diagram remains "fixed" in the upper left corner?
This is a bug because of diagram.autoScrollRegion allowing the Diagram (Overview in this case which is a kind of Diagram) to scroll when you're dragging the box by an edge.
This bug will be fixed in the next release (1.5.4), but you can make a workaround by setting:
myOverview.autoScrollRegion = 0;
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.