Loop through a picture, and if the picture is smaller than the screen, continue to fill it with the picture

Scene:

The effect that needs to be done is almost as described in the title, that is, if the screen width is 720 and the width of the picture is only 150, now it needs to start from the middle and move the picture toward both sides.

Let's now move to the right, for example, if you move 150 to the right, and then you draw a whole full shape and move on, you not only need to draw a new shape from the middle, but the full shape that has been drawn will have to move to the right. To achieve the effect of animation.

Analysis:

In order to achieve the above effect, the first thought is to use animation, but found:

1) If you choose to pan the animation, you can only move the picture, will not keep the path of the previous picture, so that the background map will not appear in a continuous situation, but only a single picture, not here want.

2) Select more than one picture to cycle, to GIF, so that the use of the picture resources too much, also do not consider.

Solution:

Finally decided to implement a view, through the OnDraw in the continuous drawing of a picture from each side, and panning the drawn graphics, so as to achieve the desired effect.

This seems like a game implementation, that is, a character in the screen walk, in fact, it has always been in the center of the screen, but the background map in the continuous drawing to the left.

　　

。

At present, the idea is quite clear, but in the process of implementation, there are some situations to consider clearly, here to do a simple analysis.

1) The picture is drawn from the middle a little bit, where an offset xoffset is needed, and the speed is moved, so there's a variable velocity.

2) The display of the picture in the screen exists in two cases: full display, incomplete display.

i) for situations where the display is incomplete, we need to create a new bitmap based on Bitmap's createbitmap and draw it out.

So what is the width of the graphic that is not completely displayed? Obviously, in the middle of the newly drawn graphic width of xoffset, the rightmost incomplete shape of the width of sourcewidth-beyond the width of the screen.

Now that you want to build a new bitmap with Xoffset as the CreateBitmap parameter, Xoffset has to have a maximum value of Xoffsetlimit, where the Xoffset value is limited to "1,xoffsetlimit",

Every time xoffset+speed>xoffsetlimit, you have to reset Xoffset to 1.

At this time xoffsetlimit=sourcewidth.

But!!

If sourcewidth>parentwidth, xoffset only need to limit to parentwidth, that is, xoffsetlimit=parentwidth. So the xoffsetlimit has to take the smaller of the picture and the width of the area.

II) to show the complete situation, we have to consider that the entire area (we have half a screen here for example), can draw a few full graphs?

At this time it is natural, we will think, how much can be drawn, then parentwidth (area width)/sourcewidth (full graphic width) = Maxcompletenum (maximum number of full graphics)

But!!

At the same time we have to consider that, because the screen is constantly moving, it is possible at a certain moment, the number of complete graphs drawn is maxcompletenum (for example, 2),

But when you move on to the right, the complete graphic on the far right is out of the screen, and the newly drawn graphics in the middle are not yet complete, and there are only 1 full graphics in the screen!!

So, here we also need a variable to record the number of full graphs that can be drawn on the screen at this moment completenumbeforeout.

3) through the above analysis, we know that there is a maximum of maxcompletenum in the screen, the total number of graphs drawn at some point should be completenumbeforeout. But the screen is always drawing, how do we know the value of completenumbeforeout?

At this point, we have to first have a variable drawnnum, that is, the number of complete graphs that have been drawn from the beginning to some point. Whenever Xoffset add speed, will be to determine whether more than Xoffsetlimit, if more than, in the Xoffset put back 1 of the same time, will let Drawnnum plus 1.

However, since you can only draw Maxcompletenum full graphics at most, you have to limit the drawnnum to "0,maxcompletenum" after you finish adding 1.

Since Drawnnum is the number of complete graphs drawn from the beginning to the present, it is always sliding scale until the maximum, so how many full graphs are displayed on the screen at this time?

You have to use a loop to judge it at this point. If the xoffset+ i*sourcewidth <= screenwidth (screen width), indicating that the screen has not been exceeded, that is, I corresponds to this shape is still complete, so at this time completenumbeforeout can add 1. Where I is the range of " 1,drawnnum "

4) In addition, we have to record the current moment, whether the drawing has exceeded the screen, that is, there is a variable hasexist.

Hasexist = xoffset+drawnnum*sourcewidth > ScreenWidth. This should not be difficult to understand, it should be noted that the expression and the previous expression is assumed xoffset is relative to the middle of the screen, in fact, the formula is added SCREENWIDTH/2.

5) The current position, the variables are almost complete, we began to draw.

First, determine whether there is a complete picture of the current screen, that is, completenumbeforeout, if greater than 0, the corresponding number is plotted in the appropriate location.

It then draws the newly moved figure from the middle, with a width of xoffset.

Finally, we have to use the above hasexist to judge. That is, if Hasexist is false, then the screen is not exceeded and no action is made.

If Hasexist is true, it is already over the screen, then draw the rightmost graphic.

6) The above process down, looks pretty good, in fact there is a very big problem.

Since Xoffset each time is speed, so when the xoffset reach the maximum value, often not equal to xoffsetlimit, but

Maxoffsetcount (maximum number of times Xoffset can be added before limit) = (xOffsetLimit-1)/2;

Maxoffset (maximum value of xoffset) = 1+ Maxoffsetcount * SPEED;

In judging whether the above screen judgment is total, we are assuming that Xoffset + drawnnum * sourcewidth > ScreenWidth will certainly meet the conditions.

But in fact, since Drawnnum has a maximum value of maxcompletenum, and Xoffset also has a maximum maxoffset, there is a case where Maxoffset + maxcompletenum * Sourcewidth still worse, not more than screenwidth.

(in sourcewidth=147,parentwidth=720, for example, you can draw up to 1 full graphs at this point, with a maximum offset of 136, and up to 139.5 beyond the screen xoffset.) Because 136 plus a speed (15) is restored again, so it is not possible to exceed the screen at this time

In order to avoid the above situation, when judging Maxoffset + maxcompletenum * Sourcewidth < ScreenWidth, you have to make Maxcompletenum plus 1!!

Then attach the source code

Loop through a picture, and if the picture is smaller than the screen, continue to fill it with the picture