I have a canvas in which some objects are drawn. As soon as the drawing of the objects nears the right of the canvas I want to scroll the canvas to the left, one pixel at a time (in code that is).
I tried, only resulting in weird behavior of the canvas. Is there a conclusive way to do this?
Thanks
I canât imagine the context, it is like someone drawing something with a pen over a paper that has a frame above it, and when the pen reaches the right side of the frame you want slowly pull the paper under it like 3cm to the left? This will make the person who is drawing crazy.
Iâm picturing like a scrolling line graph for a use case. Iâm mobile right now so I canât write up a detailed guide, but try picturing it like this, OP.
The canvas area is like a camera or viewport, you can draw anything you want outside of the canvas but the user only sees whatâs within its bounds (0 - Width and 0 - Height).
You can scroll the entire drawing to the left off the view when necessary. This is where an object oriented drawing system will help.
you need a offset property
desired value
actual value
use a timer and invalidate (refresh) the drawing if needed
start with sub class a canvas to add methods and properties
you can draw each object with own new offset or use translate from the graphics context itself
Exactly. The graph is controlled by a timer and draws an array of values according to some activity in the window (not yet build). When the graph reaches the last bar I want to scroll it to the left (a block = 10x10 pix).
Right, Iâd recommend building an object oriented system so you can just tell all the objects to shift to the left. If youâd like to pay someone to âjust get it doneâ you are welcome to contact me privately. My email address is support@strawberrysw.com or you can send me a private message on the forum.
Hi yes, I figured that out. Scrolling is not the right approach as in every timer tick the whole picture is redrawn. I need to shift all columns to the left to make room for a new column.
Working on it. Thanks
Edit: It was very easy⊠I just removed the first element of the array.
Which means the whole picture is redrawn every timer tick.
Yes, but there is no flicker. Very fast.
Wouldnât it be more efficient to update individual squares of your graphic instead of constantly redrawing the entire canvas?
You could represent your graph in two matrices. In the first, you mark squares as filled (1) or empty (0), and in the second, you mark whether the contents of a square have changed.
Then, you only redraw the changed squares. No more scrolling required.
Well it runs pretty smooth with very little code. This is 200 msec timer tick. It is all parameter based so changing/scaling the canvas doesnât influence the behavior. (small hickups are due to mp4 to gif conversion).
have you consider or testing using a bar chart with updated data?
Ask Claude.
I wouldnât say its smooth at all. Thatâs jerky scrolling for sure.
Due to MP4 to GIF conversion. In real life it is very smooth. But it âscrollsâ the default column width which is 5 pixels.
