Editing a graphic object in a vector representation to improve crisp property in raster representation

Various embodiments describe correcting blurriness of a graphic object rendered on a display. In an example, a computer system generates the graphic object in a vector format and in a raster format. The graphic object has a shaped defined by internal and external lines. The computer system detects the blurriness of an internal line and determines an offset by which the internal line should be translated to eliminated the blurriness. The graphic object is translated on the pixel grid of the raster format by the offset. The computer system also detects the blurriness of an external line and determines an offset by which the external line should be scaled to eliminate the blurriness. The external line scaled by this offset while keeping the center of the graphic shape in its position.

TECHNICAL FIELD

The application relates to generating a graphic object having a particular shape, where the graphic object is defined in a vector format and a raster format. Operations associated with editing the shape of the object in the vector format are also available in the raster format, while blurriness of the shape is avoided or reduced in the raster format.

BACKGROUND

Graphic editing applications are popularly used to generate and edit graphic objects of different shapes. For example, a user operates a computing device that hosts a graphic editing application and provides input via a user interface. In response, the graphic editing application generates a shape, such as a rectangle, rounded rectangle, ellipse, polygon, line or any other shape. Based on additional user input, the graphic editing application further edits the shape such that to scale up or down, change the color, and perform other edit operations that update properties of the shape. Generally the shape is defined by a set of lines that gives a geometric representation to the graphic object (e.g., a rectangle is defined by four straight lines having four right angles).

Certain graphic editing applications generate and store a graphic object in a vector format (e.g., in a file with an .ai, .svg, or .eps extension) and support export of the graphic object in a raster format (e.g., in a file with a .jpg, .png, or .bmp extension). The export includes previewing, editing, and, optionally, storing the graphic object in the raster format. Relative to the raster format, the vector format allows easier and more user friendly editing of the properties of the graphic object's shape.

Exporting the object from the vector format to the raster format presents multiple technical challenges that relate to, among other things, the editing of the graphic object's shape. These challenges include liveness and blurriness of the shape.

More specifically, some graphic editing applications support the concept of live shapes. This concept allows re-edits to the shape at any point in time as long as the graphic object has a live shape. The re-editing typically relies on the more edit-friendly vector format. In this way, even after the graphic object has been exported to the raster format, the vector format of the shape can still be re-edited easily and in a user friendly manner.

To support this concept of live shapes, a graphic editing application associates the graphic object with the shape's type (e.g., rectangle, rounded rectangle, ellipse, polygon, line), shape-specific properties (e.g., side dimensions of a rectangle), and editing widgets applicable to the type and specific properties (e.g., a widget to divide the rectangle into two squares given the side dimensions).

Losing liveness means losing the re-editing capabilities (e.g., the division widget is no longer available). It can occur when, for instance, the edits to the shape break its geometry. Because the geometry is broken, the existing associations between the graphic object and the shape type, properties, and widgets become inapplicable. As an example, if the user changes the shape to a new shape, (e.g., from the supported rectangular shape to a random shape), the existing associations (which would allow dividing the rectangular shape in two square) are no longer applicable (e.g., because the two squares could not be generated from the random shape) and the liveness of the graphic object is lost.

Blurriness relates to how well the graphic object will appear in the raster format. Generally, the raster format uses a pixel grid. The graphic object appears blurry when the export misaligns the shape on the pixel grid. More specifically, if a line of the shape is misaligned, the pixels of that line have properties (e.g., color) that differ from the corresponding vector format properties (e.g., a gray color when the vector format color is black). To correct the bluriness and achieve a crisp shape, the graphic editing application allows re-alignment of blurred lines.

Although existing graphic editing applications can support both the live shape concept and the bluriness correction, any re-alignment generally results in loss of liveness. In particular, the geometry of the shape is broken when a particular line is re-aligned. Because the geometry is broken, the liveness of the graphic object is lost. In turn, because the liveness is lost, the re-editing capabilities, including any editing widgets, are no longer available.

SUMMARY

Various embodiments describe correcting blurriness of a graphic object rendered on a display. In an example, a computer system generates a graphic object by defining a vector format and a raster format for the graphic object. The computer system detects that an internal line of the graphic object has a blurriness when rendered in the raster format. The raster format identifies a first location of the internal line on a pixel grid. The blurriness is associated with a first pixel distribution of the internal line at the first location on the pixel grid. The computer system reduces the blurriness of the internal line by at least computing a first offset between the first location and a second location on the pixel grid and translating the graphic object on the pixel grid by the first offset. The second location corresponds to a second pixel distribution of the internal line on the pixel grid. The computer system computes a second offset between an external line of the graphic object at a translated location and a third location on the pixel grid. The second offset is computed based on a blurriness of the external line. The computer system scales the graphic object by the second offset based on the vector format.

These illustrative examples are mentioned not to limit or define the disclosure, but to provide examples to aid understanding thereof. Additional embodiments and examples are discussed in the Detailed Description, and further description is provided there.

DETAILED DESCRIPTION

Embodiments of the present disclosure are directed to, among other things, a graphic editing application that supports vector and raster formats, the concept of liveness, and the blurriness correction of graphic objects. Unlike existing graphic editing applications, the embodiments maintain the liveness of a graphic object even after lines of the graphic object's shape have been re-aligned to avoid or eliminate blurriness. Generally, the graphic editing application re-aligns blurred lines of the shape without breaking the shape's geometry. In this way, the graphic object continues to have a live shape even after export to the raster format and subsequent blurriness correction. Accordingly, any user-friendly editing functionality available in the vector format can also be available after the export, thereby improving the process of editing the graphic object in the raster format while also rendering the graphic object crisp in this format.

To avoid breaking the geometry, the graphic editing application implements a phased approach in the blurriness correction. In a first phase, internal lines of the graphic object are analyzed to detect if any such line is misaligned to a pixel grid usable in the raster format. If an internal line is misaligned, an offset between a location of that line and a new location on the pixel grid is computed. No misalignment would exist at the new location, thereby the internal line becomes crisp. The graphic editing application translates the entire graphic object by the offset. In a second phase and after the graphic object has been translated, the graphic editing application determines if any of the external lines are misaligned to the pixel grid. If an external line is misaligned, an offset between a location of that line and a new location on the pixel grid is computed. No misalignment would exist at the new location, thereby the external line becomes crisp. The graphic editing application scales the entire graphic object by the offset, for example, by symmetrically scaling up or down the graphic object around its center. Hence, throughout the two phases, the translation and scaling maintains and does not break the geometry of the shape, thereby conserving the liveness of the graphic object.

In an illustrative example, the graphic object has a pie shape. In particular, the graphic object is initially generated as an ellipse in a vector format. An editing widget allows replacement of an arching portion of the ellipse with two internal lines: a vertical line and a horizontal line, resulting in the pie shape. When rendered in the raster format, the pie shape includes the two internal lines at a right angle (e.g., the two internal lines are vertical and horizontal) and a top, relatively short horizontal line. This top line is an external line. In this example, the internal vertical line and the external horizontal line (the one on the top) are blurry in the raster format. Accordingly, in the first phase, the graphic editing application translates the entire object by a certain horizontal offset such that the internal vertical line becomes properly aligned on the pixel grid. Hence, at the end of this phase, the shape of the graphic object is still a pie and the liveness of the graphic object is maintained. Next, in the second phase, the graphic editing application determines that the external horizontal line remains blurry. Accordingly, the graphic editing application symmetrically scales up the entire object around the vertical and horizontal axes by the proper offset. Here also, the shape of the graphic object is still a pie and the liveness of the graphic object is maintained at the end of the second phase. Hence, the pie becomes crisp while also the liveness of the graphic object is preserved. Because the graphic object has a live shape even after the blurriness correction, the editing widget remains available. Accordingly, the editing widget can still be used in the raster format to, for example, change the pie shape back to an ellipse or modify the angle between the internal lines.

Accordingly, embodiments of the present disclosure provide many technical advantages over existing graphic editing applications. As opposed to losing the liveness of a graphic object when blurriness of its shape-defining lines are corrected, the liveness of graphic object's shape is retained. Hence, the editing functionalities defined based on the associations between the graphic object and the shape type, properties, and widgets survive the blurriness correction and are available. For example, if an existing content editing application allows a user to create a pie out of an ellipse based on an editing widget, the bluriness correction breaks the pie's geometry and would no longer present the editing widget as an option to further edit the pie. From that point on, the user has to manually, and very likely inaccurately, further edit the properties of the pie, where these edits would have been otherwise automatically and accurately available through the editing widget. In contrast, the graphic editing application implementing the embodiments of the present disclosure presents the editing widget after the bluriness correction, thereby improving the accuracy and the process of further editing the pie.

In the interest of clarity of explanation, embodiments of the present disclosure are described in connection with a graphic object that has a pie shape. This shape is generated based on an ellipse and is bounded by a bounding box applicable to both the pie and the ellipse. The pie shape has internal lines and external lines. The reference to “internal” indicates that a line is inside the bounding box. The reference to “external” indicates that a line is on or by the bounding box. However, the embodiments are not limited as such. Instead, the embodiments similarly apply to any other shape for which a bounding box can be defined and that can be presented with internal and external lines.

FIG. 1illustrates an example of a computing environment for generating and editing graphic objects having shapes, according to certain embodiments of the present disclosure. As illustrated, the computing environment includes a computing device102, a data network104, and a computing resource106. The computing device102hosts a graphic editing application110that is usable to generate and edit graphic objects. Example of the graphic editing application include Adobe Illustrator, available from Adobe Systems, San Jose, Calif. Information about the graphic objects (shown as graphic object information112inFIG. 1) is sent from the computing device102to the computing resource106over the data network104. For example, the graphic object information112includes data that defines a graphic object such as its shape and properties of the shape, where the graphic object is generated by the graphic editing application110. The graphic object information112is stored on the computing resource106. The computing resource106provides to end user devices access to the graphic object over the data network104by transmitting the graphic object information112to these end user devices. Hence, the computing device102hosting the graphic editing application110acts a source for providing graphic objects and the computing resource106acts as a data store that distributes the graphic objects to end user devices.

In an illustrative example, a graphic object is usable as a menu icon on an end user device. In this example, an application developer uses the graphic editing application110to generate the menu icons for a particular application, where each icon has a particular shape. The menu icons and/or the application are published from the computing device102to the computing resource106. The computing resource106acts as an application store from which the menu icons and/or the application are downloadable to end user devices.

Generally, the computing device102includes a processor and a memory that stores computer-readable instructions associated with the graphic editing application110. When these instructions are executed by the processor, the graphic editing application110becomes operable to a user of the computing device102. The user interacts with a user input device120of the computing device102, such as with a touch screen, a keyboard, and/or a mouse, to provide user input112to the graphic editing application110. The user input112defines properties of a graphic object130to be generated, such as the shape type, size, width of the lines of the shape, color of the lines, and other shape-specific properties. Based on the user input112, the graphic editing application110generates and displays the graphic object130on a display140of the computing device102. For instance, the user operates the user input device120to draw the shape of the graphic object130on the screen. Based on this user input112, the graphic editing application generates and render the graphic object130according to the shape on the display140.

The graphic editing application110also allows the user to edit properties of the graphic object130. To do so, the graphic editing application110defines the graphic object130in a vector format and a raster format. The user can start with the vector format to generate the graphic object and then preview or store it in the raster format as further illustrated inFIG. 2. Edits can be performed in either formats. In an example, the graphic editing application110generates the graphic object130in the vector format, and a version of the graphic object130in the raster format is generated on demand. For instance, upon user input requesting a raster preview or an export of the graphic object130in the raster format, the graphic editing application110generates the raster format version of the graphic object130.

In an example, the graphic editing application110presents menu options for the edits. The menu options can include, for instance, stroke settings132and property editor134. The stroke settings132provide the options to set the width of the lines that define the shape of the graphic object130, the color of the lines, and the relative alignment of the lines (the alignment is further described in connection withFIGS. 6-10). Other settings for a line that belongs to the graphic object130are also possible and can be part of the stroke settings132including line-cap, line-corner, dashed-line-or-not, arrowhead. Generally, stroke settings132are part of style settings that define the style, including the appearance, of the graphic object130and/or of lines that form this object130. The style setting include, for instance raster effects, vector effects, fill, multi-fill, multi-stroke, and many other styles. These style settings can have impact on the blurriness and can be taken into account in the blurriness correction of the graphic object130. Generally, correcting the blurriness involves shifting (e.g., translating and/or scaling) lines of the graphic object130such that, when presented on the pixel grid, these lines have the setting values as defined by the style settings. In a way, correcting the blurriness is about shifting the lines by certain offsets to meet the style settings. These offsets are computed between the current locations of the lines to new locations where these style settings are met. The property editor134provides the options to edit the graphic object130such as to set its size and change its shape type (e.g., from an ellipse to a pie). Generally, the property editor134is available as long as the graphic object130has a live shape. The stroke settings132may be available even after the liveness is lost.

Hence, the graphic editing application110receives user input112(or any additional user input received through the user input device120) that invokes the stroke setting132, the property editor134. Based on this user input112, the graphic editing application110performs edit operations114on the graphic object130and renders the edits on the display140. The edit operations114include, for instance, changing the shape of the graphic object130(e.g., from an ellipse to a pie), changing the width, color, and/or alignment, of the shape's lines, changing the size and orientation of the graphic object130(and, equivalently, the lines), and either edits that affect the appearance of the graphic object130when rendered. The edit operations114can also include viewing (or previewing) the graphic object130in the vector format and/or the raster format.

The graphic editing application110also provides an option to publish136the graphic object130. The option is presented on the display140. Based on a user selection of the publish136, the graphic editing application110can store the graphic object130locally on the computing device102and can transmit the graphic object130for storage on the computing resource106over the data network104. The graphic object130is transmitted as the graphic object information112. The storage of the graphic object130, whether locally on the computing device102or remotely on the computing resource, can follow the vector format, the raster format, or both formats. For instance, the graphic object is stored as one or more files having .ai, .svg, or .eps extensions and/or .jpg, .png, or .bmp extensions.

FIG. 2illustrates an example of a vector format210and of a raster format250to define a graphic object, according to certain embodiments of the present disclosure. A graphic editing application, such as the graphic editing application110, supports both formats210and250. A user of the graphic editing application can generate the graphic object in any of the two formats210and250(e.g., first in the vector format210) and can switch220to the other format (e.g., to the raster format250). The format switching220can occur back and forth between the two formats210and250.

In an example, the graphic editing application uses vector graphics to support the vector format210. Vector graphics includes the use of polygons (or sets of mathematical functions (e.g., curves)) to render the graphic object. Vector graphics are based on vectors defined relative to control points or nodes. Each of the points has a definite position in a coordinate system (e.g., on the X and Y axes) of a work plane and determines the direction of the path of the vector. Each path may be assigned various attributes, including such values related to a stroke of the graphic object (e.g., of a line that defines a portion of the shape of this object), such as stroke color, shape, curve, width, and fill.

The graphic editing application also uses raster graphics to support the raster format250. Raster graphics includes the use of a dot matrix data structure, representing a grid of pixels, or points of color. A raster can be characterized by the width and height of the image in pixels and by the number of bits per pixel or color depth, which determines the number of colors the pixel can represent.

In the vector format, a line of graphic object can be a vector or a portion of a vector. In the raster format, a line of graphic object can be a collection of pixels. The pixels forming a line can be adjacent to one another (two pixels are adjacent when they share a side or a corner).

Generally, when rendered on a display or printed on a medium, the vector format210provides a higher image quality resolution than the raster format250. For example, the graphic object appears crispier (e.g., no blurriness) in the vector format210. Further, the vector format210allows the graphic object to be scaled up or down without a loss to the quality resolution because the scaling is applied to the set of polygons as opposed to a pixel grid map.

Another advantage of the vector format210is that the shape of the graphic object is defined according to the set of polygons (e.g., the shape is refined with a geometric representation according to the set of polygons). Accordingly, a property editor212can be associated with the set of polygons and is usable to edit the shape (and, more generally, the graphic object) based on the set of polygons. The graphic object has a live shape because of this association and the liveness is maintained as a long as the geometry is not broken.

If the graphic object is generated in the vector format210and, subsequently, its format is switched to the raster format250, the graphic object may become blurry, as further described in connection with the next figures. Also as further described in connection with the next figures, blurriness can be corrected in the raster format250without breaking the geometry of the shape. In other words, the blurriness can be reduced, if not eliminated, while also maintaining the definition of the graphic object according to the set of polygons. In this way, the property editor212is available for further edits of the graphic object according to the set of polygons even after the blurriness has been corrected. Further, the property editor212can be available in the raster format250. Edits made to the graphic object in the raster format210based on the property editor212can be also reflected in the vector format210. As such, if the property editor212provides a widget to change the shape of the graphic object (e.g., from a pie back to an ellipse, or from a pie with particular interior angles of its internal lines to another pie with different interior angle), that widget is available when the graphic object is rendered in the vector format210and in the raster format250. The widget also remains available even after any blurriness in the raster format250has been corrected.

FIG. 3illustrates an example of generating a graphic object having a pie shape310based on an ellipse shape320, according to certain embodiments of the present disclosure. AlthoughFIG. 3illustrates this generating in a vector format330, a raster format can be used instead if the underlying graphic editing application supports both formats and a property editor340that is associated with the definition of the graphic object in the vector format330(e.g., with the defining set of polygons).

In an example, generating the pie shape310starts with the ellipse shape320. A bounding box322is defined around the ellipse shape320based on the lines of this ellipse. The lines are represented by the set of polygons that define the ellipse shape320. The bounding box322includes option points324. These option points324can be invoked based on user input350received in connection with the property editor340. For example, the user input350can select option points324on the corner of the bounding box322. In turn, an option in the property editor340is presented as a widget that allows a resizing of the ellipse. In response to the user input350defining a scaling factor (a scaling up or down factor depending on the resizing), the ellipse shape320is resized by applying this factor to the set of polygons, thereby resizing the ellipse shape320. Further, the user input350can select option points324between the two corners (e.g., in the middle of a side of the bounding box322). In turn, an option in the property editor340is presented as a widget that allows users to remove a portion of an external line and to replace the removed portion with internal lines intersecting inside the ellipse. By using this widget, the pie shape310is generated by updating the set of polygons to remove the portion and add a new set of polygons that defines the internal lines and their angle. Because the pie shape310is defined as a set of polygons (e.g., the remaining set associated with the ellipse shape320and the new set associated with the internal lines), the overall geometry of the graphic object is not broken. Instead, the graphic object has a live pie shape and the property editor340remains available to edit the pie shape310.

FIG. 4illustrates an example of a pie shape of a graphic object presented in a raster format, according to certain embodiments of the present disclosure. As illustrated, the pie shape is crisp (e.g., has no blurriness) when rendered on a pixel grid410. A description of a blurry pie shape, reasons for the blurriness, and techniques to correct the blurriness is further provided in connection with the next figures. Generally, the pie shape is defined by a set of lines. Each of the lines can be a segment or a vector that has a corresponding polygon-based definition in a vector format of the graphic object.

In an example, the set of lines includes external and internal lines. The external lines correspond to some or all the lines that were originally defined for the ellipse shape. Some of these lines fall on or are proximate to (e.g., are located within one pixel) the bounding box around the ellipse shape. In addition, some of these lines may be represented with a straight line geometry in at least the raster format. As illustrated inFIG. 4, the external lines include a left, vertical line420, a top, horizontal line432, and a bottom, horizontal line434.

In comparison, the internal lines correspond to some or all the lines that were added to the modified ellipse shape to define the pie shape. These lines generally fall inside the bounding box and are, thus, referred to as internal lines. Depending on the interior angle formed by the internal lines, some or all these lines may be represented with a straight line geometry in at least the raster format. As illustrated inFIG. 4, the internal lines include a horizontal line442and a vertical line444that form an interior right angle. Of course other pie shapes are possible with other interior angles (e.g., an interior angle falling in a range of zero to three-hundred sixty degrees, where this range excludes zero and three-hundred sixty degree interior angles).

A line that belongs to the shape and that is defined by a vector or a segment (e.g., having a defining set of polygons) can have certain stroke settings, regardless of whether the line is external or internal. The stroke settings define, for example, the alignment, width, and color of the line. The alignment is further described in connection with the next figures. Briefly, the alignment specifies how the line should be positioned on the pixel grid410relative to coordinate points on that grid410. The width defines how thick the line should be and can be expressed as a function of the number of pixels that the width of the line should occupy on the pixel grid (e.g., one pixel wide, two pixels wide, etc.). The color defines the color of each pixel that the line occupies on the pixel grid410.

In the illustrative example ofFIG. 4, each of the lines has a stroke width of one pixel, a black color, and an alignment that is centered relative to center points of the occupied pixels on the pixel grid410. Of course other variations to the stroke settings are possible (e.g., different width, color, and alignment). Further, all the lines that form the pie shape can, but need not, have the same stroke settings. The pie shape ofFIG. 4is crisp because this shape is properly aligned on the pixel grid410, where the proper alignment results in a proper pixel distribution of each line on that grid410(e.g., the width of each line is one pixel and each occupied pixel has a black color).

FIG. 5illustrates an example of a blurry pie shape of a graphic object presented in a raster format, according to certain embodiments of the present disclosure. Similarly toFIG. 4, here the pie shape has a left, vertical external line520, a top, horizontal external line532, and a bottom, horizontal external line534. The pie shape also has a horizontal internal line542and a vertical internal line544. However and unlikeFIG. 4, here the pie shape has blurry lines when presented on a pixel grid510. In particular, the lines520,532,534,542, and544are blurry because of their misalignment on the pixel grid510. The misalignment is defined relative to coordinate points on the pixel grid and is further described in connection with the next figures.

Generally, the misalignment of a line results in a pixel distribution of that line on the pixel grid, where the pixel distribution does not match some or all of the stroke settings. For instance, a line formed by pixels is blurry when the pixels are misaligned on the pixel grid and the pixel misalignment results in the incorrect pixel distribution. In an example, the stroke settings define a one pixel width and a black color (or some other width and color values). However, due to the misalignment, the line is two pixels wide (or some width that is different from the user-defined width in the stroke settings). In turn, this width may necessitate a distribution of color across the occupied pixels, such that the color of each occupied pixel is gray instead of black (or some other color that is different from the user-defined color in the stroke settings).

As illustrated inFIG. 5, the blurriness of each of the lines520,532,534,542, and544is shown with a dotted ellipse. For crispness (as inFIG. 4), each of the lines520,532,534,542, and544should be one pixel wide, black, and centered relative to each occupied pixel. In other words, each of the lines520,532,534,542, and544would be crisp when rendered on the pixel grid if its pixel distribution is for a one pixel width with proper color (e.g., shown with solid black inFIG. 4) and alignment per pixel. However, each of the lines520,532,534,542, and544has a different pixel distribution and, thus, is not crisp. In particular, each of the lines520,532,534,542, and544have, at least in portions thereof, a two pixel width because of its misalignment, and the two pixel width results in a different color (e.g., gray shown with shaded lines inFIG. 5) in each of the occupied pixels.

FIG. 6illustrates an example of a pixel grid600usable in a raster format, according to certain embodiments of the present disclosure. The pixel grid600is a grid of pixels610representing a coordinate system for placing a line of a graphic object. Each pixel610can be occupied by the line. And occupying a pixel610indicates that the line uses the pixel610, where the properties of this pixel610(e.g., color) would be set according to the stroke settings of the line.

Each pixel610contains coordinate points that can be used for positioning the line through that pixel610(e.g., for the alignment). The coordinate points include, for example, corner points620on the corners of each pixel610and center points630in the center of each pixel610. In a way, the center points630represent corner points on a sub-pixel grid.

The alignment of the line can be defined relative to the corner points620or the center points630. In an example, aligning the line with a corner point620indicates that middle of the line should go through the corner point620. In this way, if the line is one pixel wide and is aligned with a corner point620, half of the line occupies the pixel610to which the corner point620belongs. In comparison, aligning the line with a center point630indicates that middle of the line should go through the center point630. In this way, if the line is one pixel wide and is aligned with a center point630, the line fully occupies the pixel610to which the center point630belongs. These and other alignments are further shown inFIGS. 7-10.

Generally, the stroke settings of the line include a setting that identifies whether the line should be aligned with a corner point of a pixel of the pixel grid or with a center point of the pixel. This stroke setting can be set based on user input received at the underlying graphic editing application. As described in connection withFIGS. 7-10, different stroke alignment types are possible based on the use of corner and center points, including an inside alignment (FIG. 7), an outside alignment (FIG. 8), a center alignment with an odd number of pixels (FIG. 9), and a center alignment with an even number of pixels (FIG. 10). In an example, the specific stroke alignment type is defined by the stroke settings. A stroke alignment indicates the direction in which stroke width should distribute relative to the line itself rather than the pixel-grid (e.g., inside alignment indicates that the stroke width should be inward to the line). Stroke can be distributed about a line towards inward/outward direction (inside/outside stroke-alignment) or both (center stroke-alignment).

Stroke alignment may not be the direct cause for blurriness. Instead, and as explained in connection withFIG. 5, pixel alignment can directly cause the blurriness. Pixel alignment indicates the placement of the line relative to the pixel-grid (e.g., relative to the corner points of the pixel grids). Correcting the blurriness depends on the pixel alignment. In turn, properly aligning the pixels takes into account the stroke alignment. For example, for inside and outside stroke alignments, the pixel alignment would be based on corner points of the pixel grid (e.g., the pixels of the line are properly aligned—the pixel alignment is proper and there is no blurriness—when each pixel has its corners aligned with corner points of the pixel grid). For center stroke alignment, the pixel alignment would be based on center points of the pixel grid (e.g., the pixels of the line are properly aligned when each pixel has its corners aligned with center points of the pixel grid). Hence, an offset is computed to properly align the pixels with the corner pixels or center pixels based on the stroke alignment. Once computed, the line is shifted (e.g., translated or scaled) by the offset to a new location on the pixel grid. Stroke alignment is used to properly distribute the stroke width at the new location.

In an example, a table can be used for shifting the line to correct blurriness. The table identifies rules for computing offsets to correct the pixel alignment, where the correction moves the line relative to corner points or center points of the pixel grid, and where the use of corner points or center points is based on the stroke setting (e.g., inside alignment, outside alignment, center alignment with an even number of pixels, and center alignment with an odd number of pixels). This table can be stored locally to the underlying graphic editing application and can be accessed and used by this application to compute the offsets for correcting the blurriness.

FIG. 7illustrates an example of an inside alignment of a line710relative to corner points of a pixel grid, according to certain embodiments of the present disclosure. In an example, the corner points of the pixels to be occupied by the line710on the pixel grid form a perimeter720(shown as a dotted perimeter inFIG. 7). The stroke setting identifies that an outside edge of the line710should be aligned with each corner point belonging to the perimeter720. In other words, the line710is bounded externally by the perimeter720(e.g., the line710is inside the perimeter720and its outside edge goes through the corner points that define the perimeter720).

If the line710appears blurry and is set to have an inside alignment, pixel misalignment causes the blurriness and can be observed between the outside edge (e.g., the outside corners of each the pixels that form the line710) and the corner points of the pixel grid. In this case, the line710can be shifted by up to half a pixel in a particular direction based on the pixel misalignment. At the new location, the line710is bounded externally by the perimeter720.

FIG. 8illustrates an example of an outside alignment of a line810relative to corner points of a pixel grid, according to certain embodiments of the present disclosure. In an example, the corner points of the pixels to be occupied by the line810on the pixel grid form a perimeter820(shown as a dotted perimeter inFIG. 8). The stroke setting identifies that an inside edge of the line810should be aligned with each corner point belonging to the perimeter820. In other words, the line810is bounded internally by the perimeter820(e.g., the line810is outside the perimeter820and its inside edge goes through the corner points that define the perimeter820).

If the line810appears blurry and is set to have an outside alignment, pixel misalignment causes the blurriness and can be observed between the inside edge (e.g., the inside corns of each of the pixels that form the line810) and the corner points of the pixel grid. In this case, the line810can be shifted by up to half a pixel in a particular direction based on the pixel misalignment. At the new location, the line810is bounded internally by the perimeter820.

FIG. 9illustrates an example of a center alignment of a line910having an odd number of pixels relative to center points of a pixel grid, according to certain embodiments of the present disclosure. Here, the number of pixels correspond to the width of the line910, and is illustrated as one (e.g., the line910is one pixel wide). Of course other widths are possible. In an example, the center points of the pixels to be occupied by the line910on the pixel grid form an internal perimeter920(shown as a dotted perimeter inFIG. 9). The stroke setting identifies that a middle of the line910should be aligned with each center point belonging to the internal perimeter920. In other words, the internal perimeter920goes through the middle of the line910.

If the line910appears blurry and is set to have a center alignment, pixel misalignment causes the blurriness and can be observed between the middle of the line910and the center points of the internal perimeter920. In this case, the line910can be shifted by up to half a pixel in a particular direction based on the pixel misalignment. At the new location, the line910is centered with the internal perimeter920.

FIG. 10illustrates an example of a center alignment of a line1010having an even number of pixels relative to center points of a pixel grid, according to certain embodiments of the present disclosure. Here, the number of pixels correspond to the width of the line1010, and is illustrated as two (e.g., the line1010is two pixel wide). Of course other widths are possible. In an example, the corner points of the pixels to be occupied by the line1010on the pixel grid form an internal perimeter1020(shown as a dotted perimeter inFIG. 10). The stroke setting identifies that a middle of the line1010should be aligned with each corner point belonging to the internal perimeter1020. In other words, the internal perimeter1020goes through the middle of the line1010.

If the line1010appears blurry and is set to have a center alignment, pixel misalignment causes the blurriness and can be observed between the middle of the line1010and the corner points of the internal perimeter1020. In this case, the line1010can be shifted by up to half a pixel in a particular direction based on the pixel misalignment. At the new location, the line1010is centered with the internal perimeter1020.

FIG. 11illustrates an example of correcting the blurriness of a graphic object having a pie shape, according to certain embodiments of the present disclosure. Here, the pie shape is similar to the one ofFIG. 5. In particular, it includes a left, vertical external line1120, a top, horizontal external line1132, a bottom, horizontal external line1134, a horizontal internal line1142, and a vertical internal line1144that are blurry. The bluriness is corrected in two phases based on computed offsets.

In the first phase, the blurriness of the internal lines1142and1144is corrected. In the illustrative example ofFIG. 11, the internal line1142is a horizontal line. Its blurriness can be corrected by translating this line in the vertical direction by a particular offset. The direction and the particular offset depend on the stroke settings, including the user-defined alignment and stroke width. The translation moves the internal line1142up or down from its current location on the pixel grid to a new location. The translated distance corresponds to the direction and offset. The new location on the pixel grid results in proper alignment of the internal line1142such that its pixel distribution meets the stroke settings. For instance, if the stroke settings is for a one pixel width, a black color, and an inside alignment, the internal line1142at the new location will have these settings. Likewise, the internal line1144can be translated by an offset. Because this line1144is vertical, the translation is horizontal (e.g., to the left or to right).

Translating the internal lines1142and1144only can break the geometry of the pie shape. Instead, once the two offsets are determined (e.g., the offset in the vertical direction for the horizontal internal line1142, and the offset in the horizontal direction for the vertical internal line1144; these two offsets are illustrated with element1152inFIG. 11), the entire pie shape (or, equivalently, the graphic object) is translated1150by these two offsets. In other words, the internal line is translated not only by the vertical direction offset, but also by the horizontal direction offset, and so are the remaining lines that form the pie shape.

In the second phase, the blurriness of the external lines1120, and1132, and,1134is corrected. In an example, the blurriness of the external line1132can be corrected by scaling1170this line in a particular direction by a particular offset1172. The particular direction and offset1172depend on the stroke settings, including the user-defined alignment and stroke width. The scaling1170resizes the external line1132, such that one of its edges remains at the original location on the pixel grid and another edge moves to a new location. In this way, the scaled external lines1132occupies pixels (or portions thereof) between its first edge at the original location and its second edge at the new location. This scaling1170results in proper alignment of the external line1132such that its pixel distribution meets the stroke settings. For instance, if the stroke settings is for a one pixel width, a black color, and an inside alignment, the scaled external line1132will have these settings. Likewise, the external line1120and1134can each be scaled by an offset at a particular direction.

To avoid breaking the geometry of the pie shape, the scaling of the external lines1120,1132, and1134is anchored to the center of the pie shape (which can correspond to the center of the original ellipse). For instance, the external line1134is scaled, while keeping the center at its current location on the pixel grid. This anchored scaling also avoid introducing blurriness to the now crisp internal lines1142and1144.

FIG. 12illustrates an example of a flow for correcting the blurriness of a graphic object, according to certain embodiments of the present disclosure. A computer system hosting a graphic editing application, such as the computing device102hosting the graphic editing application110ofFIG. 1, may be configured to perform the illustrative flow in some embodiments. Instructions for performing the operations of the illustrative flow can be stored as computer-readable instructions on a non-transitory computer-readable medium of the computer system. As stored, the instructions represent programmable modules that include code or data executable by a processor(s) of the computer system. The execution of such instructions configures the computer system to perform the specific operations shown in the figures and described herein. Each programmable module in combination with the processor represents a means for performing a respective operation(s). While the operations are illustrated in a particular order, it should be understood that no particular order is necessary and that one or more operations may be omitted, skipped, and/or reordered.

In the interest of clarity of explanation, the illustrative flow is described in connection with a graphic object having a pie shape. However, the illustrative flow similarly applies to other shape types and to more than one graphic object (each of which can have a different shape type). Generally, the illustrative flow can be applied to a graphic object that has lines, where these lines are defined based on a set of polygons. In the further interest of clarity of explanation, the illustrative flow is described in connection with correcting the blurriness of vertical and horizontal lines of the graphic object's shape. However, the illustrative flow similarly applies to lines having other orientations. Generally, the illustrative flow can be applied to perform translations and scaling based on offsets, where the offsets result in proper alignments of the lines on the grids given their stroke settings.

The illustrative flow starts at operation1202, where the computer system receives user input associated with a graphic object. In an example, the user input is received at a user interface of the graphic editing application and defines an initial shape of the graphic object, such as an ellipse shape. The ellipse is represented in a vector format and a bounding box is defined around the ellipse shape in the vector format. Based on the bounding box and the definition of the ellipse in the vector format (e.g., as a set of polygons), a property editor is presented at the user interface and allows the user to replace portions of the ellipse with internal lines. Further the property editor, or some other menu option of the user interface, allows the user to set the stroke settings of the ellipse shape and/or the internal lines (or, equivalently, the pie shape).

At operation1204, the computer system generates the graphic object having the vector format and a raster format. In an example, upon receiving the user input via the user interface (e.g., at the property editor), the computer system removes the portions of the ellipse shape and adds the internal lines to the graphic object (e.g., by removing a subset of the polygons corresponding to the portions and adding a new set of polygons corresponding to the internal lines in the vector format), thereby generating a live pie shape. The graphic editing application also supports the raster format and can present the pie shape on a pixel grid according to the raster format. In an example, the graphic editing application generates the graphic object in the vector format, and a version of the graphic object in the raster format is generated on demand. For instance, upon user input requesting a raster preview or an export of the graphic object in the raster format, the graphic editing application generates the raster format version of the graphic object.

At operation1206, the computer system detects that an internal line of the graphic object has a blurriness when rendered in the raster format. In an example, the computer system identifies the internal lines that are vertical or horizontal based on their geometric definition in the vector format. For each of these internal lines, the computer system detects the blurriness by assessing the pixel distribution of the internal line according to its stroke settings. For instance, the raster format identifies a first location of an internal line on the pixel grid. At that location, the internal line has a first pixel distribution. If that pixel distribution does not meet the stroke settings, the computer system determines that the internal line is blurry at the first location. To illustrate, if the stroke settings are for a one pixel wide internal line and the pixel distribution indicates that the width at the first location on the pixel grid is two pixels (or some other number different than one), the computer system declares blurriness.

At operation1208, the computer system reduces (e.g., eliminates or minimizes) the blurriness of each internal line (if blurry) by at least computing a first offset for the internal line and translating the graphic object by the first offset. In an example, the entire graphic object moves by the first offset. For example, if the offset of an internal vertical line is half a pixel to the right, all the lines and the center of the graphic object are translated by half a pixel to the right. In this way, the pie shape geometry, as defined in the vector format, is not broken and the liveness of the pie shape is not lost.

In an example, computing the first offset for an internal line is based on the first location of that internal line on the pixel grid (e.g., its original or current location) and a second location on the pixel grid to which the internal line would be translated. The second location is the nearest to the first location (e.g., the offset is the smallest) and corresponds to (e.g., when the translation is performed, would result in) a pixel distribution that meets the stroke settings of the internal line. In other words, when the internal line is at the second location, the internal line would not have any blurriness because the stroke settings would be met at that location. This second location can be referred to as the nearest pixel-perfect-location. Generally, to keep this second location as the nearest location, the offset is bounded to a range of zero to a half pixel. Further, the specific value of the first offset depends on the alignment and width settings and can be derived from a table that specify rules for translating the internal line.

To illustrate, the internal line is a vertical line. Its stroke settings specify a width of one pixel and an inside alignment. In comparison, the pixel distribution at the first location shows a width of two pixels. Accordingly, the computer system determines that at half a pixel to the right of the first location, the internal line would have a one pixel width. Hence, the computer system sets the offset to half a pixel to the right. This new location corresponds to the second location. The computer aligns the line at the new location according to the stroke setting (e.g., the inside alignment).

The operations1206and1028are repeated across the internal lines that are blurry. Accordingly, the computer system may translate the graphic object by multiple offsets in multiple directions. Nonetheless, the translations do not break the geometry of the pie shape.

At operation1210, the computer system detects that an external line of the graphic object has a blurriness at a translated location. This operation is similar to operation1206, where the detection is performed for the external line once the graphic object has been translated per the offset(s) derived and used under operations1206and1208.

At operation1212, the computer system computes a second offset to eliminate the blurriness of the external line. In an example, this second offset is between the external line at the translated location and a third location on the pixel grid. The second offset is computed based on the blurriness of the external line at the translated location as detected under operation1210. The third location is the nearest pixel-perfect location relative to the translated location of the external line. The detection is similar to operation1208with two exceptions and is performed for the external line once the graphic object has been translated.

The first exception relates to scaling. In the case of the translation, the offset is in the horizontal direction for an internal vertical line and in the vertical direction for an internal horizontal line. However, in the case of scaling, no such constraint exists. The offset can be in the vertical direction, diagonal direction, or horizontal direction for an external line. In other words, the third location (the nearest-pixel-perfect location) can be in any direction relative to the translated location.

The second location relates to limiting the scaling. In the case of the translation, each offset is individually bounded to a range of zero to half a pixel. However, in the case of scaling, two ranges are used: an individual range and a collective range. The individual range limits an individual offset to an amount between zero and a half a pixel. The collective range limits a collective offset to an amount between zero and one pixel. More specifically, the individual range represents the range by which an external line (and, equivalently, the entire graphic object) can be scaled to correct the external line's blurriness. However, in certain situations, scaling the graphic object based on one offset to correct the blurriness of one external line and then by another offset to correct the blurriness of another external line can result in a too large scaling noticeable to an end user. To avoid such scenarios, the collective range is used. Similarly, a uniform scaling around a center of the graphic object typically moves two opposite lines by the same amount in opposite direction. The total amount represents the collective scaling of these two lines and should be limited to a value within the collective range.

More specifically, the collective range is applicable when two external lines should be scaled and are opposite of each other in the graphic object (such as the top, horizontal external line1132and the bottom, horizontal external line1134ofFIG. 11). In this case, an offset is computed for each of these external lines. If the combination of the offset falls outside the collective range, the direction of one offset is flipped (e.g., by reversing its direction).

To illustrate, assume that a top, horizontal external line should be scaled upward in the vertical direction by half a pixel and that a bottom, horizontal external line should be scaled downward in the vertical direction by half a pixel. This would result in scaling the graphic object by a full pixel in the vertical direction. Because, the one pixel scaling falls outside the collective range, the offset of the bottom line is flipped from half a pixel in the downward direction to a half a pixel in the upward direction. In this way, the graphic object would be scaled in half a pixel, which is within the collective range.

At operation1214, the computer system eliminates the blurriness of the external line by at least scaling the graphic object by the second offset. In an example, the scaling keeps the center of the graphic object fixed (e.g., at its current translated location from operation1208) and is symmetrical about the horizontal and vertical axes. The scaling includes sizing up or down the external line by the second offset, where this sizing is applied to the external line in the vector format (e.g., applies to the set of polygons that define the external line). This type of scaling (anchoring the center) does not cause loss of the liveness of the pie shape because of the symmetrical scaling about the horizontal and vertical axes.

In an example, the scaling is uniform in a desired direction (e.g., horizontal, vertical, or both) and about the center of the graphic object. In other words, in any direction, only one scaling is applied. For instance, only one scaling is applied to the external top and bottom horizontal lines and moves these lines vertically about the center. Continuing with this illustration, because the scaling is uniform to maintain geometry, the two external horizontal lines will move vertically by the same amount but in opposite directions from each other. The collective range is applied such that the total amount of the vertical movement of these two external horizontal lines is less than one pixel in the vertical direction.

At operation1216, the computer system receives additional user input specifying an edit operation to the graphic object. For example, after the graphic object has been scaled, the additional user input is received and can edit any property of the pie shape (including changing the internal lines, resizing, changing the shape back to an ellipse, editing the stroke settings, etc.). The edits are based on the liveness of the pie shape, where available edit operations can be presented in a property editor.

At operation1218, the computer system updates properties of the graphic object in the vector format based on the edit operation. For example, the values of these properties are modified in the vector format based on the additional user input.

At operation1220, the computer system outputs the graphic object. In an example, the graphic object is outputted in a raster format and, optionally, in the vector format. Outputting the graphic object includes storing this object in a file with the proper extension. The file can be stored locally on the computer system or transmitted over a data network for remote storage at a computing resource.

FIG. 13illustrates examples of components of a computer system1300, according to certain embodiments of the present disclosure. The computer system1300includes at least a processor1302, a memory1304, a storage device1306, input/output peripherals (I/O)1308, communication peripherals1310, and an interface bus1312. The interface bus1312is configured to communicate, transmit, and transfer data, controls, and commands among the various components of the computer system1300. The memory1304and the storage device1306include computer-readable storage media, such as RAM, ROM, electrically erasable programmable read-only memory (EEPROM), hard drives, CD-ROMs, optical storage devices, magnetic storage devices, electronic non-volatile computer storage, for example Flash® memory, and other tangible storage media. Any of such computer-readable storage media can be configured to store instructions or program codes embodying aspects of the disclosure. The memory1304and the storage device1306also include computer-readable signal media. A computer-readable signal medium includes a propagated data signal with computer-readable program code embodied therein. Such a propagated signal takes any of a variety of forms including, but not limited to, electromagnetic, optical, or any combination thereof. A computer-readable signal medium includes any computer-readable medium that is not a computer-readable storage medium and that can communicate, propagate, or transport a program for use in connection with the computer system1300.

Further, the memory1304includes an operating system, programs, and applications. The processor1302is configured to execute the stored instructions and includes, for example, a logical processing unit, a microprocessor, a digital signal processor, and other processors. The memory1304and/or the processor1302can be virtualized and can be hosted within another computing system of, for example, a cloud network or a data center. The I/O peripherals1308include user interfaces, such as a keyboard, screen (e.g., a touch screen), microphone, speaker, other input/output devices, and computing components, such as graphical processing units, serial ports, parallel ports, universal serial buses, and other input/output peripherals. The I/O peripherals1308are connected to the processor1302through any of the ports coupled to the interface bus1312. The communication peripherals1310are configured to facilitate communication between the computer system1300and other computing devices over a communications network and include, for example, a network interface controller, modem, wireless and wired interface cards, antenna, and other communication peripherals.