Canvas --- Canvas image processing, image Viewer Implementation of ideas, drag border control,

Canvas --- Canvas image processing, image Viewer Implementation of ideas, drag border control,

I did not expect that it took me so much time to create an image viewer and it was not ready.

Now, sort out your ideas, record the deficiencies, and ask others for advice in the future.

Basic Ideas:

I. Image Viewer function-Scaling

To achieve free scaling, first we need to adapt the image to the canvas, that is, to give you a large image, you can properly scale it and then draw it in the canvas.

For example, if the image is 500*500 and the canvas is 240*320, the scaled width is 240 and the length is 240/500*500, draw an image.

Then there is free scaling. At this moment, you only need to zoom in and zoom out a rectangle, and then adapt the image to the rectangle. Then, use the obtained zoom width and height to draw the enlarged image.

Ii. Image Viewer function --- drag

Canvas mainly uses context. isPointInPath (x, y); this method is used to determine which object is currently clicked. Then you can drag it. For more information, see my previous article.

Drag boundary detection. This is mainly achieved by maintaining a vertex's movable rectangle. See the figure for details.

Iii. Deficiency

Since the default canvas Midpoint is used for scaling, if you drag the canvas, the scaled point is not the midpoint. What should I do? The effects of many methods are not very good. Ask for advice.

Certificate ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Illustration: