65.9K
CodeProject 正在变化。 阅读更多。
Home

专业的 HTML 渲染器，您会用得上

JoseMenendez
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.91/5 (204投票s)

2009年1月8日

BSD

4分钟阅读

viewsIcon

816503

downloadIcon

23640

100% 托管代码，可在任何设备上绘制 HTML

(请参阅历史记录查看更改列表。) 

HtmlDemo

引言

这是一个 100% 托管代码库，可渲染精美格式化的 HTML。它附带三个 WinForms 控件：

  • HtmlPanel
  • HtmlLabel
  • HtmlTooltip

还有一个 static 方法可用于渲染 HTML。

  • HtmlRenderer.Render(Graphics g, string html, RectangleF area, bool clip)

注意：渲染引擎基于 CSS Level 2 规范。

背景

多年来，我一直在为这样的项目做准备。我为自己做了充分的准备。我通读了完整的 CSS Level 2 规范以及 HTML 4.01 规范。

我发现最有趣的事情之一是：渲染 HTML 无非就是使用边框、边距和内边距来布局一堆盒子。一旦你跨越了这个范式，剩下的就是帮助代码实际将盒子放置在正确的位置，然后绘制每个盒子包含的字符串。

想象一下，在你的控件上渲染全富格式化的 HTML 所能为你的应用程序带来的强大功能。在需要时使用粗体，在每条消息中使用斜体，并在桌面应用程序的任何地方使用你喜欢的或需要的边框和字体。我将要使用它的第一个项目之一是我的 Ribbon Project 的工具提示。

尽管我还没有在 mono 上测试过，但应该没有任何问题，因为库中的所有代码都是托管代码，它使用的绘图方法非常基础。它可以绘制线条、矩形、曲线和文本。

目前，渲染效果非常好。有时你可能会误以为你在使用真正的 Web 浏览器，相信我，下载演示版，它只有一个 EXE 和一个 DLL。

Using the Code

该库将代码置于 System.Drawing.Html 命名空间下。渲染 HTML 的控件位于 System.Windows.Forms 命名空间下。

渲染器遵循 CSS 盒子模型。盒子模型就是一个由盒子组成的树，就像 HTML 的树一样，这些盒子中的每一个都由一个非常常用的类 CssBox 表示。起始节点由 InitialContainer 类表示。

所有已知的 CSS 属性都适用于这些盒子。每个盒子可以包含任意数量的子盒子，并且只有一个父盒子。唯一没有任何父盒子的就是所谓的初始容器。

使用初始容器来渲染 HTML 的典型方法如下：

//Create the InitialContainer
InitialContainer c = new InitialContainer("<html>");
 
//Give bounds to the container
c.SetBounds(ClientRectangle);
 
//Measure bounds of each box on the tree
c.MeasureBounds(graphics);

//Paint the HTML document
c.Paint(graphics);

renderer_002.jpg

首先是一个标签，然后是一个面板，最后是一个 ToolTip，它们都支持 HTML 渲染。

你可能永远不会直接使用它，因为我已经提供了创建该对象的控件和方法。

HtmlPanel

这是一个可以通过其 Text 属性接受 HTML 代码的面板。其全名为 System.Windows.Forms.HtmlPanel。

你只需要了解以下属性：

  • AutoScroll。顾名思义，启用/禁用自动滚动功能。默认设置为 true 。
  • Text。获取/设置 HTML 源。

当滚动或调整控件大小时，面板将更新元素的边界。

HtmlLabel

这是一个可以通过其 Text 属性接受 HTML 代码的标签。其全名为 System.Windows.Forms.HtmlLabel。

你只需要了解以下属性：

  • AutoScroll。顾名思义，启用/禁用自动滚动功能。默认设置为 true 。
  • AutoSize。激活时自动设置标签的大小。
  • Text。获取/设置 HTML 源。

一些有趣的事情：

  • 当滚动或调整控件大小时，标签将更新元素的边界。
  • 该标签可以透明。
  • 面板的性能优于标签。

HtmlToolTip

它的工作原理与你已知的 ToolTip 完全相同，唯一的小区别是这个工具提示将渲染 HTML。其全名为 System.Windows.Forms.HtmlToolTip。

这里没有需要学习的属性。就像使用框架自带的 ToolTip 一样使用它即可。它只是在内部处理 OwnerDraw 事件。

我添加的一些特色功能

我擅自添加了一些功能：

  • 背景渐变
  • 圆角

这些是通过以下 CSS 属性实现的：

  • background-gradient: (color)
  • background-gradient-angle: (number)
  • corner-ne-radius: (length)
  • corner-nw-radius: (length)
  • corner-se-radius: (length)
  • corner-se-radius: (length)
  • corner-radius: (length){1,4} (所有角的简写)

当前渲染器支持哪些功能？

  • 大多数边框、内边距、外边距和定位 CSS 属性（除了 height 属性）
  • 文本水平和垂直对齐，文本缩进
  • 列表，有序和无序。高级编号尚未支持
  • 表格，几乎所有功能。据我测试，单元格合并效果很好
  • 字体（部分）和颜色
  • 背景（仅颜色）

关注点

我还能说什么呢，这是我参与过的最有趣的项目之一。到目前为止，它运行良好，并实现了其最初的设计目标。

我计划为其提供完整的渲染支持，直到有一天你可以像好的 Web 浏览器一样可视化网页；为什么不呢，制作一个所见即所得的 HTML 编辑器，为你的应用程序提供强大的 HTML 编辑能力。

我还在计划确保它在 Mono 和移动平台上都能完美运行。

在接下来的几天里，我将发布支持的 HTML 标签和 CSS 属性列表。

历史

  • 2009 年 1 月 8 日：首次发布
  • 2009 年 1 月 29 日：修复了少量错误 
    • 示例的文本编码
    • 由于区域设置，大段落和字体 
    • 许可 
© . All rights reserved.