a PaintCode Power User: Shapes

PaintCode Power User: Shapes

This post is a part of series PaintCode Power User.

The basic abstraction in graphic editors are layers, in PaintCode we call them Shapes. They encapsulate visual attributes, allow easy manipulation, and are composed together to achieve complex graphical results. In this post I will focus on fundamental property of Shapes – their shape.

New Shape is created using toolbar buttons or Touch Bar.

Toolbar Buttons for ShapesToolbar Buttons for Shapes Touch Bar Buttons for ShapesTouch Bar Buttons for Shapes

Bounding Box

Every Shape has its bounding box, which defines primary area the Shape will cover. Some parts of the Shape may stay transparent and some drawing effects may exceed the bounding box.

Bounding Box of ShapeBounding Box of Shape

Bounding box is usually defined using X, Y, Width and Height attributes. However, in more complex cases, also Rotation, Offset and Scale affect the bounding box.

Shape Kinds

Rectangle

Examples of RectanglesExamples of Rectangles Inspector for Rounded CornersInspector for Rounded Corners

Oval

Examples of OvalsExamples of Ovals Inspector for SegmentInspector for Segment

Polygon

Examples of PolygonsExamples of Polygons

Star

Examples of StarsExamples of Stars Inspector for StarInspector for Star

Bezier

Examples of BeziersExamples of Beziers

Beziers will have a dedicated post about their properties and editing tips.

Transforms & Anchor

Transform is typically a name for three different operations: rotation, scale, offset. All 3 require a fixed point called anchor. In PaintCode, it’s the green cross with circle.

Shape with AnchorShape with Anchor

Initial position of anchor is in top-left corner of a Shape (or bottom-left for macOS target) and it’s hidden by default. To reveal it, expand Inspector section for Transform. Once you move it away from its initial position, it will be visible when the Shape is selected.

Inspector for TransformInspector for Transform

The easiest case of using anchor is with rotation. Anchor is the point around which the Shape rotates. You can move it to middle, you can move it out of the bounding box, and when you change Rotation, this anchor will stay at the same place.

Rotation ExamplesRotation Examples

Relative position of anchor to the Shape’s top-left corner is expressed in Offset X and Offset Y attributes. To stretch a Shape, you use Scale X and Scale Y attributes, which also work relative to anchor.

To rotate quickly the selected Shape, hold and drag one of the square controls used for resizing. In case the anchor is at its default place, it will be moved to middle.

Attributes Scale X and Scale Y also respect the anchor and they stretch the shape while preserving the anchor position. In fact, the familiar X and Y attributes of any shape are coordinates of its anchor. Attributes Offset X and Offset Y then specify the position of the shape relative to its anchor point. When dragging the green anchor indicator around, you may notice that all 4 attributes are changing simultaneously.

Outlines

And here’s one more trick for working with Shapes. If your drawing contains a lot of Shapes that cover each other and some are poorly visible, you may find useful to show only outlines and ignore their styling. This option is in menu CanvasShow Only Outlines.

See only Shape OutlinesSee only Shape Outlines

To learn more about Shapes, see our Shapes documentation and Transforms documentation or watch a tutorial video.