📄 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 + -