ImageViewer技术实现细节

第1章 ImageViewer工具使用方法

1.1. 图像加载

1.1.1. 单图像加载

左上角菜单，“File”->“单图像”，或者Ctrl-S,弹出文件对话框，选择图像文件，当前支持bmp，png，jpg格式。

结果如下图所示：

1.1.2. 多图像加载

左上角菜单，“File”->“多图像”，或者Ctrl-M,弹出文件对话框，选择图像文件，当前支持bmp，png，jpg格式,可以同时选择多张。

结果如下图所示：

1.2. 图像操作

1.2.1. 图像操作

左键按下拖动，可以平移图像。
滚轮旋转，以鼠标为中心缩放图像。
右键按下拖动，可以绘制区域，最多支持4层。

1.2.2. 多图像同步

左键按下拖动，平移图像。滚轮旋转，以鼠标为中心缩放图像。在多图像情况下，所有图像会同步缩放和平移。
如下图所示：

1.3. 像素值查看

1.3.1. 图像像素值显示

当图像缩放比例超过16倍时，即单个图像像素占36*36屏幕分辨率像素时，会显示网格。

当图像缩放比例超过36倍时，即单个图像像素占36*36屏幕分辨率像素时，会显示数字。

第2章 ImageViewer技术实现细节

采用GDI (Graphics Device Interface) API来进行绘图操作。实现了如下功能：
以鼠标为中心缩放；鼠标左键按下拖动；鼠标悬浮绘制光标和坐标提示；自定义事件实现多图像平移缩放同步；鼠标右键绘制区域等。

2.1. 以鼠标为中心缩放

需要在滚轮事件中获取鼠标位置，然后使用缩放前，缩放后比例，缩放前平移，计算得到缩放后平移；
rollPosX，rollPosY是鼠标位置，scale是缩放后比例，prescale是缩放前比例；
canvw，canvh是绘图区域大小，imgw，imgh是图像大小。

imagePosX = rollPosX / scale + (imagePosX