📄 tutorial2-06.html
字号:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="Translator" content="Cavendish"><meta name="Qt zh_CN Documents Website" content="http://www.qiliang.net/qt"><title>画布控制</title><style type="text/css"><!--h3.fn,span.fn { margin-left: 1cm; text-indent: -1cm; }a:link { color: #004faf; text-decoration: none }a:visited { color: #672967; text-decoration: none }body { background: #ffffff; color: black; font-family: "Times New Roman" }--></style></head><body><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr bgcolor="#E5E5E5"><td valign=center> <a href="index.html"><font color="#004faf">主页</font></a> | <a href="classes.html"><font color="#004faf">所有的类</font></a> | <a href="mainclasses.html"><font color="#004faf">主要的类</font></a> | <a href="annotated.html"><font color="#004faf">注释的类</font></a> | <a href="groups.html"><font color="#004faf">分组的类</font></a> | <a href="functions.html"><font color="#004faf">函数</font></a></td><td align="right" valign="center"><img src="logo32.png" align="right" width="64" height="32" border="0"></td></tr></table><h1 align=center>画布控制</h1><p> <p> 我们在画布上画饼形区域（或者条形图表条），和所有的标签。画布是通过画布视图来呈现给用户的。drawElements()函数被调用从而在需要的时候重新绘制画布。<p> （由<tt>chartform_canvas.cpp</tt>展开。）<p> <h2> drawElements()</h2><a name="1"></a><p> <pre> void ChartForm::drawElements() { <a href="qcanvasitemlist.html">QCanvasItemList</a> list = m_canvas->allItems(); for ( QCanvasItemList::iterator it = list.<a href="qvaluelist.html#begin">begin</a>(); it != list.<a href="qvaluelist.html#end">end</a>(); ++it ) delete *it;</pre><p> 我们在drawElements()中所作的第一件事是删除所有已经存在的画布条目。<p> <pre> // 360 * 16为一个饼形，Qt中使用的是16倍的度数（就是它的一个圆周为360x16） int scaleFactor = m_chartType == PIE ? 5760 : m_chartType == VERTICAL_BAR ? m_canvas->height() : m_canvas->width();</pre><p> 接下来我们根据要绘制的图表的种类来计算比例因子。<p> <pre> double biggest = 0.0; int count = 0; double total = 0.0; static double scales[MAX_ELEMENTS]; for ( int i = 0; i < MAX_ELEMENTS; ++i ) { if ( m_elements[i].isValid() ) { double value = m_elements[i].value(); count++; total += value; if ( value > biggest ) biggest = value; scales[i] = m_elements[i].value() * scaleFactor; } } if ( count ) { // 第二个循环是因为总量和最大的 for ( int i = 0; i < MAX_ELEMENTS; ++i ) if ( m_elements[i].isValid() ) if ( m_chartType == PIE ) scales[i] = (m_elements[i].value() * scaleFactor) / total; else scales[i] = (m_elements[i].value() * scaleFactor) / biggest;</pre><p> 我们需要知道这里有多少值、最大的值和值的总和，这样我们就可以正确地按比例创建饼形区域或条形了。我们把比例值存放在<tt>scales</tt>数组中。<p> <pre> switch ( m_chartType ) { case PIE: drawPieChart( scales, total, count ); break; case VERTICAL_BAR: drawVerticalBarChart( scales, total, count ); break; case HORIZONTAL_BAR: drawHorizontalBarChart( scales, total, count ); break; } }</pre><p> 既然我们已经知道了必需的信息，那我们就调用相关绘制函数，传递比例值、总量和计数。<p> <pre> m_canvas->update();</pre><p> 最终我们使用update()更新画布来使所有的变化可视。<p> <h3> drawHorizontalBarChart()</h3><a name="1-1"></a><p> 我们来回顾一下刚才的这个绘制函数，看到了画布条目如何被生成并放置到画布上，因为这个教程是关于Qt的，而不是关于绘制图表的好的（或者坏的）算法。<p> <pre> void ChartForm::drawHorizontalBarChart( const double scales[], double total, int count ) {</pre><p> 画水平条形图我们需要一个比例值的数组、总量（这样我们就可以在需要的时候计算并且画出百分比）和这一组值的计数。<p> <pre> double width = m_canvas->width(); double height = m_canvas->height(); int proheight = int(height / count); int y = 0;</pre><p> 我们重新得到画布的宽度和高度并且计算比例高度（<tt>proheight</tt>）。我们把初始的<tt>y</tt>位置设为0。<p> <pre> <a href="qpen.html">QPen</a> pen; <a name="x2425"></a> pen.<a href="qpen.html#setStyle">setStyle</a>( NoPen );</pre><p> 我们创建一个用来绘制每一个条形（矩形）的画笔，我们把它设置为<tt>NoPen</tt>，这样就不会画出边框。<p> <pre> for ( int i = 0; i < MAX_ELEMENTS; ++i ) { if ( m_elements[i].isValid() ) { int extent = int(scales[i]);</pre><p> 我们在元素矢量中迭代每一个元素，忽略无效的元素。每个条的宽度（它的长度）很简单地就是它的比例值。<p> <pre> <a href="qcanvasrectangle.html">QCanvasRectangle</a> *rect = new <a href="qcanvasrectangle.html">QCanvasRectangle</a>( 0, y, extent, proheight, m_canvas ); <a name="x2422"></a> rect-><a href="qcanvaspolygonalitem.html#setBrush">setBrush</a>( QBrush( m_elements[i].valueColor(), BrushStyle(m_elements[i].valuePattern()) ) ); <a name="x2423"></a> rect-><a href="qcanvaspolygonalitem.html#setPen">setPen</a>( pen ); <a name="x2420"></a> rect-><a href="qcanvasitem.html#setZ">setZ</a>( 0 ); <a name="x2421"></a> rect-><a href="qcanvasitem.html#show">show</a>();</pre><p> 我们为每个条形创建一个新的<a href="qcanvasrectangle.html">QCanvasRectangle</a>，它的x位置为0（因为这是一个水平条形图，每个条形都从左边开始），y值从0开始，随着每一个要画的条形的高度增长，一直到我们要画的条形和画布的高度。然后我们设置条形的画刷为用户为元素指定的颜色和样式，设置画笔为我们先前生成的画笔（比如，设置为<tt>NoPen</tt>）并且我们把条形的Z轴顺序设置为0。最后我们调用show()在画布上绘制条形。<p> <pre> <a href="qstring.html">QString</a> label = m_elements[i].label(); <a name="x2426"></a> if ( !label.<a href="qstring.html#isEmpty">isEmpty</a>() || m_addValues != NO ) { double proX = m_elements[i].proX( HORIZONTAL_BAR ); double proY = m_elements[i].proY( HORIZONTAL_BAR ); if ( proX < 0 || proY < 0 ) { proX = 0; proY = y / height; }</pre><p> 如果用户已经为元素指定了标签或者要求把值（或者百分比）显示出来，我们也要画一个画布文本条目。我们创建我们自己的CanvasText类（请看后面），因为我们想存储每一个画布文本条目中对应元素的索引（在元素矢量中）。我们从元素中得出x和y的比例值。如果其中之一< 0，那么他们还没有被用户定位，所以你必须计算它们的位置。我们标签的x值为0（左）并且y值为条形图的顶部（这样标签的左上角就会在x,y位置）。<p> <pre> label = valueLabel( label, m_elements[i].value(), total );</pre><p> 然后我们调用一个助手函数valueLabel()，它可以返回一个包含标签文本的字符串。（如果用户已经设置相应的选项，valueLabel()函数添加值或者百分比到这个文本的标签。）<p> <pre> CanvasText *text = new CanvasText( i, label, m_font, m_canvas ); <a name="x2424"></a> text-><a href="qcanvastext.html#setColor">setColor</a>( m_elements[i].labelColor() ); <a name="x2418"></a> text-><a href="qcanvasitem.html#setX">setX</a>( proX * width ); <a name="x2419"></a> text-><a href="qcanvasitem.html#setY">setY</a>( proY * height ); text-><a href="qcanvasitem.html#setZ">setZ</a>( 1 ); text-><a href="qcanvasitem.html#show">show</a>();⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -