Skip to content
coding.jackalope edited this page Jun 29, 2019 · 1 revision
Table of Contents

Overview

Slab offers functions to draw basic shapes to a window. These shapes can complement the controls and provides some flexibility in the look the UI. For example usage of these shapes, refer to the Shapes section of the SlabTest window.

The rectangle shape is defined by its width and height. This shape can complement the button control by making the button invisible. The rounding for each corner can be defined as well.

Circles are drawn by defining a radius. Along with the color the number of segments can be set as well.

Triangles are drawn by defining a radius, which is the length from the center of the triangle to the 3 points. A rotation in degrees can be specified to rotate the triangle.

Lines are defined by two points. The function only takes in a single point which defines the end point while the start point is defined by the current cursor position. Both the line width and color can be defined.

Bezier curves can be defined through a set of points and added to a Slab window. The points given must be in local space. Slab will translate the curve to the current cursor position. Along with the ability to draw the curve, Slab offers functions to query information about the curve, such as the number of control points defined, the position of a control point, and the ability to evaluate the position of a curve given a Time value. There is also a function to evaluate the curve with the current X mouse position.

Polygons can be drawn by passing in a list of points into the Polygon function. The points, like the curve, should be defined in local space. Slab will then translate the points to the current cursor position.

API

Below is the list of functions for drawing shapes.

Rectangle

Draws a rectangle at the current cursor position for the active window.

Parameter Type Description
Options Table\List of options that control how this rectangle is displayed.
Option Type Description
Mode String Whether this rectangle should be filled or outlined. The default value is 'fill'.
W Number The width of the rectangle.
H Number The height of the rectangle.
Color Table The color to use for this rectangle.
Rounding Number or Table This value can either be a number or table.
[Number] Amount of rounding to apply to all corners.
[Table] Define the rounding for each corner. The order goes top left, top right, bottom right, and bottom left.
Outline Boolean If the Mode option is 'fill', this option will allow an outline to be drawn.
OutlineColor Table The color to use for the outline if requested.
Segments Number Number of points to add for each corner if rounding is requested.

Circle

Draws a circle at the current cursor position plus the radius for the active window.

Parameter Type Description
Options Table List of options that control how this circle is displayed.
Option Type Description
Mode String Whether this circle should be filled or outlined. The default value is 'fill'.
Radius Number The size of the circle.
Color Table The color to use for the circle.
Segments Number The number of segments used for drawing the circle.

Triangle

Draws a triangle at the current cursor position plus the radius for the active window.

Parameter Type Description
Options Table List of options that control how this triangle is displayed.
Option Type Description
Mode String Whether this triangle should be filled or outlined. The default value is 'fill'.
Radius Number The distance from the center of the triangle.
Rotation Number The rotation of the triangle in degrees.
Color Table The color to use for the triangle.

Line

Draws a line starting at the current cursor position and going to the defined points in this function.

Parameter Type Description
X2 [Number The X coordinate for the destination.
Y2 [Number The Y coordinate for the destination.
Option [Table List of options that control how this line is displayed.
Option Type Description
Width Number How thick the line should be.
Color Table The color to use for the line.

Curve

Draws a bezier curve with the given points as control points. The points should be defined in local space. Slab will translate the curve to the current cursor position. There should two or more points defined for a proper curve.

Parameter Type Description
Points Table List of points to define the control points of the curve.
Options Table List of options that control how this curve is displayed.
Option Type Description
Color Table The color to use for this curve.
Depth Number The number of recursive subdivision steps to use when rendering the curve. If nil, the default LÖVE 2D value is used which is 5.

GetCurveControlPointCount

Returns the number of control points defined with the last call to Curve.

Return Description
Number The number of control points defined for the previous curve.

GetCurveControlPoint

Returns the point for the given control point index. This point by default will be in local space defined by the points given in the Curve function. The translated position can be requested by setting the LocalSpace option to false.

Return Description
Number, Number The translated X, Y coordinates of the given control point.

EvaluateCurve

Returns the point at the given time. The time value should be between 0 and 1 inclusive. The point returned will be in local space. For the translated position, set the LocalSpace option to false.

Parameter Type Description
Time Number The time on the curve between 0 and 1.
Options Table A list of options that control what is returned by this function.
Option Type Description
LocalSpace Boolean Returnes either the translated or untranslated control point. This is true by default.
Return Description
Number, Number The X and Y coordinates at the given time on the curve.

EvaluateCurveMouse

Returns the point on the curve at the given X-coordinate of the mouse relative to the end points of the curve.

Parameter Type Description
Options Table A list of options that control what is returned by this function. See the list of options under the EvaluateCurve function.
Return Description
Number, Number The X and Y coordinates at the given X mouse position on the curve.

Polygon

Renders a polygon with the given points. The points should be defined in local space. Slab will translate the position to the current cursor position.

Parameter Type Description
Points Table List of points that define this polygon.
Options Table List of options that control how this polygon is drawn.
Option Type Description
Color Table The color to render this polygon.
Mode String Whether to use 'fill' or 'line' to draw this polygon. The default is 'fill'.
Clone this wiki locally