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:

../../_images/sweep-gradient.png

For example, use a sweep gradient to create a circular processing indicator. See Creating a circular processing indicator.

../../_images/processing-icon.gif

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:

  1. In the Library, press Alt and right-click Materials and Textures, select Sweep Gradient Brush, and name the brush.

    ../../_images/create-sweep-gradient-brush.png
  2. 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.

    ../../_images/ellipse-2d-in-node-tree.png
  3. 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

    ../../_images/ellipse-2d-with-sweep-gradient-brush.png
  4. 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.

    ../../_images/properties-sweet-gradient-brush.png ../../_images/preview-sweep-gradient-brush.png

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:

  1. In the Asset Packages, click + Add Asset Source and in the directory where you extracted the Kanzi Shapes package, select the assets/Shapes directory.

    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.

    ../../_images/add-asset-source.png ../../_images/asset-package-gradient-materials.png
  2. 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.

    ../../_images/import-sweep-gradient-material.png ../../_images/sweep-gradient-material-in-library.png
  3. 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.

    ../../_images/ellipse-3d-in-node-tree.png
  4. 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

    ../../_images/ellipse-3d-with-sweep-gradient-material.png ../../_images/sweep-gradient-material-default-preview.png
  5. 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.

    ../../_images/sweep-gradient-material-stops.png ../../_images/sweep-gradient-material-stops-preview.png
    • (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.

    ../../_images/sweep-gradient-material-properties.png ../../_images/sweep-gradient-material-properties-preview.png

See also

Gradients

Using linear gradient

Using radial gradient

Filling a shape

Using stroke