一步步实现看图工具(二)
1. 控件在对话框中的适配。
2. 图像和显示控件的适配。
3. 以鼠标点为中心， 滚轮缩放图片（类似于手机图库）
4. 鼠标拖动图片。(类似于手机图库）
5。双击100%显示图片， 再次双击显示全图(类似于手机图库)
6. 图像任意角度旋转。
1. 控件在对话框中的适配。
可以先参考我这篇文章：
http://blog.csdn.net/fallingstar08/article/details/5182830
现在的控件不多我就这么写了
void CEasyImageDlg::OnSize(UINT, int w, int h)
{
if(m_player.GetSafeHwnd())
{
Move(&m_player, 0, 0, w, h, 0, 0, 800, 1000);
Move(&xyPos, 0, 0, w, h, 840, 130,100, 30);
Move(&textRGB, 0, 0, w, h, 840, 170,100, 30);
Move(&textYUV, 0, 0, w, h, 840, 210, 100,30);
Move(&imageInfo, 0, 0, w, h, 840, 50,100, 30);
Move(&scaleInfo, 0, 0, w, h, 840, 90, 100,30);
Move(GetDlgItem(IDC_BAR1), 0, 0, w, h, 801, 0, 2,1000);
Move(GetDlgItem(IDC_BAR2), 0, 0, w, h, 803, 250, 197,2);
m_player.Invalidate(FALSE);
}
}
2. 图像和显示控件的适配。
图像要尽量大的显示在控件上面， 并保持宽高比。
这里分为两种情况：
一： 图像宽高都比控件小。
直接在控件中心位置显示图像。
二： 图像的宽或高比控件大。
分别计算图像宽度/控件宽度， 图像高度/控件高度。 取一个最大值，作为缩放比例。
然后在控件中心位置显示图像。
void CImageView::CalcImageShowRect(const CRect& rc, const CRect& rcImage, CRect& rcShow)
{
double dw= rcImage.Width()/(1.0*rc.Width());
double dh= rcImage.Height()/(1.0*rc.Height());
int cx = rc.Width()/2;
int cy = rc.Height()/2;
rcShow = rc;
if(dw< 1.0 && dh < 1.0)
{
rcShow.left = cx - rcImage.Width()/2;
rcShow.top = cy - rcImage.Height()/2;
rcShow.right = rcShow.left + rcImage.Width();
rcShow.bottom = rcShow.top + rcImage.Height();
scale = 1.0;
}
else
{
double s = max(dw, dh);
double fw = rcImage.Width()/s;
double fh = rcImage.Height()/s;
rcShow.left = cx - fw/2;
rcShow.right = cx + fw/2;
rcShow.top = cy - fh/2;
rcShow.bottom = cy + fh/2;
}
}
3. 以鼠标点为中心， 滚轮缩放图片。
4. 鼠标拖动图片。
5。双击100%显示图片， 再次双击显示全图
对话框响应滚轮事件然后传给控件。
上面计算过的控件显示区域， 是不变的。 我们修改图像的显示区域来实现缩放功能。
先把坐标点从屏幕坐标系 映射到图像坐标系。
void CImagePlayer::ScreenToImage(CPoint& pt)
{
CPoint ret;
ret.x = rcImage.left + rcImage.Width()*(pt.x-rcShow.left)/rcShow.Width();
ret.y = rcImage.top + rcImage.Height()*(pt.y-rcShow.top)/rcShow.Height();
pt = ret;
}
定义一个scale变量来记录缩放倍数。
比如scale=2,那么 新的显示宽度=图像宽度/2.
由于缩放前后， 图像坐标系里的鼠标点离左右显示边界的距离是不变的。
推出
(鼠标点横坐标-新的左边界)/新的宽度 = （(鼠标点横坐标-旧的左边界)/旧的宽度。
我们要求的是新的左边界， 其他参数已知。
void CImagePlayer::Scale(CPoint pt)
{
if(scale == 1.0)
{
rcImage = CRect(0, 0, w, h);
}
else
{
ScreenToImage(pt);
double dw = w/scale;
double dh = h/scale;
double ds = dw/rcImage.Width();
rcImage.left = pt.x - ds*(pt.x-rcImage.left);
rcImage.right = rcImage.left + dw;
rcImage.top = pt.y - ds*(pt.y-rcImage.top);
rcImage.bottom = rcImage.top + dh;
if(rcImage.left < 0) rcImage.left = 0;
if(rcImage.top < 0) rcImage.top = 0;
if(rcImage.bottom > h) rcImage.bottom = h;
if(rcImage.right > w) rcImage.right = w;
}
SendScaleInfo();
Invalidate(FALSE);
}
效果图：
6. 图像任意角度旋转。
图像旋转其实是很普通的几何问题。
旋转矩阵：
OPENCV提供了计算旋转矩阵的函数， 和仿射变换函数
//! warps the image using affine transformation
CV_EXPORTS_W void warpAffine( InputArray src, OutputArray dst,
InputArray M, Size dsize,
int flags=INTER_LINEAR,
int borderMode=BORDER_CONSTANT,
const Scalar& borderValue=Scalar());
我的实现如下：
void rotateImage(Mat& img, double degree, int &w, int &h)
{
double angle = degree * CV_PI / 180.;
double a = sin(angle), b = cos(angle);
int width = img.cols;
int height = img.rows;
w= int(height * fabs(a) + width * fabs(b));
h= int(width * fabs(a) + height * fabs(b));
w = ALIGN_UP(w, 4);
h = ALIGN_UP(h, 4);
float map[6];
CvMat map_matrix = cvMat(2, 3, CV_32F, map);
CvPoint2D32f center = cvPoint2D32f(width / 2, height / 2);
cv2DRotationMatrix(center, degree, 1.0, &map_matrix);
map[2] += (w - width) / 2;
map[5] += (h - height) / 2;
warpAffine(img, img, Mat(&map_matrix), Size(w, h),
CV_INTER_LINEAR | CV_WARP_FILL_OUTLIERS,BORDER_CONSTANT, Scalar::all(0));
}
