Jump to content

Infinite Scroll


gsknbabu
 Share

Recommended Posts

Hi,

I want to allow the user to either scroll to document bound borders endlessly i.e Infinitely drag on the canvas. Please help!!!

Ex: 

A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas.

Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser.

Please refer the link https://gojs.net/latest/samples/scrollModes.html where user can start dragging the rectangle to the boundaries, scrolls automatically towards the mouse pointer.

Thanks,

Naveen.

 

Link to comment
Share on other sites

Search for "camera pivot" explanation in this subforum to understand how container transform works. As for drag&drop, the idea is to remember mouse position in container local coordinates and then restore it every time mouse moves. http://www.html5gamedevs.com/topic/33198-beginner-using-piximatrix-to-perform-zoom-has-strange-initial-behavior/?tab=comments#comment-190615 has pushPivot / popPivot. Try pushPivot when you start drag and popPivot every frame until mouseup.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...