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

VML 交互式网页图形：FrontPage 中的参数化形状

Oleg Kobchenko
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.57/5 (2投票s)

2005年8月24日

7分钟阅读

viewsIcon

49499

downloadIcon

338

使用 Frontpage 构建自定义自动形状。

引言

在 Microsoft Office 应用程序（如 Word 和 PowerPoint）中，自动形状（2D 箭头、标注等）长期以来一直是一项有用的功能。除了能够通过普通的角句柄进行缩放和旋转外，一些自动形状还具有特殊的句柄，用黄色菱形标记，可以更改箭头形状或标注指针位置等特定属性。

虽然使用起来很方便，但创建自己的自动形状会更有趣，无论是用于原创插图还是模仿有趣的几何行为。事实证明，使用 Office 系列的另一个成员 FrontPage 可以实现这一点，FrontPage 对 HTML 和相关 Web 格式的文档编辑采用了更开放源代码的方法。

Microsoft 在 Office 应用程序中采用了通用的矢量图形方法，因此使用 FrontPage，您将获得与其他 Office 产品相同的自动形状。但是，与 Word 和 PowerPoint 不同的是，编辑 HTML 源不仅可以让您“观看”自动形状的制作过程，还可以创建自己的自动形状。

要在 Office 和 Internet Explorer 中实现网页图形，使用的是 VML（矢量标记语言）。Microsoft 在网页图形领域处于领先地位，使其用户能够抢先一步。不过，它必须坚持使用一种未成为标准的 Web 格式。VML 已提交给 W3C 进行评审，但已包含在所有 Microsoft Office 和 Internet Explorer 中，覆盖了大多数计算机用户群体。所以这毕竟不是一个劣势。

背景

VML 采用了一种传统的基于矢量的方法，这种方法可以在 SVG 等其他图形格式中找到。有一个画布，即网页的物理坐标空间和逻辑坐标。虽然有预定义的形状，如直线、矩形、椭圆形等，但与 PostScript 或 PDF 一样，基本构建块是通用形状。它有一个非常通用的几何子语言：moveto (m)、lineto (l)、bizier (c) 等。此外，还有用于描边和填充的样式标签。因此，普通的基于矢量的程序员会觉得 VML 很方便。

基本 VML 示例

有关文档和示例，请参阅“参考”部分中的链接。为了体验 VML，我们将从一个小示例开始，该示例包含最少的胶水代码，使其能在 Internet Explorer 中运行。

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style> v\:*{ behavior: url(#default#VML) } </style>
</head>
<body>

 <v:group style='width:200pt;height:200pt' coordsize="1000,1000">

    <v:rect style="width:300;height:200" fillcolor="red" />

    <v:oval style="top:250;width:300;height:200" 
                                          fillcolor="green" />

    <v:shape style="left:350;" stroked="true" strokecolor="blue" 
        style="left:250;width:1000;height:1000" 
        path="m 0 0 l 200 100,300 400,200 300,300,0 e" />

 </v:group>

</body>
</html>

需要执行以下步骤

  • 在 <html> 标签上方声明命名空间，或内联声明 <xml:namespace prefix='v'/>。
  • CSS 定义，将 v:* 命名空间下的所有标签绑定到 VML 行为 <style> v\:*{ behavior: url(#default#VML) } </style>。
  • 现在 VML 标签已成为常规 HTML DOM 的一部分，并且在顶级形状（如 <v:group>）上，可以在物理页面坐标（例如点）和 VML 形状的世界坐标之间方便地进行映射：<v:group style='width:200pt;height:200pt' coordsize="1000,1000">
  • 现在可以使用本地无单位坐标来表示内部形状。它们通过 CSS 属性或特定的 VML 属性给出，具体取决于形状类型：<v:rect style="width:300;height:200" ... /> 或 <v:shape style="left:350;" ... style="left:250;width:1000;height:1000" path="m 0 0 l 200 100 ... e" />

注意：通用形状需要用于边界框的 CSS 尺寸以及路径坐标。

您可以复制此示例并将其另存为 HTML 页面，以便在 Internet Explorer 中查看。您还可以尝试自己的图形。

FrontPage 中的自动形状

为了在 FrontPage 中获得自动形状的外观和感觉，最好尝试使用内置的自动形状。在 FrontPage 中创建一个新的 Web 文件。我建议使用拆分模式（如 FrontPage 2003 中所示），因为它允许您在源模式或设计模式下进行更改，并可以即时切换，以及在一种视图中观察在另一种视图中所做的更改。最新版本的 FrontPage 在设计模式下也具有一些有用的图形功能，如标尺、网格和图像跟踪功能。

要开始使用自动形状，请启用绘图工具栏（如图所示），选择“自动形状”，然后从菜单中选择一个，例如“框形箭头”→“向右箭头”。您会看到一个十字准星光标。将其定位在画布上，将其拖到相对的角落，然后释放。现在观察 HTML 源。您将看到类似我们基本示例的 VML 代码。您会注意到额外的标记，例如用于 o:* 命名空间的标记，这对于 Office 特定的家政管理是必需的。它将在 FrontPage 中保留一段时间，尽管可能会被剥离以供 Internet Explorer 使用：这是设计时代码。代码的一个关键部分是 <v:handles> 标签，它使自动形状具有交互性。

为了体验交互性，请在设计模式下选择该形状。您将看到角句柄：小的白色圆圈和一个顶部的绿色圆圈，它们允许您缩放和旋转图形。但最有趣的是黄色菱形的那种：那些允许更改特定形状类型的属性；它们对应于 <v:h> 标签。如果您有一个框形箭头，菱形可以改变箭头形状的轮廓。

请注意，当您缩放或旋转形状时，常见的 CSS 属性会发生变化：宽度和高度，以及不太常见的属性：旋转。现在，当您更改菱形句柄的位置时，它不会直接反映在几何属性上。而是更改了名为 adj 的属性，它代表“调整”。几何形状通过 <v:formulas> 标签间接受到影响，这些标签引用了句柄中的 #N 参数，并定义了用于 path 等几何属性的公式中的 @M 条目。

这解释了 VML 和 FrontPage 中交互式自动形状的机制。接下来，我们将使用它来构建自己的自动形状。

创建自定义交互式自动形状

现在您应该已经了解了 FrontPage 中自动形状的工作原理。它非常简单优雅。因此，在不进行更多理论的情况下，我们将看一个具体的例子并描述关键点。

该形状是一个二次贝塞尔曲线，具有固定的端点和与菱形句柄关联的控制点（如上图所示）。此外，它还有一个双线框来定义边界，以及连接端点与控制点的线，这是您在矢量编辑器中会发现的。

<html xmlns:v="urn:schemas-microsoft-com:vml" 
    xmlns:o="urn:schemas-microsoft-com:office:office" 
    xmlns="http://www.w3.org/TR/REC-html40">
<head>
<style>
    v\:* { behavior: url(#default#VML) }
    o\:* { behavior: url(#default#VML) }
</style>
    <link rel="File-List" 
       href="ParamShapes_Sample01_files/filelist.xml">
    <!--[if gte mso 9]>
        <xml>
           <o:shapedefaults v:ext="edit" spidmax="1027"/>
        </xml><![endif]-->
</head>
<body>

<p><v:shape id="biz01" o:spid="_x0000_s1025"
        style='width:200.25pt;height:200.25pt' 
           coordsize="" o:spt="100" adj="378,801,903,468"
        path="m,l,1000r1000,em250,250l@0@1em250,
           250c@0@1@2@3,750,750em750,750l@2@3e">
     <v:stroke joinstyle="round"/>
    <v:formulas>
        <v:f eqn="val #0"/>
        <v:f eqn="val #1"/>
        <v:f eqn="val #2"/>
        <v:f eqn="val #3"/>
    </v:formulas>
    <v:path o:connecttype="segments"/>
    <v:handles>
        <v:h position="#0,#1" xrange="0,1000" 
                                  yrange="0,1000"/>
        <v:h position="#2,#3" xrange="0,1000" 
                                  yrange="0,1000"/>
    </v:handles>
</v:shape></p>

</body></html>

以下是我们需要的关键注意事项

  • 从一个简单的 VML 形状开始，就像在基本示例中一样。
  • 接下来，您需要识别您希望由菱形句柄控制的几何值。
  • 为每个这样的受控值创建一个公式条目，并将其替换为对应于公式索引的 @M 数字。
  • 为 X 和 Y 创建一个带有 position="#N1,#N2" 的句柄，并将相应的公式条目替换为 #N1 和 #N2 引用。
  • 最后，在 <v:shape> 上创建 adj="..." 属性来保存句柄的动态值，并用默认值填充它。

就是这样。现在您已经创建了一个自定义的交互式形状，带有菱形句柄，就像 Office 自动形状一样。您可以创建更多复杂有趣的形状。虽然交互式句柄在 FrontPage 中可用，但生成的矢量图形可以在 Internet Explorer 中查看。

关注点

使用其他矢量图形格式也可以实现类似的交互行为，例如 Web 标准 SVG 或 Macromedia Flash 格式 SWF。没有内置的创作支持，因此您必须自己编写所有交互式逻辑；尽管可以使用 JavaScript 或 ActionScript 创建某种框架，从而可以紧凑地定义通用交互性。这种方法的优点是，在 Web 运行时可以调整形状，而不仅仅是在创作时，如 FrontPage 所提供的那样。

参考文献

历史

  • 2005 年 8 月 24 日 - 初稿。
  • 2005 年 8 月 29 日 - 偶尔修改措辞。
© . All rights reserved.