ASP.NET 動態產生餅圖熱點：XmlTextWriter 建立 Image Map 多邊形座標 (第 8 講第 8 部分)

GetHtmlString 核心實作

參數 imgsrc 為圖片服務頁面 URL。使用 Guid.NewGuid().ToString("N") 產生唯一 map 名稱。採用 XmlTextWriter 產生 HTML (利用 XML/HTML 相似性) 而非字串拼接。

public string GetHtmlString(string imgsrc)
{
    if (Count == 0) return "";
    string mapName = Guid.NewGuid().ToString("N");
    StringWriter sw = new StringWriter();
    XmlTextWriter writer = new XmlTextWriter(sw);
    writer.Formatting = Formatting.Indented;

    writer.WriteStartDocument();
    writer.WriteRaw($"");
    writer.WriteStartElement("map");
    writer.WriteAttributeString("name", mapName);

    foreach (PieShapeItem item in this)
    {
        Point[] pts = GetPoints(item); // 取得多邊形頂點
        writer.WriteStartElement("area");
        writer.WriteAttributeString("shape", "poly");
        writer.WriteStartAttribute("coords", null);
        for (int i = 0; i < pts.Length; i++)
        {
            writer.WriteString(pts[i].X.ToString()); writer.WriteString(",");
            writer.WriteString(pts[i].Y.ToString()); writer.WriteString(",");
        }
        writer.WriteEndAttribute();
        if (!string.IsNullOrEmpty(item.Link))
            writer.WriteAttributeString("href", item.Link);
        writer.WriteAttributeString("title", item.Text);
        writer.WriteEndElement(); // area
    }
    writer.WriteEndElement(); // map
    writer.WriteEndDocument();
    writer.Close();

    string html = sw.ToString();
    int idx = html.LastIndexOf("?>");
    if (idx > 0) html = html.Substring(idx + 2); // 移除 XML 宣告
    return html;
}

GetPoints 多邊形座標產生

private Point[] GetPoints(PieShapeItem item)
{
    GraphicsPath path = CreatePath(item);
    path.Flatten(); // 將曲線轉為線段近似
    PointF[] pf = path.PathPoints;
    path.Dispose();
    Point[] p = new Point[pf.Length];
    for (int i = 0; i < pf.Length; i++) { p[i].X = (int)pf[i].X; p[i].Y = (int)pf[i].Y; }
    return p;
}

設計重點

• HTML area shape="poly" 以多邊形近似扇形熱點。
• GraphicsPath.Flatten 自動將貝茲曲線/弧線轉為直線段集合。
• XmlTextWriter 確保屬性值正確編碼、結構良好。