⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 magnitudetree-4-5.html

📁 构建定制的树型视图
💻 HTML
📖 第 1 页 / 共 2 页
字号:
🔍
12 
      }
      function iOut(image)
      {
        if (browser=="N3")document[image].src=eval(image + "out.src");
      }
      function iOver(image)
      {
        if (browser=="N3")document[image].src=eval(image + "over.src");
      }
     // --></script><!-- <script src="../i/emailfriend.js" language="javascript"></script> --><a href="#navskip"><img border="0" alt="跳至主要内容" src="../i/c.gif"></a>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#006699">
<td><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#006699">
<td width="150"><img src="../i/mast_logo.gif" alt="IBM" width="150" height="25"/></td>
<td width="150" background="../i/mgradient.gif"><font size="2" color="#99ccff" face="宋体"><b>中国</b></font><br /> <img src="../i/c.gif" width="150" height="1" alt=""/></td>
</tr></table> 
</td>
<td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn/shop"><img border="0" src="../i/shopibm.gif" width="100" height="25" alt="购物"/></a></td>
<td width="100"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn/support"><img border="0" src="../i/support_chs.gif" width="100" height="25" alt="技术支持"/></a></td>
<td width="100"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn/support/product"><img border="0" src="../i/downloads_chs.gif" width="100" height="25" alt="免费下载"/></a></td></tr></table>
</td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000">
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#006699" width="150"><img src="../i/mast_lnav_sp.gif" width="150" height="21" alt=""/></td>
<td colspan="4" bgcolor="#000000"><table border="0" cellspacing="0" cellpadding="0" height="21">
<tr>
<td height="21" bgcolor="#000000" width="79" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn"><font size="2" color="#ffffff" face="宋体"><b>IBM 主页</b></font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="74" align="center"><a class="nav" style="color: #ffffff;" href=/cgi-bin/click.p?url=http://www.ibm.com/cn/products><font size="2" color="#ffffff" face="宋体"><b>产品</b></font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="81" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/services"><font size="2" color="#ffffff" face="宋体"><b>咨询</b></font></a></td><td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="81" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/industry"><font size="2" color="#ffffff" face="宋体"><b>行业</b></font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="57" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/news"><font size="2" color="#ffffff" face="宋体"><b>新闻</b>
                                                </font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="78" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/ibm"><font size="2" color="#ffffff" face="宋体"><b>关于 IBM</b>
                                                </font></a></td></tr></table></td></tr></table></td></tr></table><TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD width="150" height="1" bgcolor="#ffffff"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR><TR><TD width="150" height="3" bgcolor="#cc6633"><IMG alt="" height="3" width="150" src="../i/c.gif"></TD></TR><TR><TD width="150" height="1" bgcolor="#333333"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR><TR><TD width="150" height="1" bgcolor="#000000"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR></TABLE><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><font face="Verdana, sans-serif" size="-1"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn">IBM</a> : <a
href="/developerWorks/">developerWorks 中国</a> : <a
href="/developerWorks/java/">Java</a> : <a
href="/developerWorks/education/java/">教学 - 在线课程</a></font><br x="7"><img src="imagemaster/masthead.jpg" alt="构建定制的树型视图"></td><td width="*" valign="bottom" align="right"><a border="0" href="../MagnitudeTree.zip"><img alt="下载教程 zip 文件" border="0" src="../i/icon-zip.gif"></a><a href=../MagnitudeTree_eng/index.html target=_blank><img alt="英文原文" border="0" src="../i/icon-source.gif"></a></td></tr><tr><td height="2" colspan="2"><img height="2" width="1" src="../i/c.gif"></td></tr></table><TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD width="150" height="1" bgcolor="#000000" colspan="6"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR><TR><TD background="../i/sw-gold.gif"><a border="0" href="index.html" onMouseOver="iOver('topmain'); iOver('bottommain'); self.status=mainblurb; return true;" onMouseOut="iOut('topmain'); iOut('bottommain'); self.status=''; return true;"><img alt="主菜单" border="0" src="../i/main.gif" name="topmain"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topsection'); iOver('bottomsection'); self.status=sectionblurb; return true;" onMouseOut="iOut('topsection'); iOut('bottomsection'); self.status=''; return true;" href="index4.html"><img alt="章节菜单" border="0" src="../i/section.gif" name="topsection"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topfeedback'); iOver('bottomfeedback'); self.status=feedbackblurb; return true;" onMouseOut="iOut('topfeedback'); iOut('bottomfeedback'); self.status=''; return true;" href="MagnitudeTree-7-4.html"><img alt="提交反馈意见" border="0" src="../i/feedback.gif" name="topfeedback"></a></TD><TD width="100%" background="../i/sw-gold.gif"><img src="../i/c.gif"></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topprevious'); iOver('bottomprevious'); self.status=previousblurb; return true;" onMouseOut="iOut('topprevious'); iOut('bottomprevious'); self.status=''; return true;" href="MagnitudeTree-4-4.html"><img alt="上一屏" border="0" src="../i/previous.gif" name="topprevious"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topnext'); iOver('bottomnext'); self.status=nextblurb; return true;" onMouseOut="iOut('topnext'); iOut('bottomnext'); self.status=''; return true;" href="MagnitudeTree-4-6.html"><img alt="下一屏" border="0" src="../i/next.gif" name="topnext"></a></TD></TR></TABLE><table bgcolor="ffffff" cellspacing="0" cellpadding="2" border="0" height="400" width="100%"><tr valign="bottom"><a name="navskip"></a><td height="25" colspan="4"><img border="0" height="25" width="562" src="imagemaster/titlebar4.jpg" alt="4. 定制绘制"></td></tr><tr><td bgcolor="ffffff" width="15">&nbsp;</td><td bgcolor="ffffff" width="12">&nbsp;</td><td valign="top" align="left" bgcolor="ffffff" width="*"><p><br x="7"><table cellspacing="0" cellpadding="0" border="0"><tr><td width="90%"><font size="4" face="Verdana, Arial, Helvetica"><b>选择正确的图像</b></font></td><td width="200" align="right"><font size="1" face="Verdana, Arial, Helvetica"><nobr>    第 5 页（共 7 页）</nobr></font></td></tr></table><br x="7"><br x="7"></p><font size="2" face="Verdana, Arial, Helvetica"><p>
MagnitudeNodeRenderer 接受图像数组作为其构造器的参数。用数组中的第一个图像表示 0%，数组中的最后一个图像表示 100%。数组中图像的数量将定义数量段的颗粒度。
          </p><p>
            <img alt="空节点" src="images/pie_0_8.gif">
            <img alt="几乎为空的节点" src="images/pie_small.gif">
            <img alt="12.5% 相对数量" src="images/pie_1_8.gif">
            <img alt="25.0% 相对数量" src="images/pie_2_8.gif">
            <img alt="37.5% 相对数量" src="images/pie_3_8.gif">
            <img alt="50.0% 相对数量" src="images/pie_4_8.gif">
            <img alt="62.5% 相对数量" src="images/pie_5_8.gif">
            <img alt="75.0% 相对数量" src="images/pie_6_8.gif">
            <img alt="87.5% 相对数量" src="images/pie_7_8.gif">
            <img alt="100% 相对数量" src="images/pie_8_8.gif">
          </p><p>
可以区别空节点和几乎为空的节点非常有用：根据数量段的颗粒度，用第一个非空图像表示几乎为空的节点可能会使人产生误解。因此，单个“几乎为空”的图像可以作为第二个参数提供给构造器。
          </p><pre><code style="font-family: Courier New, Courier, monospace; font-size: 12">
<span class="comment">// Images used to represent magnitudes when rendering tree nodes.</span>
<span class="keyword">private</span> <span class="type">Image</span>[] <span class="variable-name">fMagnitudeImages</span>;

<span class="comment">// Image used to represent "nearly empty" tree nodes.</span>
<span class="keyword">private</span> <span class="type">Image</span> <span class="variable-name">fNearlyEmptyImage</span>;

<span class="comment">// Threshold below which the "nearly empty" image will be used.</span>
<span class="keyword">private</span> <span class="type">double</span> <span class="variable-name">fNearlyEmptyThreshold</span>;

<span class="comment">// Create a MagnitudeNodeRenderer with the supplied images.</span>
<span class="keyword">public</span> <span class="function-name">MagnitudeNodeRenderer</span>(<span class="keyword">final</span> <span class="type">Image</span>[] <span class="variable-name">magnitudeImages</span>,
                              <span class="keyword">final</span> <span class="type">Image</span> <span class="variable-name">nearlyEmptyImage</span>)
{
  <span class="variable-name">fMagnitudeImages</span> = <span class="variable-name">magnitudeImages</span>;
  <span class="variable-name">fNearlyEmptyImage</span> = <span class="variable-name">nearlyEmptyImage</span>;
  <span class="variable-name">fNearlyEmptyThreshold</span> = (<span class="constant">1.0</span> / (<span class="variable-name">magnitudeImages</span>.<span class="variable-name">length</span> - <span class="constant">1</span>)) / <span class="constant">2.0</span>;
}
          </code></pre><p>
以上代码说明了 MagnitudeNodeRenderer 构造器。它将数量图像的数组和几乎为空的图像存储在数据成员中。将阈值（低于它就显示几乎为空的图像）设置成一个数量段的一半。
          </p><p>
当调用 <code style="font-family: Courier New, Courier,
monospace; font-size: 12">getTreeCellRendererComponent()</code> 时，必须选择正确的数量图像以供显示。目前，假设已经计算了数量值，该数量值表达成比例。以下方法显示了如何选择正确的数量图像：</p><pre><code style="font-family: Courier New, Courier, monospace; font-size: 12">
<span class="comment">// Determine the image to be used based on the supplied proportion.
// The proportion must be a value between 0.0 and 1.0.</span>
<span class="keyword">private</span> <span class="type">Image</span> <span class="function-name">whichImage</span>(<span class="keyword">final</span> <span class="type">double</span> <span class="variable-name">proportion</span>)
{
  <span class="comment">// Image to be returned.</span>
  <span class="type">Image</span> <span class="variable-name">image</span>;

  <span class="comment">// If we have been supplied with a "nearly empty" image, and
  // the proportion value is greater than zero but less than half
  // of the first incremental image boundary, use the "nearly empty"
  // image.</span>
  <span class="keyword">if</span> ((<span class="variable-name">fNearlyEmptyImage</span> != <span class="constant">null</span>) &amp;&amp;
    (<span class="variable-name">proportion</span> &gt; <span class="constant">0.0</span>) &amp;&amp; (<span class="variable-name">proportion</span> &lt; <span class="variable-name">fNearlyEmptyThreshold</span>))
    <span class="variable-name">image</span> = <span class="variable-name">fNearlyEmptyImage</span>;

  <span class="comment">// Otherwise just work out which image based on the proportion.
  // (0% = first, 100% = last), protecting against rounding errors
  // returning &gt; 100%.</span>
  <span class="keyword">else</span>
  {
    <span class="keyword">final</span> <span class="type">int</span> <span class="variable-name">index</span> =
      (<span class="type">int</span>)<span class="type">Math</span>.<span class="function-name">round</span>((<span class="variable-name">fMagnitudeImages</span>.<span class="variable-name">length</span> - <span class="constant">1</span>) * <span class="type">Math</span>.<span class="function-name">min</span>(<span class="constant">1.0</span>, <span class="variable-name">proportion</span>));
    <span class="variable-name">image</span> = <span class="variable-name">fMagnitudeImages</span>[<span class="variable-name">index</span>];
  }

  <span class="keyword">return</span> <span class="variable-name">image</span>;
}
          </code></pre><p>
如果已经提供了几乎为空的图像，并且节点在几乎为空的阈值内，但实际上并不是空节点，那么将使用该图像。否则，将通过计算所提供比例的数量段来选择数量图像。
          </p><p>
下一页将考虑如何计算数量比例图。
          </p><br x="7"></font></td></tr></table><TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD background="../i/sw-gold.gif"><a border="0" href="index.html" onMouseOver="iOver('topmain'); iOver('bottommain'); self.status=mainblurb; return true;" onMouseOut="iOut('topmain'); iOut('bottommain'); self.status=''; return true;"><img alt="主菜单" border="0" src="../i/main.gif" name="bottommain"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topsection'); iOver('bottomsection'); self.status=sectionblurb; return true;" onMouseOut="iOut('topsection'); iOut('bottomsection'); self.status=''; return true;" href="index4.html"><img alt="章节菜单" border="0" src="../i/section.gif" name="bottomsection"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topfeedback'); iOver('bottomfeedback'); self.status=feedbackblurb; return true;" onMouseOut="iOut('topfeedback'); iOut('bottomfeedback'); self.status=''; return true;" href="MagnitudeTree-7-4.html"><img alt="提交反馈意见" border="0" src="../i/feedback.gif" name="bottomfeedback"></a></TD><TD width="100%" background="../i/sw-gold.gif"><img src="../i/c.gif"></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topprevious'); iOver('bottomprevious'); self.status=previousblurb; return true;" onMouseOut="iOut('topprevious'); iOut('bottomprevious'); self.status=''; return true;" href="MagnitudeTree-4-4.html"><img alt="上一屏" border="0" src="../i/previous.gif" name="bottomprevious"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topnext'); iOver('bottomnext'); self.status=nextblurb; return true;" onMouseOut="iOut('topnext'); iOut('bottomnext'); self.status=''; return true;" href="MagnitudeTree-4-6.html"><img alt="下一屏" border="0" src="../i/next.gif" name="bottomnext"></a></TD></TR><TR><TD width="150" height="1" bgcolor="#000000" colspan="6"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR></TABLE><TABLE cellpadding="0" cellspacing="0" border="0"><TR><TD width="182"><TABLE cellpadding="0" cellspacing="0" border="0" width="182">
            <TR bgcolor="#000000"><TD align="center" width="60" class="mast"><a style="text-decoration: none; color: #ffffff;" class="nav" href="http://www.ibm.com/privacy/"><font face="Arial, Verdana" size="2">隐私</font></a></TD>
            <TD width="1" bgcolor="#959595"><img alt="" border="0" height="20" width="1" src="../i/c.gif"></TD>
            <TD align="center" width="60" class="mast"><a style="text-decoration: none; color: #ffffff;" class="nav" href="http://www.ibm.com/legal/"><font face="Arial, Verdana" size="2">法律</font></a></TD>
            <TD width="1" bgcolor="#959595"><img alt="" border="0" height="20" width="1" src="../i/c.gif"></TD>
            <TD align="center" width="60" class="mast"><a style="text-decoration: none; color: #ffffff;" class="nav" href="http://www.ibm.com/contact/"><font face="Arial, Verdana" size="2">联系</font></a></TD>
            <TD width="1" bgcolor="#959595"><img alt="" border="0" height="21" width="1" src="../i/c.gif"></TD></TR><TR bgcolor="#ffffff"><TD><img alt="" border="0" height="1" width="1" src="../i/c.gif"></TD></TR></TABLE></TD><TD width="100%"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><TR height="21" bgcolor="#000000"><TD><img alt="" border="0" height="21" width="1" src="../i/c.gif"></TD></TR><TR bgcolor="#ffffff"><TD><img alt="" border="0" height="1" width="1" src="../i/c.gif"></TD></TR></TABLE></TD></TR></TABLE></body></html>
12

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -