Class RectangleLayer

Example

const { LazyCanvas, RectangleLayer } = require('@hitomihiumi/lazy-canvas')

let rectangle = new RectangleLayer()
.setX(10)
.setY(10)
.setWidth(200)
.setHeight(100)
.setColor('#FF0000')

const lazy = new LazyCanvas()
.addLayers(rectangle)
//...

Hierarchy (view full)

BaseLayer
- RectangleLayer

Index

Constructors

constructor

new RectangleLayer(data?): RectangleLayer
Parameters
- Optionaldata: LazyCanvasLayer
Returns RectangleLayer
Overrides BaseLayer.constructor
- Defined in structures/RectangleLayer.ts:26

Properties

data

data: LazyCanvasLayer

Methods

setAlpha

setAlpha(alpha): RectangleLayer
Parameters
- alpha: number
  The alpha value of the layer
Returns RectangleLayer
Inherited from BaseLayer.setAlpha
- Defined in structures/BaseLayer.ts:171

setCentering

setCentering(centering): RectangleLayer
Parameters
- centering: "legacy" | "new"
  The centering of the layer
Returns RectangleLayer
- Defined in structures/RectangleLayer.ts:92

setColor

setColor(color): RectangleLayer
Parameters
- color: string | Gradient | Pattern
  The color of the figure
Returns RectangleLayer
- Defined in structures/RectangleLayer.ts:74

setFilled

setFilled(fill): RectangleLayer
Parameters
- fill: boolean
  Whether the figure should be filled or not
Returns RectangleLayer
- Defined in structures/RectangleLayer.ts:56

setGlobalCompositeOperation

setGlobalCompositeOperation(operation): RectangleLayer
Parameters
- operation:
      | "color"
      | "source-over"
      | "source-in"
      | "source-out"
      | "source-atop"
      | "destination-over"
      | "destination-in"
      | "destination-out"
      | "destination-atop"
      | "lighter"
      | "copy"
      | "xor"
      | "multiply"
      | "screen"
      | "overlay"
      | "darken"
      | "lighten"
      | "color-dodge"
      | "color-burn"
      | "hard-light"
      | "soft-light"
      | "difference"
      | "exclusion"
      | "hue"
      | "saturation"
      | "luminosity"
  The global composite operation of the layer
Returns RectangleLayer
Inherited from BaseLayer.setGlobalCompositeOperation
- Defined in structures/BaseLayer.ts:192

setHeight

setHeight(height): RectangleLayer
Parameters
- height: number
  The height of the figure
Returns RectangleLayer
- Defined in structures/RectangleLayer.ts:46

setOutline

setOutline(outline): RectangleLayer
Parameters
- outline: Outline
  The outline of the figure
Returns RectangleLayer
- Defined in structures/RectangleLayer.ts:84

setRotation

setRotation(angle): RectangleLayer
Parameters
- angle: number
  The angle of rotation the layer
Returns RectangleLayer
Inherited from BaseLayer.setRotation
- Defined in structures/BaseLayer.ts:182

setShadowBlur

setShadowBlur(blur): RectangleLayer
Parameters
- blur: number
  The degree of shadow blur
Returns RectangleLayer
Inherited from BaseLayer.setShadowBlur
- Defined in structures/BaseLayer.ts:141

setShadowColor

setShadowColor(color): RectangleLayer
Parameters
- color: string | Gradient | Pattern
  The shadow color for the layer
Returns RectangleLayer
Inherited from BaseLayer.setShadowColor
- Defined in structures/BaseLayer.ts:131

setShadowOffsetX

setShadowOffsetX(offsetX): RectangleLayer
Parameters
- offsetX: number
  The X-axis offset of the shadow relative to the layer
Returns RectangleLayer
Inherited from BaseLayer.setShadowOffsetX
- Defined in structures/BaseLayer.ts:151

setShadowOffsetY

setShadowOffsetY(offsetY): RectangleLayer
Parameters
- offsetY: number
  The Y-axis offset of the shadow relative to the layer
Returns RectangleLayer
Inherited from BaseLayer.setShadowOffsetY
- Defined in structures/BaseLayer.ts:161

setStroke

setStroke(stroke): RectangleLayer
Parameters
- stroke: number
  The stroke of the figure
Returns RectangleLayer
- Defined in structures/RectangleLayer.ts:64

setWidth

setWidth(width): RectangleLayer
Parameters
- width: number
  The width of the figure
Returns RectangleLayer
- Defined in structures/RectangleLayer.ts:36

setX

setX(x): RectangleLayer
Parameters
- x: number
  The x position of the layer
Returns RectangleLayer
Inherited from BaseLayer.setX
- Defined in structures/BaseLayer.ts:111

setY

setY(y): RectangleLayer
Parameters
- y: number
  The y position of the layer
Returns RectangleLayer
Inherited from BaseLayer.setY
- Defined in structures/BaseLayer.ts:121

toJSON

toJSON(): {
    align:
        | "left"
        | "center"
        | "right"
        | "start"
        | "end";
    alpha: number;
    angle: number;
    angles: number[];
    baseline:
        | "alphabetic"
        | "top"
        | "hanging"
        | "middle"
        | "ideographic"
        | "bottom";
    centering: "legacy" | "new";
    clockwise: boolean;
    color: string | Gradient | Pattern;
    controlPoint: {
        x: number;
        y: number;
    };
    controlPoints: {
        x: number;
        y: number;
    }[];
    direction: "ltr" | "rtl" | "inherit";
    fill: boolean;
    filter: Filter;
    font: string;
    globalComposite:
        | "color"
        | "source-over"
        | "source-in"
        | "source-out"
        | "source-atop"
        | "destination-over"
        | "destination-in"
        | "destination-out"
        | "destination-atop"
        | "lighter"
        | "copy"
        | "xor"
        | "multiply"
        | "screen"
        | "overlay"
        | "darken"
        | "lighten"
        | "color-dodge"
        | "color-burn"
        | "hard-light"
        | "soft-light"
        | "difference"
        | "exclusion"
        | "hue"
        | "saturation"
        | "luminosity";
    height: number;
    image: string | Uint8Array;
    lineDash: number[];
    multiline: boolean;
    outline: LazyCanvasOutline;
    points: {
        x: number;
        y: number;
    }[];
    radius: number;
    rotation: number;
    shadow: {
        shadowBlur: number;
        shadowColor: string | Gradient | Pattern;
        shadowOffsetX: number;
        shadowOffsetY: number;
    };
    sides: number;
    size: number;
    stroke: number;
    structureType: string;
    text: string;
    type: string;
    weight:
        | "normal"
        | "bold"
        | "italic"
        | "bold italic"
        | "regular"
        | "semi-bold"
        | "extra-bold"
        | "light"
        | "extra-light";
    width: number;
    x: number;
    y: number;
    toJSON(): LazyCanvasLayer;
}
Returns {
    align:
        | "left"
        | "center"
        | "right"
        | "start"
        | "end";
    alpha: number;
    angle: number;
    angles: number[];
    baseline:
        | "alphabetic"
        | "top"
        | "hanging"
        | "middle"
        | "ideographic"
        | "bottom";
    centering: "legacy" | "new";
    clockwise: boolean;
    color: string | Gradient | Pattern;
    controlPoint: {
        x: number;
        y: number;
    };
    controlPoints: {
        x: number;
        y: number;
    }[];
    direction: "ltr" | "rtl" | "inherit";
    fill: boolean;
    filter: Filter;
    font: string;
    globalComposite:
        | "color"
        | "source-over"
        | "source-in"
        | "source-out"
        | "source-atop"
        | "destination-over"
        | "destination-in"
        | "destination-out"
        | "destination-atop"
        | "lighter"
        | "copy"
        | "xor"
        | "multiply"
        | "screen"
        | "overlay"
        | "darken"
        | "lighten"
        | "color-dodge"
        | "color-burn"
        | "hard-light"
        | "soft-light"
        | "difference"
        | "exclusion"
        | "hue"
        | "saturation"
        | "luminosity";
    height: number;
    image: string | Uint8Array;
    lineDash: number[];
    multiline: boolean;
    outline: LazyCanvasOutline;
    points: {
        x: number;
        y: number;
    }[];
    radius: number;
    rotation: number;
    shadow: {
        shadowBlur: number;
        shadowColor: string | Gradient | Pattern;
        shadowOffsetX: number;
        shadowOffsetY: number;
    };
    sides: number;
    size: number;
    stroke: number;
    structureType: string;
    text: string;
    type: string;
    weight:
        | "normal"
        | "bold"
        | "italic"
        | "bold italic"
        | "regular"
        | "semi-bold"
        | "extra-bold"
        | "light"
        | "extra-light";
    width: number;
    x: number;
    y: number;
    toJSON(): LazyCanvasLayer;
}
- align:
      | "left"
      | "center"
      | "right"
      | "start"
      | "end"
- alpha: number
- angle: number
- angles: number[]
- baseline:
      | "alphabetic"
      | "top"
      | "hanging"
      | "middle"
      | "ideographic"
      | "bottom"
- centering: "legacy" | "new"
- clockwise: boolean
- color: string | Gradient | Pattern
- controlPoint: {
  x: number;
  y: number;
  }
  - x: number
  - y: number
- controlPoints: {
  x: number;
  y: number;
  }[]
- direction: "ltr" | "rtl" | "inherit"
- fill: boolean
- filter: Filter
- font: string
- globalComposite:
      | "color"
      | "source-over"
      | "source-in"
      | "source-out"
      | "source-atop"
      | "destination-over"
      | "destination-in"
      | "destination-out"
      | "destination-atop"
      | "lighter"
      | "copy"
      | "xor"
      | "multiply"
      | "screen"
      | "overlay"
      | "darken"
      | "lighten"
      | "color-dodge"
      | "color-burn"
      | "hard-light"
      | "soft-light"
      | "difference"
      | "exclusion"
      | "hue"
      | "saturation"
      | "luminosity"
- height: number
- image: string | Uint8Array
- lineDash: number[]
- multiline: boolean
- outline: LazyCanvasOutline
- points: {
  x: number;
  y: number;
  }[]
- radius: number
- rotation: number
- shadow: {
      shadowBlur: number;
      shadowColor: string | Gradient | Pattern;
      shadowOffsetX: number;
      shadowOffsetY: number;
  }
  - shadowBlur: number
  - shadowColor: string | Gradient | Pattern
  - shadowOffsetX: number
  - shadowOffsetY: number
- sides: number
- size: number
- stroke: number
- structureType: string
- text: string
- type: string
- weight:
      | "normal"
      | "bold"
      | "italic"
      | "bold italic"
      | "regular"
      | "semi-bold"
      | "extra-bold"
      | "light"
      | "extra-light"
- width: number
- x: number
- y: number
- toJSON:function
  - toJSON(): LazyCanvasLayer
  - Returns LazyCanvasLayer
    - Defined in types/LazyCanvasLayer.d.ts:17
Inherited from BaseLayer.toJSON
- Defined in structures/BaseLayer.ts:198

Class RectangleLayer

Example

Hierarchy (view full)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns RectangleLayer

Properties

data

Methods

setAlpha

Parameters

Returns RectangleLayer

setCentering

Parameters

Returns RectangleLayer

setColor

Parameters

Returns RectangleLayer

setFilled

Parameters

Returns RectangleLayer

setGlobalCompositeOperation

Parameters

Returns RectangleLayer

setHeight

Parameters

Returns RectangleLayer

setOutline

Parameters

Returns RectangleLayer

setRotation

Parameters

Returns RectangleLayer

setShadowBlur

Parameters

Returns RectangleLayer

setShadowColor

Parameters

Returns RectangleLayer

setShadowOffsetX

Parameters

Returns RectangleLayer

setShadowOffsetY

Parameters

Returns RectangleLayer

setStroke

Parameters

Returns RectangleLayer

setWidth

Parameters

Returns RectangleLayer

setX

Parameters

Returns RectangleLayer

setY

Parameters

Returns RectangleLayer

toJSON

align: | "left" | "center" | "right" | "start" | "end"

alpha: number

angle: number

angles: number[]

baseline: | "alphabetic" | "top" | "hanging" | "middle" | "ideographic" | "bottom"

centering: "legacy" | "new"

clockwise: boolean

color: string | Gradient | Pattern

controlPoint: { x: number; y: number; }

x: number

y: number

controlPoints: { x: number; y: number; }[]

direction: "ltr" | "rtl" | "inherit"

fill: boolean

filter: Filter

font: string

height: number

align:
| "left"
| "center"
| "right"
| "start"
| "end"

baseline:
| "alphabetic"
| "top"
| "hanging"
| "middle"
| "ideographic"
| "bottom"

controlPoint: {
x: number;
y: number;
}

controlPoints: {
x: number;
y: number;
}[]

points: {
x: number;
y: number;
}[]

shadow: {
shadowBlur: number;
shadowColor: string | Gradient | Pattern;
shadowOffsetX: number;
shadowOffsetY: number;
}

weight:
| "normal"
| "bold"
| "italic"
| "bold italic"
| "regular"
| "semi-bold"
| "extra-bold"
| "light"
| "extra-light"