Using sweep gradient¶
Use a sweep gradient to show transitions between two or more colors rotated around a center point.
To paint a shape node with a sweep gradient, use:
Sweep Gradient Brush for a 2D shape node. See Painting a 2D shape node with a sweep gradient.
SweepGradientMaterial for a 3D shape node. See Painting a 3D shape node with a sweep gradient.
For example, use a sweep gradient to create a circular processing indicator. See Creating a circular processing indicator.
Painting a 2D shape node with a sweep gradient¶
Use the SweepGradientMaterial to paint the fill or stroke of a 3D shape node with a sweep gradient.
To paint a 2D shape node with a sweep gradient:
In the Library, press Alt and right-click Materials and Textures, select Sweep Gradient Brush, and name the brush.
Create or select a 2D shape node where you want to show the sweep gradient.
For example, in the Node Tree, create an Ellipse 2D node.
In the Properties, add the Foreground Brush or Stroke Brush property and set it to the sweep gradient brush that you created.
For example, in the Properties, add and set:
Foreground Brush to < No Brush >
Ellipse Width and Ellipse Height to set the size of the ellipse
Stroke Brush to the Sweep Gradient Brush
Stroke Thickness to set the thickness of the donut where you show the sweep gradient
To adjust the appearance of the sweep gradient, either in the Sweep Gradient Brush or in the node that uses the Sweep Gradient Brush, add and set:
Gradient Stops to a comma-separated list of gradient color stops. See Gradient color stops.
For example, to create a gradient from transparent to green, set Gradient Stops to
transparent, green
(Optional) Gradient Center to set the center of the sweep gradient on the x and y axes.
(Optional) Sweep Gradient Sweep Angle to set the span of the sweep gradient in degrees.
(Optional) Sweep Gradient Start Angle to set the start angle of the sweep gradient in degrees.
(Optional) Sweep Gradient Rotation Angle to set the rotation of the sweep gradient in degrees.
Painting a 3D shape node with a sweep gradient¶
Use the SweepGradientMaterial to paint the fill or stroke of a 3D shape node with a sweep gradient.
To paint a 3D shape node with a sweep gradient:
In the Asset Packages, click + Add Asset Source and in the directory where you extracted the Kanzi Shapes package, select the
assets/Shapesdirectory.After you add the asset source, you see in the Asset Packages window the materials included in the Shapes asset package.
When you add an asset source to Kanzi Studio, you make that asset source available to all your Kanzi Studio projects.
In the Asset Packages, right-click the SweepGradientMaterial and select Import Asset Package.
Kanzi Studio adds the SweepGradientMaterial material to the Library > Materials and Textures > Materials.
Create or select a 3D shape node where you want to show the sweep gradient.
For example, in the Node Tree, create an Ellipse 3D node.
In the Properties, add the Fill Material or Stroke Material property, and set it to the SweepGradientMaterial material.
For example, in the Properties, add and set:
Fill Material to < Unassigned >
Stroke Material to the SweepGradientMaterial
Stroke Thickness to set the thickness of the donut where you show the sweep gradient
To adjust the appearance of the sweep gradient, either in the SweepGradientMaterial or in the node that uses the SweepGradientMaterial, add and set:
Gradient Stops to a comma-separated list of gradient color stops. See Gradient color stops.
For example, to create a gradient from transparent to green, set Gradient Stops to
transparent, green
Tip
If your gradient has transparency, set the Material > Blend Mode property to Alpha: Premultiplied.
(Optional) Gradient Center to set the center of the sweep gradient on the x and y axes.
(Optional) Sweep Gradient Sweep Angle to set the span of the sweep gradient in degrees.
(Optional) Sweep Gradient Start Angle to set the rotation of the sweep gradient in degrees.
(Optional) Sweep Gradient Rotation Angle to set the rotation of the sweep gradient in degrees.
