|GDI+: Implementing image scrolling with inertia |
User rating: 0/10 (0 votes)
|Before you begin:|
|The inertial scrolling can be described as below: |
After releasing the mouse button, the image scrolling coninues while decelerating slowly, simulating the presence of inertia. The level of the deceleration depends on the momentum the mouse cursor obtains at the button release.
The code is based on custom GDI+ class. Download the class module first and save it in gdiplus.prg file.
Download image file (10,000 x 64 pixels) to be used with this code sample.
Otherwise use any wide image, preferrably 24-bit bitmap. I have no explanation yet, but the code sample works a bit different with PNG, JPEG, and 16-bit bitmaps. Even when they are directly converted from an original 24-bit bitmap file.
Visualization is implemented for the boundaries and the relative position.
GDI+: Scrolling through large image using the mouse
Creating thumbnails to preview images in a directory
||Members area. Log in to view this example.|
User rating: 0/10 (0 votes)
|11171 bytes |
Created: 2013-11-24 16:30:03
Modified: 2013-12-12 13:28:55
Visits in 7 days: 181
|GDI+ provides adequate rendering as long as the image height stays below 100 pixels. For larger sizes as well as for some backgrounds the image tearing becomes more noticeable.|
NetworkWorld: The iPhone patent Steve Jobs particularly cared about - inertial scrolling
The Dynamics of Scrolling
Scrolling deceleration algorithm used in this code sample produces comparatively good rendering, but still can be improved.
stackoverflow: Duration for Kinetic Scrolling (Momentum) Based On Velocity?
Provides a simple recipe for the rendering:
choose ticking frequency close to 16.7 msec (targeting 60 fps)
on each tick decrease the speed by 5%
stop scrolling either after a certain number of ticks or when the speed gets below a specified limit
Also called Kinetic Scrolling.
* * *
I am working on a prototype of mouse-oriented ListView control. It will implement inertial scrolling, simple page flipping, ownerdraw items and more.
Most likely the final control will be an ActiveX control. VCX or PRG version is also feasible. I did some prototyping in VFP using GDI+ class library with good results.
The content of the control -- uniform-size items -- is positioned in rows and columns, and can be scrolled either vertically or horizontally.
Two modes of scrolling are available. When the free scrolling is selected, the control moves its content matching the moves of the cursor. While selecting the page flipping makes the control display a specified number of rows and columns with fluid transition from page to page.
One-row horizontal free scrolling example:
|Word Index links for this example:|
|Translate this page:|