Class ArcLayer

Example

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

let arc = new ArcLayer()
.setX(400)
.setY(300)
.setRadius(100)
.setColor('#fff')
.setStroke(5)
.setFilled(false)
.setAngles(0, Math.PI / 2)

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

Hierarchy (view full)

BaseLayer
- ArcLayer

Index

Constructors

constructor

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

Properties

data

data: LazyCanvasLayer

Methods

setAlpha

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

setAngles

setAngles(angles): ArcLayer
Parameters
- angles: number[]
  The angles of the arc
Returns ArcLayer
- Defined in structures/ArcLayer.ts:77

setClockwise

setClockwise(clockwise): ArcLayer
Parameters
- clockwise: boolean
  Whether the arc should be drawn clockwise or not
Returns ArcLayer
- Defined in structures/ArcLayer.ts:92

setColor

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

setFilled

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

setGlobalCompositeOperation

setGlobalCompositeOperation(operation): ArcLayer
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 ArcLayer
Inherited from BaseLayer.setGlobalCompositeOperation
- Defined in structures/BaseLayer.ts:192

setRadius

setRadius(radius): ArcLayer
Parameters
- radius: number
  The radius of the arc
Returns ArcLayer
- Defined in structures/ArcLayer.ts:67

setRotation

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

setShadowBlur

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

setShadowColor

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

setShadowOffsetX

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

setShadowOffsetY

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

setStroke

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

setX

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

setY

setY(y): ArcLayer
Parameters
- y: number
  The y position of the layer
Returns ArcLayer
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 ArcLayer

Example

Hierarchy (view full)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns ArcLayer

Properties

data

Methods

setAlpha

Parameters

Returns ArcLayer

setAngles

Parameters

Returns ArcLayer

setClockwise

Parameters

Returns ArcLayer

setColor

Parameters

Returns ArcLayer

setFilled

Parameters

Returns ArcLayer

setGlobalCompositeOperation

Parameters

Returns ArcLayer

setRadius

Parameters

Returns ArcLayer

setRotation

Parameters

Returns ArcLayer

setShadowBlur

Parameters

Returns ArcLayer

setShadowColor

Parameters

Returns ArcLayer

setShadowOffsetX

Parameters

Returns ArcLayer

setShadowOffsetY

Parameters

Returns ArcLayer

setStroke

Parameters

Returns ArcLayer

setX

Parameters

Returns ArcLayer

setY

Parameters

Returns ArcLayer

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

image: string | Uint8Array

lineDash: number[]

multiline: boolean

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"