ASP.NET图形开发带超链接的饼图

时间:2008-07-04 06:03:16  来源:  作者:  【背景色 】

　　这个对象还定义了一个GetHtmlString的函数向主页面提供一个显示饼图的HTML代码。

/// <summary> 
/// 创建用于显示饼图图片和超链接的HTML代码字符串 
/// </summary> 
/// <param name="imgsrc">图片地址</param> 
/// <returns>创建的HTML字符串</returns> 
/// <remarks> 
/// 此处没有简单拼凑HTML字符串，而是利用XML和HTML的相似性 
/// 使用一个XmlTextWriter来生成HTML字符串。 
/// </remarks> 
public string GetHtmlString( string imgsrc ) 
{ 
    if( this.Count == 0 ) 
        return ""; 
    // 生成唯一的　map 元素名称 
    string name = System.Guid.NewGuid().ToString("N"); 
    // 生成　XmlTextWriter 对象 
    System.IO.StringWriter myStr = new System.IO.StringWriter(); 
    System.Xml.XmlTextWriter writer = new XmlTextWriter( myStr ); 
    writer.IndentChar = ' ' ; 
    writer.Indentation = 3 ; 
    writer.Formatting = System.Xml.Formatting.Indented ; 
    // 开始输出HTML 
    writer.WriteStartDocument(); 
    // 输出图片元素 
    writer.WriteRaw("<img src='" + imgsrc + "' usemap='#" + name + "' border='0'/>"); 
    // 输出 map 元素 
    writer.WriteStartElement("map"); 
    writer.WriteAttributeString("name" , name ); 
    foreach( PieShapeItem item in this ) 
    { 
        // 输出超链接区域 
        Point[] ps = this.GetPoints( item ); 
        writer.WriteStartElement("area"); 
        writer.WriteAttributeString("shape" , "poly"); 
        writer.WriteStartAttribute("coords" , null ); 
        for( int iCount = 0 ; iCount < ps.Length ; iCount ++ ) 
        { 
            writer.WriteString( ps[ iCount ].X.ToString() ); 
            writer.WriteString("," ); 
            writer.WriteString( ps[ iCount ].Y.ToString() ); 
            writer.WriteString("," ); 
        } 
        writer.WriteEndAttribute(); 
        if( item.Link != null && item.Link.Length > 0 ) 
        { 
            writer.WriteAttributeString("href" , item.Link ); 
        } 
        writer.WriteAttributeString("title" , item.Text ); 
        writer.WriteEndElement(); 
    } 
    writer.WriteEndElement(); 
    writer.WriteEndDocument(); 
    writer.Close(); 
    string html = myStr.ToString(); 
    // 修正输出的HTML字符串 
    int index = html.LastIndexOf("?>"); 
    if( index > 0 ) 
    { 
        html = html.Substring( index + 2 ); 
    } 
    return html ; 
} 
/// <summary> 
/// 获得包围饼图区域的点坐标数组 
/// </summary> 
/// <param name="item">饼图项目</param> 
/// <returns>点坐标数组</returns> 
private Point[] GetPoints( PieShapeItem item ) 
{ 
    GraphicsPath path = CreatePath( item ); 
    path.Flatten(); 
    PointF[] ps = path.PathPoints ; 
    path.Dispose(); 
    Point[] ps2 = new Point[ ps.Length ] ; 
    for( int iCount = 0 ; iCount < ps.Length ; iCount ++ ) 
    { 
        ps2[ iCount ].X = ( int ) ( ps[ iCount ].X ); 
        ps2[ iCount ].Y = ( int ) ( ps[ iCount ].Y ); 
    } 
    return ps2 ; 
}

　　这个函数参数是图片URL地址，该地址有主页面的程序提供，首先我们使用GUID类型来创建一个唯一的名称，我们没有直接使用字符串拼凑来生成HTML字符串，而是使用XmlTextWriter来书写HTML字符串。

　　首先是输出img标签，然后输出一个map标签。

　　由于饼图项目可以带有超链接，这里就能生成map/area元素来在图片中定义热点，在HTML语法中，图片热点没有扇形区域种类，因此只好使用使用多边形来模拟扇形。也就是使用HTML标记”<area shape=poly coords=’多边形的顶点坐标’ />”来模拟扇形热点。

　　我们遍历所与的饼图项目，调用GetPoints函数获得模拟这个项目对应的扇形区域的点坐标，将这些点坐标数据填写到area元素的coord属性中，然后还填上title属性来显示提示文本，设置href属性来设置这个图片热点的超链接地址。

　　HTML文档输出完毕后我们获得这个XML字符串，去掉前面的XML声明头，然后就把这个XML字符串当作HTML字符串返回给主程序了。

　　GetPoints函数就是获得模拟扇形区域的点坐标，首先是根据饼图项目创建一个路径，调用路径的Flatten函数进行线段模拟运算，然后获得它的PathPoints属性，这个属性值是PointF类型的数组，需要转换为Point数组。