Demo introduction: left: no data, middle: picture area, right: frame data information on the picture
Realize the function: 1. You can use the mouse to draw the frame on the picture.
2. Click the box with the mouse, select the data in the box on the right, and scroll in the visible area. Similarly, click the data on the right, and the corresponding box in the middle will change color.
3. Put the mouse on the box, the icon to delete and change the size will appear, and then it will disappear.
4. Click the delete icon on the box, the box will be deleted, and the data in the box on the right will also be deleted.
5. Put the mouse on the resize icon, press and drag the mouse to change the size of the box, and the data of the right box will also change.
6. Click on the box, press the arrow keys, the box can be moved, and the data on the right side will also change.
Implementation difficulties: 1. Get the mouse click position on the picture, drag to start the frame, release the mouse to stop the frame.
2. Drag the resize icon to change the corresponding frame.
3. Relative to the picture, the coordinates of the box, the calculation of the width and height.
Bug summary: 1. Binding and unbinding of mouse events
2. Monitor the completion of the image loading and obtain the real width and height of the image.
3. Event conflict between parent container and child element.
project link: project link