All shapes have three properties that affect how they look: Fill Paint, Stroke Paint, and Stroke Style. The Fill Paint property represents the interior color of the shape. The Stroke Paint property represents the color of the shape's outline. The Stroke Style property affects the thickness, corners and dash properties of the shape's outline.

Video recorded using: Ignition 8.1


(open in window)

[00:00] All components created with the drawing tools will have fill and stroke properties we can configure. To demonstrate this, I have already created a rectangle component on my window, and it is currently selected by my selection tool, which will give us access to the fill and stroke properties. These properties are available in our vision property editor on the left hand side of the designer. Let's begin working with the fill paint property by clicking on the pencil icon. A pop-up menu appears allowing us to choose our background color for the rectangle. We can use the wheel to set our background color to a dark green by dragging the marker on the outer circle and setting it to our desired color, and we can confirm the shade by clicking within the triangle. Additionally, we have access to change the background color with the palette tab or by specifying R G B and H S L values. Let's close the popup and take a look at the stroke style property, which can be used to alter the border of the rectangle. First, we will click on the pencil icon and increase its width to 40 pixels. Next, let's change our solid border to a dash pattern.

[01:07] The cap style will change the appearance of each dash. The join style changes the appearance of a dash wrapping around the corner. And finally, the miter limit lets us control the sharp angle join. Let's click off the popup and review the stroke paint property. Again, we'll click on the pencil icon. The stroke paint property will update the color of our rectangles border and it's configured in the same way as the fill paint property. Let's go back to our wheel and choose a blue coloring for our border. Now we know how to access and use stroke and fill properties available for our components made with the drawing tools.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.