CN108022271A - 使用几何形状、样式设置或位置创建和光栅化形状 - Google Patents

Abstract

描述了一种通过像素对齐来改进形状的创建和光栅化的数字媒体环境。在一个示例中，像素对齐系统被至少部分地实现在计算设备的硬件中。像素对齐系统接收输入，该输入指定几何形状、笔画设置和用作定位形状的基础的位置。像素对齐系统然后基于像素网格将由至少一个输入指定的位置贴合到贴合位置。贴合位置基于几何形状、笔画设置和由输入指定的位置。然后采用光栅化模块来基于贴合位置将形状光栅化为像素。

Description

使用几何形状、样式设置或位置创建和光栅化形状

背景技术

内容创建者通常希望将具有锐利的、定义的边缘的形状包括为数字内容的一部分。例如，当创建信封的图标时，内容创建者可以使用利用矢量定义的线来绘制信封的边缘。然后将这些矢量光栅化，以生成用于在用户界面中显示信封的像素。

然而，用于将线定义为光栅化和形状渲染的一部分的常规技术可能导致不清楚的、模糊的边缘。这通常是由于用于光栅化边缘的像素的位置之间的线的定义，这使得边缘跨越附加的像素模糊。例如，当位于像素位置之间时，被定义为具有单个像素的厚度的线可以导致在光栅化时，使用具有导致线模糊的衰减边缘的多个像素。虽然已经开发了解决这种不必要的影响的技术，但是这些技术具有许多缺点。

在一个常规示例中，需要为每个形状(例如，具有单个厚度和对齐的线)使用相同的样式设置，这样因此限制了内容创建者的灵活性。在另一个常规示例中，形状的定义是“破碎的”，因为用于形成形状的线的几何特性和线对齐特性被去除。这可能导致不对称的形状，破坏正在创建的形状的几何形状和尺寸，并限制内容创建者进一步修改形状的能力。此外，这些常规技术不能用于具有复杂几何形状(例如，多边形、星形等)的形状。因此，由于形状具有模糊边缘而提供形状的低劣的备选方案，所以通常避免这些常规技术。

发明内容

描述了一种使用几何形状、样式设置或位置通过像素对齐来改进形状的创建和光栅化的数字媒体环境。在一个示例中，像素对齐系统被至少部分地实现在计算设备的硬件中。像素对齐系统接收来自形状创建系统的形状创建工具(例如，绘制矩形、星形、多边形、椭圆或无论是简单还是复杂的其他形状的工具)的输入。输入指定几何形状、样式设置以及用作将形状定位在用户界面中的基础的位置。像素对齐系统然后基于像素网格将由至少一个输入指定的位置贴合到贴合位置。贴合位置基于几何形状、笔画设置和由输入指定的位置。然后采用光栅化模块来基于贴合位置将形状光栅化为像素，例如以将矢量形状转换为像素以用于渲染。

本发明内容以简化形式介绍了在下面具体实施方式中进一步描述的概念的选择。因此，本发明内容并非旨在标识所要求保护的主题的基本特征，也不旨在用于帮助确定所要求保护的主题的范围。

附图说明

参考附图，描述了具体实施方式。在图中表示的实体可以指示一个或多个实体，并且因此可以在讨论中互换地表示单数形式或复数形式的实体。

图1是一个示例实现中的环境的图示，其可操作以采用改进的创建和光栅化技术及系统来使用如本文所述的几何形状、样式设置或位置将形状光栅化。

图2描绘了更详细示出图1的像素对齐系统的操作的示例实现中的系统。

图3描绘了更详细示出用于将用于对齐的输入的位置贴合到像素网格的像素或子像素位置的图2的像素网格的示例实现。

图4描绘了一个示例实现，其中图2的样式对齐模块被采用，以基于指定形成形状的线的对齐的样式设置将形状对齐到像素网格。

图5描绘了一个示例实现，其中图2的样式对齐模块基于指定用于形成形状的线的厚度的样式设置，将形状对齐到像素网格。

图6描绘了一个示例实现，其中图2的位置对齐模块基于关于如何通过形状创建系统的形状创建工具绘制形状的角到角的定义，将形状对齐到像素网格。

图7描绘了一个示例实现，其中图2的位置对齐模块基于关于如何通过形状创建系统的形状创建工具绘制形状的中心到角的定义，将形状对齐到像素网格。

图8描绘了一个示例实现，其中图2的几何形状对齐模块基于从形状创建系统的形状创建工具接收的输入中定义的形状的几何形状，将形状对齐到像素网格。

图9描绘了通过使用图1的像素对齐系统来将矢量形状光栅化的附加示例实现。

图10是描绘了使用几何形状、样式设置或位置的改进的创建和光栅化的一个示例实现中的过程的流程图。

图11示出了包括一个示例设备的各种组件的一个示例系统，该示例设备可以被实现为如参考图1-图10所描述和/或使用的任何类型的计算设备，以实现本文所描述的技术的实施例。

具体实施方式

概述

在数字媒体环境中描述了支持具有清晰、定义边缘的形状的创建和光栅化的技术和系统。例如，内容创建者可以与由计算设备实现的形状创建系统的用户界面交互。形状创建系统包括可用于在计算设备的用户界面中绘制各种简单形状(例如，圆形、矩形)或复杂形状(例如，星形、八边形)的多个形状创建工具。例如，内容创建者可以首先通过选择用户界面中对应的形状创建工具(例如，矩形创建工具)的表示(例如，矩形)来选择要用于形成形状(例如，正方形、矩形、圆形、星形、八边形等)的几何形状。

内容创建者还可以指定形状的样式设置。样式设置包括用于形成形状的线的厚度、该线在用户界面内如何对齐(例如，中心对齐、内部对齐或外部对齐，以定义形状的边界)等。为了绘制形状，内容创建者然后指定用户界面内用于定义形状的结果位置的位置。

在一个这样的示例中，使用角到角的定义来定义形状。因此，为了绘制形状，内容创建者首先在第一位置处提供定义形状的第一角(例如，矩形的角)的用户输入，继续输入(例如，保持按下鼠标的按钮或继续手势)，并在第二个位置处释放按钮，以定义形状的相对角。因此，这在用户界面内定义了作为整体的形状的位置、以及作为与形状创建工具交互的一部分的形状的大小。类似地，在另一个这样的示例中，形状创建工具使用中心到角的定义来定义形状的中心和角，其也用于定义形状的整体位置和大小。不管所使用的定义的类型如何，形状在用户界面中的大小、几何形状和位置均由形状创建工具使用基于这些位置的矢量(具有样式设置和相应几何形状)来定义。

在常规技术中，几何形状然后被光栅化，以定义用于在用户界面中呈现形状的像素。然而，如前所述，这可能导致用于形成形状的线的模糊边缘。仍如前所述，用于解决这种模糊的常规技术具有各种缺点，这些缺点可能导致这些常规技术的结果比边缘的模糊更不理想的结果。

因此，描述了像素对齐系统被配置为基于由形状创建工具创建的形状的样式设置、位置和/或几何形状，将形状的定义贴合到像素网格(例如，像素和/或子像素)的技术。以这种方式，使像素对齐系统意识到形状如何被作为形状创建系统的一部分的形状创建工具定义。由此，像素对齐系统可以定义用于光栅化以具有清晰、锐利的边缘的形状。

为此，像素对齐系统从形状创建工具接收输入。输入指定由形状创建工具产生的几何形状(例如，矩形)，以及用于形成形状的线的厚度和对齐方式所使用的样式设置。输入还指定如何绘制形状，例如，按照角到角的定义、中心到角的定义等。输入进一步指定用户界面中用作该定义的基础的至少一个位置(例如，形状的角或中心)。

根据输入，像素对齐系统贴合用于定义如何将形状绘制到像素网格的贴合位置的位置。例如，像素网格可以定义用于将数字内容光栅化的像素和子像素位置。通过将输入的位置平移到对应于像素网格的贴合位置，像素对齐系统定义遵循网络的形状的部分，并且因此在光栅化时(即，当形成为像素时)具有清晰的定义边缘。在本文描述的技术中，该贴合位置基于位置、几何形状和样式设置。

例如，假设内容创建者选择线工具来绘制具有单个像素的宽度的中心笔画的水平线作为用户界面内的数字内容的一部分。结果，像素对齐系统获得指定样式设置(例如，宽度和对齐)和几何形状(例如，线)的输入。像素对齐系统还经由输入来接收信息，该输入指定线工具从角到角绘制。基于该输入，像素对齐系统将用于定义由内容创建者指定的用户界面中的线的位置贴合到使用像素网格中的子像素可定义的贴合位置。这使得由计算设备光栅化和渲染时，线具有定义的清晰边缘，因为线的贴合位置的定义对应于像素网格中像素和子像素的对齐以用于将线光栅化。

另一方面，用于数字图像内的形状(例如，矢量)的定义的常规技术并未意识到由作为形状创建系统的一部分的形状创建工具使用的样式设置或几何形状，也未意识到在绘制时，如何定义形状。因此，如前所述在背景中部分所描述的，在不导致形状的几何形状变形的情况下，在不限制内容创建者修改样式设置的情况下，或者在不破坏用于定义形状的笔画对齐和几何形状的情况下，这些常规技术通常不能产生清晰的形状。以下部分将包括对这些和其他示例的进一步讨论。

在下面的讨论中，首先描述了可以采用本文描述的技术的示例环境。然后描述可以在示例环境以及其他环境中执行的示例过程。因此，示例过程的执行不限于示例环境，并且示例环境不限于示例过程的执行。

示例环境

图1是一个示例实现中的环境100的图示，该示例实现可操作以采用使用本文所描述的几何形状、样式设置或位置对形状的改进的创建和光栅化技术。示出的环境100包括可以以各种方式配置的计算设备102。

计算设备102例如可以被配置为台式计算机、膝上型计算机、移动设备(例如，假设诸如图示的平板或移动电话的手持配置)等。因此，计算设备102的范围可以从具有大量存储器和处理器资源(例如，个人计算机、游戏控制台)的全资源设备到具有有限的存储器和/或处理资源的低资源设备(例如，移动设备)。附加地，尽管示出了单个计算设备102，但是计算设备102可以表示多个不同的设备(例如，由业务使用的多个服务器)。

计算设备102被图示为包括图像处理系统104。图像处理系统104至少部分地在计算设备102的硬件(例如，使用处理系统和计算机可读存储介质)中实现，以在显示设备108的用户界面106中处理和转换数字图像。这种处理包括数字图像的创建、数字图像的修改、数字图像的光栅化以及数字图像的渲染以用于由显示设备108输出和显示。尽管在计算设备102处被示出为本地实现，但是图像处理系统104的功能也可以通过经由网络(例如，web服务的一部分或关于图11进一步描述的“在云中”)可用的功能作为整体或部分被实现。

由图像处理系统104并入以处理数字图像106的功能的一个示例被示出为形状创建系统110和像素对齐系统112。形状创建系统110至少部分地在计算设备104的硬件(例如，处理系统和计算机可读存储介质)中被实现，以在使用用户输入指定的用户界面中绘制形状(例如，矢量形状)。形状创建系统110例如包括多个形状创建工具114，形状创建工具114被配置为绘制对应的形状，包括简单形状116(例如，圆形、矩形)和复杂形状118(例如，八边形、星形)。

用户例如可以在用户界面中选择要绘制的期望形状的表示，该选择启动对应的形状创建工具114来绘制具有对应几何形状的形状。作为其中的一部分，用户还可以指定用户界面内的样式设置(例如，线的宽度和对齐方式)和位置，以用作在用户界面中定义形状的大小和位置的基础。

像素对齐系统112至少部分地在计算设备104的硬件(例如，处理系统和计算机可读存储介质)上实现，以使得由形状创建工具114创建的形状的光栅化具有定义的清晰边缘。随着移动设备的普及，用户和显示设备106之间的接近度以及因此用户对于显示设备108正在显示的内容的小的细节具有更高的认识。因此，矢量形状通常被内容创建者使用，因为这些形状以后很容易定义和编辑。当光栅化矢量形状时，通常采用抗锯齿处理(anti-aliasing)来柔化锯齿状边缘。然而，如果过度使用，则抗锯齿处理可能是有问题的，因为形状的光栅化版本可能变得模糊。

例如，作为圆角矩形的第一形状120在没有抗锯齿的情况下被光栅化时，包括具有清晰线的部分以及出现锯齿状的弯曲部分122。当利用常规的抗锯齿技术进行光栅化时，也是圆角矩形的第二形状124消除了弯曲部分126的锯齿状，但也导致出现模糊的线。然而，通过使用像素对齐系统112光栅化的第三形状128导致清晰和定义的像素对齐边缘128(例如，水平或垂直形状的几何形状的轴线)。此外，第三形状128还允许被限制于形状130的弯曲部分的抗锯齿处理，并且因此也限制了形状的锯齿形外观。像素对齐系统112的操作的示例如下所述，并且在相应的图中示出。

图2描绘了更详细地示出图1的像素对齐系统112的操作的一个示例实现中的系统200。首先，内容创建者与形状创建系统110的形状创建工具114交互，以定义(即，绘制)用户界面中的形状(例如，包括矩形、正方形、多边形、星形等的矢量形状)。其示例被示为椭圆228。由此，在被渲染在显示设备108的用户界面中之前，像素对齐系统112预处理形状的定义，使得所定义的形状具有看起来清晰并且不模糊的边缘。此外，可以实时地执行该预处理，以在用户界面中绘制形状时实时提供输出。

为此，像素对齐系统112从形状创建系统110接收定义如何由形状创建工具114绘制形状的输入。这包括样式设置204(例如，用于形成形状的线的厚度和对齐方式)、用于定义形状的位置和尺寸的位置206以及形状的几何形状208。位置206例如可以用作角到角的定义210的一部分。因此，为了绘制形状，内容创建者首先在第一位置处提供定义形状的第一角(例如，矩形的角)的用户输入，继续输入(例如，保持按下鼠标的按钮或继续手势)以及在第二位置处释放输入，以定义形状的相对角。因此，这定义了用户界面内整体形状的位置以及形状的大小。因此，如在输入202中定义的，位置206可以指定关于图6进一步描述的形状的角。同样，在另一个这样的示例中，使用中心到角的定义212来定义形状的中心和角。因此，在该示例中，位置206对应于形状的中心或角，如关于图7进一步描述的，其也用于定义形状的总体位置和尺寸。

基于该输入202，像素对齐系统112将形状对齐到像素网格214，以生成像素网格对齐的形状216。当被光栅化(例如，形成为像素)时，像素网格对齐的形状216形成用于显示的形状220，形状220具有清晰的定义边缘(例如针对形状的轴向边缘)，同时允许形状的弯曲部分的抗锯齿处理。为此，像素对齐系统112将由输入202指定的位置206(该位置用于定义形状的轴向边缘的位置)贴合为像素网格214的对应像素位置或子像素位置(如下文进一步描述的，该位置使得这些边缘与像素网格214对齐)。

图3描绘了更详细示出用于将用于对齐的输入的位置206贴合到像素网格214的像素或子像素位置的图2的像素网格214的一个示例实现。该示例中的像素网格214被形成为方形网格，方形网格包括用于将数字内容光栅化的像素302的位置以及在垂直和水平方向从像素位置偏移像素的一半距离的子像素304的位置。因此，像素302的位置与像素网格中的其他像素在垂直和水平方向上间隔开一个像素306、308单位。类似地，子像素304的位置也与其他子像素的位置在垂直和水平方向上间隔开一个像素单位，子像素位置从像素302的位置偏移。也可以预期包括非方形配置的像素网格214的其他配置。

在所示示例中，位置206作为输入202的一部分被像素对齐系统112接收，位置206将被用作定义在用户界面中在哪个位置以及以何种尺寸呈现该形状的基础。像素对齐系统112响应于该位置206，将位置206贴合到像素网格214内的像素310的位置或子像素312的位置(即，贴合位置)。当被计算设备102光栅化时，通过将线与网格内的像素对齐，该贴合位置使得形状具有用于形成形状的线的定义的清晰边缘(例如，沿像素网格214的水平或垂直轴的形状的轴向边缘)。为此，像素对齐系统112利用用于形成形状的几何知识、用于形状的线的样式设置以及使用形状创建工具114如何绘制形状的定义。

再次返回到图2，像素对齐系统112包括样式对齐模块222、位置对齐模块224和几何对齐模块226，这些模块至少部分地在计算设备102的硬件中实现，以将由输入202指定的形状对齐到像素网格214。例如，样式对齐模块222表示计算设备102的作为像素对齐系统112的一部分的功能，以处理样式设置204，样式设置204被用于将形成形状的线定义为将形状拟合到像素网格214的一部分。在以下描述中，关于图4和图5描述了样式对齐模块222的操作的进一步讨论。

位置对齐模块224表示计算设备102的作为像素对齐系统112的一部分的功能，以处理用户输入的位置206，位置206将用作数字内容中形状的位置以及甚至是形状大小的基础。位置对齐模块224例如可以处理形状创建工具114是否采用角到角的定义210或中心到角的定义212来绘制形状。在以下描述中，关于图6和图7描述了位置对齐模块224的操作的进一步讨论。

几何形状对齐模块226表示计算设备102的作为像素对齐系统112的一部分的功能，以处理正在绘制的形状的几何形状208。几何形状对齐模块226例如可以贴合定义形状的中心的位置206以及定义形状的角的位置206，使得用于形成形状的线的顶部和底部轴向边缘位于像素302或子像素304的位置上。结果，形状的光栅化和渲染导致用于在垂直或水平方向上形成形状的轴向边缘的线的清晰、定义的边缘。此外，可以允许形状的弯曲部分的抗锯齿处理，并且从而限制不跟随像素网格214的垂直或水平轴线的弯曲部分或对角线的锯齿状外观。在下面的描述中，关于图8描述了几何形状对齐模块226的操作的进一步讨论。

通过了解绘制的几何形状208、用于定义形状的线的样式设置204、位置206以及由形状创建工具114如何执行形状绘制的定义，像素对齐系统112可以将用于定义形状的位置206中的一个或多个平移到贴合位置。这些贴合位置在被光栅化时，使得形状的线(例如，垂直或水平轴向边缘)成为关于以下示例进一步描述的、像素完美的(即，完全抗锯齿)形状。

图4描绘了一个示例实现400，其中样式对齐模块222基于指定线的对齐的样式设置204，将形状对齐到像素网格214。样式对齐模块222被配置为考虑样式设置204，以确定要用于定义用户界面内的形状的位置的贴合位置。在该示例中，样式设置包括笔画设置，笔画设置定义用于形成形状的线的线(即，笔画)的厚度和对齐。样式对齐模块222也可以考虑其他样式设置，例如效果、填充等。

示出了形成为具有圆形边缘的矩形的矢量形状408、410、412的三个示例402、404、406。在第一示例402中，矢量形状408相对于用于定义形状的几何形状414而中心对齐。在第二示例404中，矢量形状410相对于用于定义形状的几何形状416在内部对齐。在第三示例406中，矢量形状412相对于用于定义形状的几何形状418在外部对齐。如在下面的规则中进一步描述的，样式对齐模块222考虑该对齐。

对于轴向直线(或具有轴向法线的曲线)，样式对齐模块222应用以下规则来确定形状的贴合位置：

·对于内部对齐的线，贴合像素网格214中的像素302的位置，而不是子像素304的位置；

·对于外部对齐的线，贴合像素网格214中的像素302的位置，而不是子像素304的位置；

·对于中心对齐、偶数像素加权的线，贴合像素网格214中的像素302的位置，而不是子像素304的位置；以及

·对于中心对齐、奇数像素加权的线，贴合像素网格214中的子像素304的位置，而不是像素302的位置。

遵循这些规则，样式对齐模块222可以贴合用于根据像素网格214定义形状的放置的位置。如在下面的描述中进一步描述并在相应的图中示出的，该贴合位置可以基于线的对齐以及线的厚度两者。

图5描绘了一个示例实现500，其中样式对齐模块222基于样式设置204将形状对齐到像素网格214，样式设置204指定用于形成形状的线的厚度。该示例中，每一条线都是中心对齐的，因为内部或外部对齐的线被贴合到由上述规则定义的像素302的位置。对于具有使用奇数个像素(例如，1个、3个、5个等)定义的厚度的奇数加权的像素线，贴合使用像素网格214的子像素304的位置。

如针对具有单个像素厚度的线502所示出的，例如，贴合位置504、506使用像素网格214内的子像素304的位置。另一方面，对于具有两个像素厚度的线506，贴合位置508、510被限制到像素302的位置，并且被限制而不使用像素网格214内的子像素304的位置。对于具有三个像素厚度的线512，该线具有奇数像素权重，并且因此允许使用定义尺寸和位置的贴合位置514、516的子像素304的位置，在该位置处，将形状(例如，线)光栅化，然后渲染在用户界面中。通过这样做，该形状被配置为通过遵循像素网格214的对齐而在显示设备108支持的范围内尽可能地包括清晰、定义的边缘。

图6描绘了一个示例实现600，其中位置对齐模块224基于角到角的定义212(关于如何由形状创建系统110的形状创建工具114绘制形状)将形状对齐到像素网格214。在该示例中，由位置对齐模块224接收的输入202用于指定形状创建系统110(例如，通过特定的形状创建工具114)如何绘制形状。作为其中的一部分，输入202包括位置206，位置206指定形状602整体在用户界面中的位置，以及如何定义该形状。在该示例中，采用角到角的定义212。因此，被定义为输入202的一部分的位置206定义这些角的位置。

因此，经由输入，位置对齐模块224了解了定义角的位置206将被贴合，以保持像素完美性，使得形状的轴向边缘位于像素或子像素的位置上。为此，在由样式对齐模块222执行时，遵循图4和图5关于样式设置描述的规则。然后，使用位置对齐模块224来确定形状602的角的贴合位置604、606。

用户输入例如可以经由由输入202指定的位置206指示角，然后其被重定位到贴合位置604。用户输入然后可以如箭头所示的那样继续到第二位置，第二位置然后被用于针对形状602的第二角生成贴合位置606。这可以作为预处理、光栅化和实时渲染的一部分来执行，使得形状602在接收输入202期间被连续地贴合。这还可以考虑几何形状208，以促进形成与像素网格对齐的形状的线的位置，其示例将关于图8进一步描述。

图7描绘了一个示例实现700，其中位置对齐模块224基于中心到角的定义214(关于形状创建系统110的形状创建工具114如何绘制形状)将形状对齐到像素网格214。如前所述，然后使用位置对齐模块224来确定贴合位置702、704。

然而，在该示例，贴合位置702对应于形状602的中心。然后，经由作为形状602的半径的第二贴合位置704定义形状602的角。因此，中心贴合位置702不与形状702的任何边缘直接相关联。然而，贴合位置702确实定义形状602，以具有作为该对齐的通过像素对称的一部分的清晰的轴向边缘。像素对称意味着由形状602的顶部边缘(或左边缘)占据的像素形成由相对边缘占据的像素的镜像，例如，围绕使用通过形状602的中心的水平或垂直线定义的轴线的底部边缘(或右边缘)。

这也可以作为预处理、光栅化和实时渲染的一部分来执行，使得形状602在接收输入202期间连续地被贴合。这也可以考虑几何形状208，以促进形成由像素网格对齐的形状的线的位置，其示例在下文中进一步描述，并且在相应的图中示出。

图8描绘了一个示例实现800，其中图2的几何形状对齐模块226基于从形状创建系统110的形状创建工具114接收的输入202中定义的形状的几何形状208，将形状的部分对齐到像素网格214。几何形状对齐模块226可以采用各种不同的技术，以将用于形成形状的线(例如，轴向线)对齐到像素网格214来实现沿形状的水平或垂直部分的像素完美的形状。不遵循像素网格214的水平或垂直轴的形状的部分可以采用抗锯齿处理来支持平滑和非锯齿状的边缘。

在第一示例中，例如针对矩形、椭圆、矩形、圆角矩形等，简单形状116的几何形状208由几何形状对齐模块226接收。基于由样式对齐模块222处理的样式设置204，将规则直接应用于形状的角，而不论形状是采用角到角的定义210，还是采用中心到角的定义212。对于角到角的定义，例如，这导致这些规则自动应用到形状的相关联的边缘。这是因为如果简单形状的角“x”位于子像素304的位置上，则与其相关联的边缘也必须位于子像素的位置上。这导致在“x”处的交叉。如果“x”位于像素302的位置上或者如果使用中心到角的定义212，则这也适用。

在第二示例中，将中心到角的定义212应用于复杂形状118的几何形状208(例如，星形或多边形)。图8中示出了复杂形状802的示例。这种复杂形状802遵循使用第一和第二贴合位置804、806的中心到角的定义210，其如下生成。

对于这些情况，由样式对齐模块222使用的示例规则在某些情况下不是直接适用的。因此，几何形状对齐模块226可以确定几何形状208保持完整的贴合位置804、806。这使得形状802的对应于像素网格214的垂直或水平轴的轴向线808、810、812、814遵循样式对齐模块222的规则，因此是像素完美的。允许不对应于像素网格214的垂直或水平轴的轴向线816、818、820、822(例如，弯曲或直线)采用抗锯齿处理，从而从如图所示的形状的这些部分去除不期望的锯齿。图9中示出了附加示例。

以下伪码中描述了这样的计算的示例：

FIX_POLYGON(P)

·/*P＝由用户输入的直立正多边形，P.n＝P的边的数目，

·P.r＝P的半径，P.a＝P的内角，P.c＝多边形的中心*/

·Point p1:＝P.c+<0.0,P.r*sin(a/2.0)>

·Point p2:＝根据多边形P的样式设置204，贴合p1到像素网格214中的最近像素302或子像素304的位置

·P.r:＝(p2.y-center.y)/sin(a/2.0)#P的几何形状被修改，以使其像素完美

同样的计算也适用于具有轴向边缘的直立星形。随着添加更多的形状和矢量外观，也可以使用样式对齐模块222的规则将定制的几何约束添加到几何形状对齐模块226。

图9描绘了通过使用像素对齐系统112来将矢量形状光栅化的附加示例实现900。在第一示例902中，具有圆角的矩形的矢量形状被光栅化，使得形状的垂直和水平部分是清晰的，而其他弯曲的部分允许抗锯齿处理以促进平滑而非锯齿状边缘的外观。在第二示例904中，示出了由直线形成的星形矢量形状。沿像素网格的垂直和水平轴的直线是清晰的，而其他直线允许抗锯齿处理，以促进平滑而非锯齿状边缘的外观。在第三示例906中，示出了由曲线形成的椭圆的矢量形状。沿着像素网格的曲线的垂直和水平部分是清晰的，而其他弯曲部分允许抗锯齿处理，以实现平滑和非锯齿状的外观。还考虑了其他示例。

通过使用样式对齐模块222、位置对齐模块224和几何形状对齐模块226，像素对齐系统112支持使用常规技术不可用的各种功能。通过对样式设置206的了解，与常规技术不同，像素对齐系统112不将内容创建者限制到有限数量的设置。此外，与破坏形状的几何定义或分离形状样条的外观的常规技术的后处理相反，通过了解几何形状208，像素对齐系统112可以生成贴合位置作为预处理的一部分。通过使用上述技术，像素对齐系统112允许内容创建者使用任何形状创建工具和任何样式设置来创建像素完美的形状，从而消除随后为实现此目的而手动编辑形状所涉及的不便。由像素对齐系统112支持的这些技术是非破坏性的、非侵入性的(不需要使用特定的样式设置204)和非有害性的。

示例过程

以下讨论描述了可以利用先前描述的系统和设备来实现的技术。每个过程的方面可以在硬件、固件、软件或其组合中实现。这些过程被示出为指定由一个或多个设备执行的操作的块的集合，并且不一定限于由相应块执行操作所示的顺序。在以下讨论的部分中，将参考图1-图9。

图10描绘了使用几何形状、样式设置或位置的改进的形状创建和光栅化的一个示例实现中的过程1000。接收至少一个输入，该输入指定几何形状、笔画设置和用作将形状定位在用户界面中的基础的位置(块1002)。像素对齐系统112例如从形状创建系统110的形状创建工具114(例如，绘制矩形、星形、多边形、椭圆或无论是简单还是复杂的其他形状的工具)接收输入202。输入202指定几何形状208、样式设置204和用作将形状定位在用户界面中的基础的位置206。

基于像素网格，由至少一个输入指定的位置被贴合到用户界面中的贴合位置。贴合位置基于几何形状、笔画设置和位置(块1004)。继续前面的示例，像素对齐系统112然后基于像素网格214将由至少一个输入指定的位置206贴合到用户界面中的贴合位置。例如通过使用如前所述的样式对齐模块222、位置对齐模块224和/或几何形状对齐模块226，贴合位置基于几何形状208、样式设置204和由输入指定的位置206。

基于贴合位置将形状光栅化(块1006)。例如，光栅化模块218被用于将像素网格对齐的形状216光栅化为像素。然后渲染像素以用于在显示设备108上观看。如上所述，还可以考虑各种其他示例。

示例系统和设备

图11在1100处一般性地示出了一个示例系统，示例系统包括表示可以实现本文所描述的各种技术的一个或多个计算系统和/或设备的示例计算设备1102。这通过包括图像处理系统114来示出。计算设备1102可以是例如服务提供商的服务器、与客户端(例如，客户端设备)相关联的设备、片上系统和/或任何其他合适的计算设备或计算系统。

如图所示的示例计算设备1102包括彼此通信地耦合的处理系统1104、一个或多个计算机可读介质1106以及一个或多个I/O接口1108。虽然未示出，但是计算设备1102还可以包括将各种组件彼此耦合的系统总线或其他数据和命令传递系统。系统总线可以包括不同总线结构(例如，存储器总线或存储器控制器、外围总线、通用串行总线和/或利用各种总线架构中的任一个的处理器或本地总线)的任一个或组合。还考虑了各种其他示例(例如，控制线和数据线)。

处理系统1104表示使用硬件执行一个或多个操作的功能。因此，处理系统1104被示出为包括可被配置为处理器、功能块等的硬件元件1110。这可以包括在硬件中实现为使用一个或多个半导体形成的专用集成电路或其他逻辑器件。硬件元件1110不受形成其的材料或其中使用的处理机构的限制。例如，处理器可以由(一个或多个)半导体和/或晶体管(例如，电子集成电路(IC))组成。在这种情况下，处理器可执行指令可以是电子可执行指令。

计算机可读存储介质1106被示为包括存储器/存储装置1112。存储器/存储装置1112表示与一个或多个计算机可读介质相关联的存储器/存储装置容量。存储器/存储装置1112可以包括易失性介质(例如，随机存取存储器(RAM))和/或非易失性介质(例如，只读存储器(ROM)、闪存、光盘、磁盘等)。存储器/存储装置1112可以包括固定介质(例如，RAM、ROM、固定硬盘驱动器等)以及可移动介质(例如，闪存、可移除硬盘驱动器、光碟等)。计算机可读介质1106可以以下面进一步描述的各种其他方式进行配置。

(一个或多个)输入/输出接口1108表示允许用户向计算设备1102输入命令和信息，并且还允许使用各种输入/输出设备向用户和/或其他组件或设备呈现信息的功能。输入设备的示例包括键盘、光标控制设备(例如，鼠标)、麦克风、扫描仪、触摸功能(例如，被配置为检测物理触摸的电容传感器或其他传感器)、相机(例如，其可以使用可见波长或诸如红外频率的不可见的波长，以将移动标识为不涉及触摸的手势)等。输出设备的示例包括显示设备(例如，监视器或投影仪)、扬声器、打印机、网卡、触觉响应设备等。因此，计算设备1102可以以下面进一步描述的各种方式进行配置，以支持用户交互。

本文可以在软件、硬件元件或程序模块的一般上下文中描述各种技术。通常，这些模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、元素、组件、数据结构等。本文所使用的术语“模块”、“功能”和“组件”通常表示软件、固件、硬件或其组合。本文所描述的技术的特征是独立于平台的，这意味着这些技术可以在具有各种处理器的各种商业计算平台上实现。

所描述的模块和技术的实现可以存储在某种形式的计算机可读介质上或者通过某种形式的计算机可读介质传输。计算机可读介质可以包括可由计算设备1102访问的各种介质。作为示例而非限制，计算机可读介质可以包括“计算机可读存储介质”和“计算机可读信号介质”。

“计算机可读存储介质”可以指代与纯粹的信号传输、载波或信号本身相反的、能够使信息持久和/或非暂时性存储的介质和/或设备。因此，计算机可读存储介质是指非信号承载的介质。计算机可读存储介质包括诸如易失性和非易失性、可移除和不可移除介质和/或存储设备的硬件，其以适于存储诸如计算机可读指令、数据结构、程序模块、逻辑元件/电路或其他数据的信息的方法或技术来实现。计算机可读存储介质的示例可以包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字通用盘(DVD)或其他光学存储装置、硬盘、磁带盒、磁带、磁盘存储装置或其他磁存储设备、或其他存储设备、有形介质或适于存储所需信息并且可由计算机访问的制品。

“计算机可读信号介质”可以指代被配置以将指令发送到计算设备1102的硬件的信号承载介质(例如，经由网络)。信号介质通常可以包括调制数据信号中诸如载波、数据信号或其他传输机制的计算机可读指令、数据结构、程序模块或其他数据。信号介质还包括任何信息传递介质。术语“调制数据信号”是指以对信号中的信息进行编码的方式设置或改变其特征中的一个或多个的信号。作为示例而非限制，通信介质包括诸如有线网络或直接有线连接的有线介质、以及诸如声、RF、红外和其他无线介质的无线介质。

如前所述，硬件元件1110和计算机可读介质1106表示可以在一些实施例中采用以实现本文所描述的技术的至少一些方面(例如，执行一个或多个指令)的、以硬件形式实现的模块、可编程设备逻辑和/或固定设备逻辑。硬件可以包括集成电路或片上系统的组件、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、复杂可编程逻辑器件(CPLD)以及硅中的其他实现或其他硬件。在该上下文中，硬件可以操作作为执行由硬件所体现的指令和/或逻辑定义的程序任务的处理设备，以及用于存储执行指令的硬件(例如，先前描述的计算机可读存储介质)。

前述的组合也可以用于实现本文所描述的各种技术。因此，软件、硬件或可执行模块可以被实现为在某种形式的计算机可读存储介质上实现的和/或由一个或多个硬件元件1110实现的一个或多个指令和/或逻辑。计算设备1102可以被配置为实现与软件和/或硬件模块相对应的特定指令和/或功能。因此，可以至少部分地以硬件(例如，通过使用处理系统1104的计算机可读存储介质和/或硬件元件1110)来实现可由计算设备1102作为软件执行的模块的实现。指令和/或功能可以由一个或多个制品(例如，一个或多个计算设备1102和/或处理系统1104)执行/操作，以实现本文所描述的技术、模块和示例。

本文所描述的技术可以由计算设备1102的各种配置来支持，并且不限于本文所描述的技术的具体示例。也可以通过使用分布式系统(例如，经由如下所述的平台1116在“云”1114上)全部或部分地实现该功能。

云1114包括和/或表示用于资源1118的平台1116。平台1116抽象化云1114的硬件(例如，服务器)和软件资源的底层功能。资源1118可以包括在远离计算设备1102的服务器上执行计算机处理时可以使用的应用和/或数据。资源1118还可以包括通过因特网和/或通过诸如蜂窝或Wi-Fi网络的订户网络提供的服务。

平台1116可以抽象化资源和功能，以将计算设备1102与其他计算设备连接。平台1116还可以用于抽象化资源的缩放，以提供对经由平台1116实现的资源1118的需求的相应级别的缩放。因此，在互连设备实施例中，本文所描述的功能的实现可以分布在整个系统1100。例如，功能可以部分地实现在计算设备1102上，并且经由抽象化云1114的功能的平台1116来实现。

结论

虽然已经以特定于结构特征和/或方法动作的语言描述了本发明，但是应当理解，在所附权利要求中定义的本发明不一定限于所描述的具体特征或动作。相反，具体特征和动作被公开为实现所要求保护的发明的示例形式。

Claims (20)

1.一种在数字媒体环境中通过像素对齐来改进形状光栅化的系统，包括：

像素对齐系统，所述像素对齐系统至少部分地在计算设备的硬件中实现以：

接收至少一个输入，所述至少一个输入指定几何形状、样式设置和用作将所述形状定位在用户界面中的基础的位置；以及

基于像素网格，将由所述至少一个输入指定的所述位置贴合到所述用户界面中的贴合位置，所述贴合位置基于所述几何形状、所述样式设置和所述位置；以及

光栅化模块，至少部分地在所述计算设备的硬件中实现以基于所述贴合位置将所述形状光栅化为像素。

2.根据权利要求1所述的系统，其中基于所述像素网格的所述贴合位置使得所述形状的至少一部分沿所述像素网格的像素或子像素位置对齐。

3.根据权利要求1所述的系统，其中所述光栅化模块被配置为允许针对所述形状的至少一部分的抗锯齿处理。

4.根据权利要求3所述的系统，其中所述形状的所述部分被覆盖或不沿所述像素网格的水平轴或垂直轴对齐。

5.根据权利要求1所述的系统，其中所述样式设置将用于形成所述形状的线的厚度定义为像素的数目。

6.根据权利要求5所述的系统，其中响应于将所述线定义为中心对齐并且将所述厚度定义为具有偶数个像素，所述贴合位置可定义为所述像素网格中的像素位置，并且响应于将所述线定义为中心对齐并且将所述厚度定义为具有奇数个像素，所述贴合位置可定义为所述像素网格中的子像素位置。

7.根据权利要求1所述的系统，其中所述样式设置定义用于形成所述形状的线是否具有中心对齐、外部对齐或内部对齐。

8.根据权利要求1所述的系统，其中所述贴合位置被定义为将用于形成所述形状的线在所述像素网格内的像素或子像素位置处对齐。

9.根据权利要求1所述的系统，其中所述位置将中心或角定义为所述形状的中心到角的定义或角到角的定义的一部分。

10.一种具有存储在其上的指令的至少一个计算机可读存储介质，所述指令响应于由计算设备的执行而使得所述计算设备执行操作，所述操作包括：

接收至少一个输入，所述至少一个输入指定几何形状、样式设置以及用作定位所述形状的基础的位置；

基于像素网格，将所述输入位置贴合到贴合位置，所述贴合位置基于所述几何形状、所述样式设置和所述输入位置；以及

基于所述贴合位置，将所述形状光栅化为像素。

11.根据权利要求10所述的计算机可读存储介质，其中基于所述像素网格的所述贴合位置使得用于形成所述形状的至少一个线沿所述像素网格的像素或子像素位置对齐。

12.根据权利要求10所述的计算机可读存储介质，其中指定所述几何形状和所述样式设置的所述输入是通过与形状创建系统的形状创建工具的用户交互起源的。

13.根据权利要求10所述的计算机可读存储介质，其中所述样式设置定义用于形成所述形状的线的厚度。

14.根据权利要求13所述的计算机可读存储介质，其中所述厚度相对于用于形成所述线的所述厚度的像素的数目被定义。

15.根据权利要求14所述的计算机可读存储介质，其中响应于将所述线定义为中心对齐并且将所述厚度定义为具有偶数个像素，所述贴合位置可定义为所述像素网格中的像素位置，并且响应于将所述线定义为中心对齐并且将所述厚度定义为具有奇数个像素，所述贴合位置可定义为所述像素网格中的子像素位置。

16.根据权利要求10所述的计算机可读存储介质，其中所述样式设置定义用于形成所述形状的线是否具有中心对齐、外部对齐或内部对齐。

17.根据权利要求10所述的计算机可读存储介质，其中所述贴合位置被定义为将用于形成所述形状的线在所述像素网格内的像素或子像素位置处对齐。

18.根据权利要求10所述的计算机可读存储介质，其中所述位置将中心或角定义为所述形状的中心到角的定义或角到角的定义的一部分。

19.一种在数字媒体环境中通过像素对齐来改进用户界面中对形状的渲染的系统，包括：

用于指定几何形状、样式设置和用作将所述形状定位的基础的位置的装置；

用于基于像素网格，将所述位置贴合到所述用户界面中的贴合位置的装置，所述贴合位置基于所述几何形状、所述样式设置和所述位置；以及

用于基于所述贴合位置，对所述用户界面中的所述形状进行光栅化的装置。

20.根据权利要求19所述的系统，其中基于所述像素网格的所述贴合位置使得用于形成所述形状的至少一个线沿所述像素网格的像素或子像素位置对齐。