TLHighlightShapeProps

Properties for a highlight shape. Highlight shapes represent highlighting strokes made with a highlighting tool, typically used to emphasize or mark up content.

interface TLHighlightShapeProps {}

Example

const highlightProps: TLHighlightShapeProps = {
  color: "yellow",
  size: "m",
  segments: [{ type: "straight", points: [{ x: 0, y: 0, z: 0.5 }] }],
  isComplete: true,
  isPen: false,
  scale: 1,
};

Properties

The color style of the highlight stroke

color: TLDefaultColorStyle;

Whether the highlight stroke has been completed by the user

isComplete: boolean;

Whether the highlight was drawn with a pen/stylus (affects rendering style)

isPen: boolean;

Scale factor applied to the highlight shape for display

scale: number;

Horizontal scale factor for lazy resize

scaleX: number;

Vertical scale factor for lazy resize

scaleY: number;

Array of segments that make up the highlight stroke path

segments: TLDrawShapeSegment[];

The size style determining the thickness of the highlight stroke

size: TLDefaultSizeStyle;