The Mosaic class Views::StrokeGradientPath implements a graphical object specialized to display the outline of a shape from provided path data filled by linear or radial gradient. A single path can be composed of line segments, Bézier curves and elliptical arcs. Several paths can be combined together in order to describe complex shapes. The thickness of the displayed path, its end caps and join points can be configured. The gradient can contain multiple color stops. This so-called Stroked Gradient Path view can be used to compose the appearance of a GUI component, in particular to display diagrams, curves, complex borders, circles, etc. The following screenshot demonstrates few examples of how Stroked Gradient Path views appear in the canvas area of Composer (and accordingly on the screen in your target device):

The following sections are intended to provide you an introduction and useful tips of how to work with the Stroked Gradient Path view. For the complete reference please see the documentation of the Views::StrokeGradientPath class.

To add a new Stroked Gradient Path view just at the design time of a GUI component do following:

As long as the Stroked Gradient Path view is selected you can inspect and modify its properties conveniently in the Inspector window as demonstrated with the property Bounds in the screenshot below. Please note, for better overview the below screenshot has been made with Inspector window being configured to sort the properties by categories:

Once added, you can freely move the Stroked Gradient Path view, or you simply grab one of its corners and resize it in this way. You can control the position and the size of the view also by directly modifying its property Bounds. If you want the Stroked Gradient Path view to appear behind other views you can reorder it explicitly.

In order to display a graphical shape in the Stroked Gradient Path view, you have to provide the corresponding path information. You can consider the path as a list of connected straight line segments (so-called edges) describing precisely the outline of the shape intended to be to displayed. Depending on the application case the path may consist of few or even hundreds of edges. In this manner you describe primitive (e.g. triangles) or even complex shapes (e.g. circles, rings, Bézier curves or polygons).

To provide the path information you use a Path Data object. Usually you will add such object to your component, you will implement code to fill this object with your particular path information (the lines, arcs, Bézier curves, etc.) and finally you will assign the so prepared object to the property Path of the affected Stroked Gradient Path view. With the Inspector Assistant you can conveniently select the right object when you edit the initialization expression for the property Path. For example:

As soon as you have connected the both, the information provided in the Path Data object appears within the Stroked Gradient Path view. If desired, you can assign the same Path Data object to several Stroked Gradient Path views (and Filled Gradient Path views). If during the runtime of the application, the content of the Path Data object changes, all associated views are updated automatically.

In particular cases, when the desired shape is an ellipse, ring, pie segment, circle segment, etc. you can use the more convenient Arc Path Data object. With this object you don't need to implement any code to prepare the path data. Instead, you simply configure the properties of the Arc Path Data object determining so e.g. the desired radiuses of the ellipse, its start and end angles, and so far.

In order to display a graphical shape in the Stroked Gradient Path view, you have to provide the gradient information. You can consider the gradient as a list of color stops. The color values between the color stops are interpolated. Depending on the application case the gradient may consist of two or more color stops, whereby the maximum number of color stops is limited to 256. Additionally, the gradient stores information describing its start/end coordinates or the radius in case of a radial gradient.

To provide the gradient information you use a Linear Gradient or Radial Gradient object. Usually you will add such object to your component, implement code to configure this object with your particular gradient information (color stops, start/end coordinates, radius, etc.) and finally you will assign the so prepared object to the property Gradient of the affected Stroked Gradient Path view. With the Inspector Assistant you can conveniently select the right object when you edit the initialization expression for the property Gradient. For example:

As soon as you have connected the both, the information provided in the gradient is used by the Stroked Gradient Path view. If desired, you can assign the same Gradient object to several Stroked Gradient Path views (and Filled Gradient Path views). If during the runtime of the application, the content of the Gradient object changes, all associated views are updated automatically.

Per default, the coordinates provided in the associated path object are displayed relative to the top-left corner of the Stroked Gradient Path view. This corner corresponds thus to the origin of the path own coordinate system (0,0). By modifying the property Offset you can specify other position within the area of the view where to map the origin of this coordinate system. In other words, changing the property Offset causes the displayed shape to be moved within the Stroked Gradient Path view.

Let's assume, the associated path object describes a circle with its center lying at the origin of the path own coordinate system (0,0). Depending on how the property Offset is configured, the circle appears at different positions within the Stroked Gradient Path view as demonstrated in the following screenshot. For visualization purpose, the black cross indicates the center of the path coordinate system and the thin blue frames are borders of the respective Stroked Gradient Path views. Please note, parts of a shape lying outside of the view area are clipped and not visible:

Originally the positive Y-axis of the path coordinate system points downwards, which corresponds to how other positions or coordinates are treated in Embedded Wizard. By initializing the property FlipY with the value true, the Stroked Gradient Path view mirrors vertically the path coordinate system resulting in the Y-axis pointing upwards, which is more natural for mathematical application cases. The shape described by the path appears accordingly mirrored. Furthermore, with this alternation the effect of the property Offset changes, so that it specifies the position where to map the origin of the path coordinate system relative to the bottom-left corner of the view. The following screenshot demonstrates this effect:

To specify the thickness of the stroked path you simply use the property Width. It accepts floating-point values permitting you to change the width with sub-pixel precision. For example, to display a path with 10.75 pixel thickness, you assign the value 10.75 to this property. The following figure demonstrates the effect:

The Stroked Gradient Path view supports three different modes how the connection points between two consecutive path edges (the path corners) should be rasterized. You select the desired mode by initializing the property JoinPoints with the appropriate value. The following table provides an overview of the possible values:

Mode	Description
Graphics::PathJoin.Bevel	The path segments are joined by connecting their outside edges with a single straight line segment. This is the default mode.
Graphics::PathJoin.Miter	The path segments are joined by extending their outside edges until they intersect.
Graphics::PathJoin.Round	The path segments are joined by rounding the corners lying in between. The diameter of the used circle corresponds to the thickness of the stroked path.

When using the mode Miter you should consider the further property MiterLimit. This property determines the maximum ratio between the resulting length of the miter and the half of the path thickness. If this limit is exceeded, the affected corner is rasterized with the Bevel mode instead of Miter. With MiterLimit is ensured, that outside edges of a very sharp corner are not prolongated excessively. The following figure demonstrates the effect of the three modes:

The Stroked Gradient Path view supports four different modes how to raster the start and the end cap of an opened path. You select the desired modes by initializing the properties StartCap and EndCap with appropriate values. In this manner you can configure the start and end caps individually. The following table provides an overview of the possible values:

Mode	Description
Graphics::PathCap.Flat	The path caps are squared off just at the corresponding path cap position. This is the default mode.
Graphics::PathCap.Square	The path caps are extended by the half of the thickness of the stroked path and then squared off.
Graphics::PathCap.Round	The path caps are extended by the half of a circle with diameter equal to the thickness of the stroked path.
Graphics::PathCap.Triangle	The path caps are extended by a triangle with height of the half of the thickness of the stroked path.

The following figure demonstrates the effect of the four modes. Please note the small black crosses indicating the positions where the path starts and ends:

The Stroked Gradient Path view rasterizes the shape per default with enabled anti-aliasing. This produces the best possible results. If not desired, with the property Quality you can disable this mode. For this purpose initialize Quality with the value false. The following figure demonstrates the results depending on the current setting of the property:

Embedded Wizard own implementation to rasterize vector graphics calculates with 4x anti-aliasing, which means that every pixel is divided in 4 sub-pixel vertically and 4 sub-pixel horizontally. If the vector graphic is rasterized by using target own graphics subsystem (e.g. GPU), the resulting anti-aliasing depends on the implementation of this subsystem. In particular cases (e.g. in case of the WebGL Platform Package) the anti-aliasing can't be deactivated.

The visibility of the Stroked Gradient Path view is determined primarily by the property Visible. It is also affected by the provided Path Data and the Gradient object specified for the view.