Scenic
v0.11.2

View Source Styles Overview

Styles are optional modifiers that you can put on any primitive. Each style does a specific thing and some only affect certain primitives.

There is a fixed list of primitive styles which are understood by the drivers. Some Components may introduce their own optional styles, but the only ones sent down to the drivers for rendering are contained in the list below.

In general, the primitive styles are each defined in their own module, but you apply them as options in a primitive's option list.

For example, to use the style defined in the module Scenic.Primitive.Style.Font you would define an option on a text primitive like this:

graph =
  Graph.build
  |> text( "Styled Text", font: :roboto_mono )
  |> text( "Custom Text", font: "fonts/my_font.ttf" )

primitive-styles

 Primitive Styles

  • Cap sets how to draw the end of a line.
  • Fill fills in a primitive with a paint style.
  • Font sets the font to use to draw text.
  • FontSize sets the point size text.
  • Hidden a flag that sets if a primitive is drawn at all.
  • Input send cursor related input to your scene when the cursor is over the primitve.
  • Join sets how to render the intersection of two lines. Works on the intersections of other primitives as well.
  • LineHeight adjust the vertical distance between lines of text. Works similar to line height in css.
  • MiterLimit sets whether or not to miter a joint if the intersection of two lines is very sharp.
  • Scissor defines a rectangle that drawing will be clipped to.
  • Stroke defines how to draw the edge of a primitive. Specifies both a width and a paint style.
  • TextAlign sets the horizontal alignment of text relative to the starting point. Examples: :left, :center, or :right
  • TextBase sets the vertical alignment of text relative to the starting point. Examples: :top, :middle, :alphabetic, or :bottom
  • Theme a collection of default colors. Usually passed to components, telling them how to draw in your preferred color scheme.

primitive-paint-styles

 Primitive Paint Styles

The Fill and Stroke styles accept a paint type. This describes what to fill or stroke the primitive with.

There is a fixed set of paint types that the drivers know how to render.

  • Color fills a primitive with a solid color.
  • Image fills a primitive with an image that is loaded into Scenic.Cache.
  • LinearGradient fills a primitive with a linear gradient.
  • RadialGradient fills a primitive with a radial gradient.
  • Stream fills a primitive with a streaming image.

specifying-paint

 Specifying Paint

When you use either the Fill and Stroke you specify the paint in a tuple like this.

graph =
  Graph.build
  |> circle( 100, fill: {:color, :green}, stroke: {2, {:color, :blue}} )

Each paint type has specific values it expects in order to draw. See the documentation for that paint type for details.

color-paint

 Color Paint

Specifying a solid color to paint is very common, so has a shortcut. If you simply set a valid color as the paint type, it is assumed that you mean Color.

graph =
  Graph.build
  |> circle( 100, fill: :green, stroke: {2, :blue} )  # simple color
  |> rect( {100, 200}, fill: {:green, 128} )          # color with alpha
  |> rect( {100, 100}, fill: {10, 20, 30, 40} )       # red, green, blue, alpha

If you are exploring Scenic, then you should read the Transforms Overview next.