TLShapeCrop • tldraw Docs

Table of contents

bottomRight
isCircle
topLeft
Properties

Defines cropping parameters for shapes that support cropping.

Specifies the visible area of an asset (like an image or video) within a shape. The crop is defined by top-left and bottom-right coordinates in normalized space (0-1), where (0,0) is the top-left of the original asset and (1,1) is the bottom-right.

interface TLShapeCrop {}

Example

// Crop the center 50% of an image
const centerCrop: TLShapeCrop = {
  topLeft: { x: 0.25, y: 0.25 },
  bottomRight: { x: 0.75, y: 0.75 },
}

// Crop for a circular image shape
const circleCrop: TLShapeCrop = {
  topLeft: { x: 0, y: 0 },
  bottomRight: { x: 1, y: 1 },
  isCircle: true,
}

Properties

bottomRight

bottomRight: VecModel

isCircle

optional

isCircle?: boolean

topLeft

topLeft: VecModel