基础教程：Hype 4元素面板 — 填充规则的原理及应用

在上一章，讲述了Hype 4交互动效制作软件中什么是矢量形状的填充规则以及使用该规则的条件。本章节继续讲述填充规则的原理及应用，这是矢量形状内容的一个难点。

一、填充规则的原理

1、缠绕的概念

路径从起点开始绘制到终点与起点重合形成一个封闭的图形，这个绘制过程是有方向的，这个路径的方向称为路径缠绕。如果路径的方向是顺时针的，则称为正向缠绕；如果是逆时针的，则称为负向缠绕。

图1：正向缠绕和负向缠绕

2、缠绕规则

缠绕规则是用以管理填充的具体规则，就是判断封闭路径内部的某一闭合区域是属于路径内部还是外部的规则。

首先以形状上闭合区域中的一点为起点，绘制一个从该点向外无限延伸的射线。使用该射线与路径相交的次数以及这些路径的组合值来确定填充。射线与正向缠绕路径相交将得到赋值 +1；与负向缠绕路径相交则得到赋值 -1。

“非零缠绕规则”

使用射线与正向或者负向缠绕路径相交的赋值的和进行判断。如果相交的赋值的和不为 0，则填充该闭合区域；如果组合值为 0，则不填充该闭合区域。

图2：非零缠绕规则

“奇偶缠绕规则”

使用射线与路径相交的次数进行判断。如果相交次数为奇数，则填充相交区域；如果相交次数为偶数，则不填充相交区域。

图3：奇偶缠绕规则

二、填充规则的使用

填充规则很复杂，但是在某些路径形状上使用可以减少锚点。例如绘制一个五角星，使用“奇偶规则”，则需要10个锚点。但使用“非零规则”，则需要5个锚点即可。小伙伴可以用上面的规则来判断内部封闭的区域是填充还是不填充。

图4：使用不同规则绘制五角星

三、总结

Hype 4 HTML5创作工具通过所见即所得的图形化应用，已经大大简化了填充规则的复杂性。当然，小伙伴在选择“非零”或者“奇偶”的时候，一定要清楚它产生的原理。

截止到本章，小编总共花了十三章节的内容详细讲解了元素面板。元素面板的内容是如此的基础，也是如此的重要，要想是动效的效果更好，小伙伴务必要将元素面板的内容吃透。

从下一章节开始，小编将讲述排印面板，敬请期待。