1. Some time ago, the product manager came to me with the function of picture clipping: Brother, how come this picture clipping is a circle on Huawei mobile phone, while it is a square on Xiaomi mobile phone? I said: yes, I use the system’s own picture cropping function, different manufacturers have customized Google cropping box, even if the same manufacturer of different models of mobile phones may be inconsistent, and the cropping effect of the system can be perfectly adapted to all mobile phones, there is no compatibility problem; The product manager said no and rattled off a list of discordments, which resulted in me customizing the image cropping function.

  2. Custom cropping is custom cropping. It’s an image with a removable box. Look at me. I spent about 10 minutes on Github looking for a great clipping library called Cropper. This library works like this: Hold down the clipping center and drag it to any position in the image. Press the four corners of the clipping frame to place it into the clipping frame. You can also set the initial size of the clipping box as well as the proportional scaling. Well, that’s it, so I introduced this library into the project, looking at the image cropping effect in my heart.

  3. After a period of time, the product manager came to me: “Brother, there is something wrong with your picture cutting function, why can only drag but not zoom? I said yes, you drag four corners can not zoom it. But I want two fingers to scale; The picture clipping function of wechat and some mobile phone systems can be roughly divided into 3 categories: the first kind of mobile phone does not support double finger zoom, the second kind of mobile phone double finger zoom background picture (mainstream), the third kind of mobile phone double finger zoom clipping box; After a discussion with the product manager, decided to make a double finger zoom cutting box.

  4. Finally, today’s topic, in fact, the custom image cropping function does not handle the image display and touch events, there is nothing left, Cropper library does a lot of packaging on this basis; The use of some design patterns and code packaging is worth learning, I will not analyze the specific, there is a great online god of this piece of analysis in detail, I will add cropper library does not have the double finger zoom function.

  5. Double-finger zooming mainly involves oTouchEvent. Normally, we deal with touch events by ACTION_DOWN, ACTION_MOVE and ACTION_UP. If you have multiple fingers, you have to deal with new ACTION_POINTER_DOWN and ACTION_POINTER_UP events, and every time you execute an ACTION_POINTER_DOWN event, you have a new finger touching the screen, When the ACTION_POINTER_UP event is executed, there are extra fingers leaving the screen. From these two events, we can accurately determine how many fingers are on the screen when the ACTION_MOVE event is executed, and then when there are multiple fingers on the screen, GetX (0), getX(1), getX(2)… To obtain the coordinates of each finger on the screen. Since we only deal with double finger scaling, we only take the coordinates of the first and second fingers here, and judge whether the user wants to zoom in or out according to the change of the distance between the two coordinates when the ACTION_MOVE event is executed each time.

  6. Is the first time I used to zoom in on the distance between the two coordinate change cutting box, due to the width and height is half of the zoom range is poor, so every time is geometric scaling, such belies the user habit, such as user two fingers along the Y-axis scaling, cropping box will scale geometric scale width and height, back made some improvement; Change the difference of the X coordinate and the difference of the Y coordinate to scale the width and height of the clipping box respectively, so that it is more convenient to use.

  7. Whether double refers to scale cutting box or zoom background, you can use these ideas to deal with, of course, this is just a train of thought, concrete implementation have to fine-tuning, according to the effect such as zoom box, according to the distance of double refers to zoom to zoom box, cutting box zoom speed too slow, we will give the zoom value multiplied by scaling factor, the appropriate adjustment to meet the effect of the users; When zooming in on the background, if you reduce the size of the image, it will cause the clipping box to exceed the size of the image. Here because demo is implemented in the company, I did not post the code when writing the blog, I believe that after reading this implementation idea, slowly write their own specific effect should not be difficult.