MFC图形绘制——绘制直尺和坐标系

一、实验目的

1.掌握建立MFC应用程序的方法;

2.掌握映射模式。

二、实验内容

1.在MFC中绘制直尺,直尺需要有刻度,类似于日常学生使用的透明塑料直尺,需要建立四个直尺,分别分布在屏幕客户区的上、下、左、右四个边界。尺子需要有刻度,那客户区上端的尺子距离,应该有厘米、5毫米、1毫米刻度,刻度用竖线显示,长度分别为7毫米、6毫米、5毫米,外观类似于学生直尺,右端留出一公分,防止4个尺子碰在一起。

2.画出一坐标系,给出x坐标变化范围、y坐标变化范围,画出坐标轴,并在坐标轴上标出刻度、原点,要求坐标轴充满客户区。

三、实验步骤

(一)在MFC中绘制直尺。

1.设计思路:

(1)声明客户区矩形

(2)获得客户区坐标

(3)设置映射模式

(4)分四个方向画尺子,并且通过循环画出尺子刻度

注意:

映射模式选用的是MM_LOMETRIC,其对应的坐标系特征是:每个逻辑坐标被转换为0.1 mm。正x向右,正y向上。

2.代码如下:

(1)声明客户区矩形并设置映射模式

void CRulerView::OnDraw(CDC* pDC)

{

    CRulerDoc* pDoc = GetDocument();
ASSERT_VALID(pDoc);
// TODO: add draw code for native data here
CRect rect; //声明客户区矩形
GetClientRect(&rect); //获得客户区坐标
pDC->SetMapMode(MM_LOMETRIC); //设置映射模式为:MM_LOMETRIC,即每个逻辑坐标被转换为0.1 mm。正x向右,正y向上。
//设置实际的客户区窗口的长度和宽度范围
int height=rect.Height()*2.5;
int width=rect.Width()*2.5;
int i;

(2)画顶部的尺子

//top ruler 画顶部的尺子

    //先在最上部画一条直线,作为尺子的度量边缘,从上(/左)往下(/右)画
pDC->MoveTo(,);
pDC->LineTo(width-,);
COLORREF c=RGB(,,);
//开始进行循环,画尺子的刻度
for( i=;i<width-;i+=)
{
//尺子距离为1厘米的,刻度竖线长度为7毫米
if(i%==)
{
pDC->MoveTo(i,);
pDC->LineTo(i,-);
} //尺子距离为5毫米的,刻度竖线长度为6毫米
else if(i%==)
{
pDC->MoveTo(i,);
pDC->LineTo(i,-);
} //尺子距离为1毫米的,刻度竖线长度为5毫米
else
{
pDC->MoveTo(i,);
pDC->LineTo(i,-);
} }

(3)画底部的尺子

//bottom ruler  画底部的尺子
//先在底部画一条直线,作为尺子的度量边缘(从上/左往下/右画)
pDC->MoveTo(width,-height+);
pDC->LineTo(,-height+);
//开始进行循环,画尺子的刻度
for( i=;i<width-;i+=)
{ //尺子距离为1厘米的,刻度竖线长度为7毫米
if(i%==)
{
pDC->MoveTo(width-i,-height+);
pDC->LineTo(width-i,-height+);
}
//尺子距离为5毫米的,刻度竖线长度为6毫米
else if(i%==)
{
pDC->MoveTo(width-i,-height+);
pDC->LineTo(width-i,-height+);
}
//尺子距离为1毫米的,刻度竖线长度为5毫米
else
{
pDC->MoveTo(width-i,-height+);
pDC->LineTo(width-i,-height+);
}
}

(4)画左边的尺子

//left ruler  画左边的尺子
//先在最左部画一条直线,作为尺子的度量边缘(从上/左往下/右画)
pDC->MoveTo(,-height);
pDC->LineTo(,-);
//开始进行循环,画尺子的刻度
for( i=;i<height-;i+=)
{
//尺子距离为1厘米的,刻度竖线长度为7毫米
if(i%==)
{
pDC->MoveTo(,-height+i);
pDC->LineTo(,-height+i);
}
//尺子距离为5毫米的,刻度竖线长度为6毫米
else if(i%==)
{
pDC->MoveTo(,-height+i);
pDC->LineTo(,-height+i);
}
//尺子距离为1毫米的,刻度竖线长度为5毫米
else
{
pDC->MoveTo(,-height+i);
pDC->LineTo(,-height+i);
}
}

(5)画右边的尺子

//right ruler  画右边的尺子
//先在最右边画一条直线,作为尺子的度量边缘(从右往左画)
pDC->MoveTo(width,);
pDC->LineTo(width,-height+);
//开始进行循环,画尺子的刻度
for( i=;i<height-;i+=)
{
//尺子距离为1厘米的,刻度竖线长度为7毫米
if(i%==)
{
pDC->MoveTo(width,-i);
pDC->LineTo(width-,-i);
}
//尺子距离为5毫米的,刻度竖线长度为6毫米
else if(i%==)
{
pDC->MoveTo(width,-i);
pDC->LineTo(width-,-i);
}
//尺子距离为1毫米的,刻度竖线长度为5毫米
else
{
pDC->MoveTo(width,-i);
pDC->LineTo(width-,-i);
}
}

2.运行结果截图:

 MFC图形绘制——绘制直尺和坐标系

(二)绘制坐标系。

1.设计思路:

(1)声明客户区矩形

(2)获得客户区坐标

(3)设置映射模式

(4)画出X轴、Y轴,并且通过循环画出坐标变化范围

注意:

映射模式选用的是MM_LOMETRIC,其对应的坐标系特征是:每个逻辑坐标被转换为0.1 mm。正x向右,正y向上。

2.代码如下:

(1)声明客户区矩形并设置映射模式

void CCoordinateSystemView::OnDraw(CDC* pDC)

{
CCoordinateSystemDoc* pDoc = GetDocument();
ASSERT_VALID(pDoc);
// TODO: add draw code for native data here
CRect rect;//声明客户区矩形
GetClientRect(&rect);//获得客户区坐标 int height=(int)rect.Height()*2.5;
int width=(int)rect.Width()*2.5;
int i;
pDC->SetMapMode(MM_LOMETRIC); //设置映射模式为:MM_LOMETRIC,即每个逻辑坐标被转换为0.1 mm。正x向右,正y向上。
pDC->SetWindowExt(width,height); //设置窗口
pDC->SetViewportExt(width,-height); //x轴水平向右,y轴垂直向上
//pDC->SetViewportOrg(width/2,height/2); //客户区中心为坐标系原点

(2)画X轴和Y轴

    //画X轴
pDC->MoveTo(,-height/);
pDC->LineTo(width,-height/);
//画Y轴
pDC->MoveTo(width/,);
pDC->LineTo(width/,-height);

(3)画X轴和Y轴的坐标刻度

    //画X轴负半轴刻度
for( i=;i<=width/;i+=)
{
pDC->MoveTo(i,-height/);
pDC->LineTo(i,-height/+);
}
//画X轴正半轴刻度
for( i=width/;i<=width;i+=)
{
pDC->MoveTo(i,-height/);
pDC->LineTo(i,-height/+);
}
//画y轴正半轴刻度
for( i=;i<=height/;i+=)
{
pDC->MoveTo(width/,i);
pDC->LineTo(width/+,i);
}
//画X轴负半轴刻度
for( i=-height/;i<=height;i+=)
{
pDC->MoveTo(width/,-i);
pDC->LineTo(width/+,-i);
}

2.运行结果截图:

 MFC图形绘制——绘制直尺和坐标系

四、实验结果与讨论

(一)在MFC中绘制出的直尺如下图所示:

 MFC图形绘制——绘制直尺和坐标系

(二)在MFC中绘制出的坐标系如下图所示:

 MFC图形绘制——绘制直尺和坐标系

五、总结

(一)本次实验按时按量完成。

(二)通过本次实验,掌握了建立MFC应用程序的方法。

(三)通过本次实验,我掌握了映射模式及其使用。

(四)实验过程中遇到的问题及注意点:

1.客户区实际长度和宽度的设置范围应该为怎么样才能适配屏幕?

2.需要注意的是:映射模式选用的是MM_LOMETRIC,其对应的坐标系特征是:每个逻辑坐标被转换为0.1 mm。正x向右,正y向上。

参见源码:https://github.com/shenxiaolinZERO/Resources/tree/master/Resources/Computer-Graphics/ruler

https://github.com/shenxiaolinZERO/Resources/tree/master/Resources/Computer-Graphics/CoordinateSystem

上一篇:jQuery的删除的三种方法remove(),detach(),empty()


下一篇:binding与属性