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