Class CanvasRegion

constructor

• new CanvasRegion(source, regionCompute): CanvasRegion

• Creates, using coordinate in canvas coordinates

  Parameters

  • source: CanvasSource
  • regionCompute: ((parent: CanvasSource) => RectPositioned)
    • • (parent): RectPositioned

      • Parameters

        • parent: CanvasSource

        Returns RectPositioned

  Returns CanvasRegion

source

center

• get center(): Point

• Returns Point

context

• get context(): CanvasRenderingContext2D

• Returns CanvasRenderingContext2D

dimensionMin

• get dimensionMin(): number

• Returns number

height

• get height(): number

• Returns number

region

• get region(): RectPositioned

• Returns RectPositioned

• set region(value): void

• Parameters

  • value: RectPositioned

  Returns void

width

• get width(): number

• Returns number

x

• get x(): number

• Returns number

y

• get y(): number

• Returns number

absToRegionPoint

• absToRegionPoint(pt, source, clamped): {
      x: number;
      y: number;
  }

• Parameters

  • pt: Point
  • source: "screen"
  • clamped: boolean

  Returns {
      x: number;
      y: number;
  }

  • x: number

  • y: number

applyRegionOffset

• applyRegionOffset(p): {
      x: number;
      y: number;
  }

• Returns a copy of p offset by the region's x & y

  Parameters

  • p: Point

  Returns {
      x: number;
      y: number;
  }

  • x: number

  • y: number

clear

• clear(): void

• Returns void

drawBounds

• drawBounds(strokeStyle, lineWidth?): void

• Parameters

  • strokeStyle: string
  • lineWidth: number = 1

  Returns void

drawCircles

• drawCircles(relativeCircles, fillStyle, strokeStyle?, lineWidth?): void

• Parameters

  • relativeCircles: CirclePositioned[]
  • fillStyle: string
  • strokeStyle: string = ...
  • lineWidth: number = 1

  Returns void

drawConnectedPoints

• drawConnectedPoints(points, strokeStyle, lineWidth?): void

• Draws connected points in absolute coordinates, however with 0,0 being the top-left of the region.

  Thus, this will apply the region offset before drawing.

  Parameters

  • points: Point[]

    Points to draw
  • strokeStyle: string

    Stroke style
  • lineWidth: number = 1

    Line width

  Returns void

drawConnectedPointsRelative

• drawConnectedPointsRelative(relativePoints, strokeStyle, lineWidth?): void

• Draws a line from a series of points. Assumes region-relative, % coordinates (ie 0..1 scale)

  Parameters

  • relativePoints: Point[]

    Points to connect, in region-relative coordinates
  • strokeStyle: string

    Stroke style
  • lineWidth: number = 1

    Line with

  Returns void

fill

• fill(fillStyle?): void

• Parameters

  • fillStyle: string = ...

  Returns void

fillText

• fillText(text, point, fillStyle?, font, baseline?, align?): void

• Fills text at a region-relative position

  Parameters

  • text: string
  • point: Point

    Region relative, meaning 0,0 is top-left of region
  • fillStyle: string = ...
  • font: string
  • baseline: CanvasTextBaseline = ...
  • align: CanvasTextAlign = ...

  Returns void

fillTextRelative

• fillTextRelative(text, relPos, fillStyle?, font, baseline?, align?): void

• Fills text at a relative position

  Parameters

  • text: string
  • relPos: Point

    Relative, meaning 0.5,0.5 is the middle of the region
  • fillStyle: string = ...
  • font: string
  • baseline: CanvasTextBaseline = ...
  • align: CanvasTextAlign = ...

  Returns void

recomputeRegion

• recomputeRegion(): void

• Calls the original regionCompute function passed in to the constructor to recompute the absolute region

  Returns void

toAbsRegion

• toAbsRegion(regionRel, scaleBy?): {
      x: number;
      y: number;
  }

• Converts a region-relative point (0..1) to an absolute point, which uses region-relative coordinates.

  Eg if the region had an x,y of 100,100, toAbsRegion({x:0,y:0}) will return 0,0.

  Parameters

  • regionRel: Point
  • scaleBy: "both" = ...

  Returns {
      x: number;
      y: number;
  }

  • x: number

  • y: number

toRelPoint

• toRelPoint(pt, source?, kind?, clamped?): {
      x: number;
      y: number;
  }

• Converts a point to a region-relative one.

  Parameters

  • pt: Point
  • source: "source" | "screen" = ...
  • kind: "independent" = ...
  • clamped: boolean = true

  Returns {
      x: number;
      y: number;
  }

  • x: number

  • y: number