Class BezierLayer

Example

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

let bezier = new BezierLayer()
.setColor('#fff')
.setStroke(5)
.setPoints({ x: 10, y: 10 }, { x: 300, y: 200 })
.setControlPoints({ x: 200, y: 100 }, { x: 100, y: 300 })

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

Hierarchy (view full)

BaseLayer
- BezierLayer

Index

Constructors

constructor

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

Properties

data

data: LazyCanvasLayer

Methods

setAlpha

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

setColor

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

setControlPoints

setControlPoints(...controlPoints): BezierLayer
Parameters
- Rest...controlPoints: {
  x: number;
  y: number;
  }[]
  The control points of the Bézier curve
Returns BezierLayer
- Defined in structures/BezierLayer.ts:53

setGlobalCompositeOperation

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

setPoints

setPoints(...points): BezierLayer
Parameters
- Rest...points: {
  x: number;
  y: number;
  }[]
  The points of the Bézier curve
Returns BezierLayer
- Defined in structures/BezierLayer.ts:36

setRotation

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

setShadowBlur

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

setShadowColor

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

setShadowOffsetX

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

setShadowOffsetY

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

setStroke

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

setX

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

setY

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

Example

Hierarchy (view full)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns BezierLayer

Properties

data

Methods

setAlpha

Parameters

Returns BezierLayer

setColor

Parameters

Returns BezierLayer

setControlPoints

Parameters

Returns BezierLayer

setGlobalCompositeOperation

Parameters

Returns BezierLayer

setPoints

Parameters

Returns BezierLayer

setRotation

Parameters

Returns BezierLayer

setShadowBlur

Parameters

Returns BezierLayer

setShadowColor

Parameters

Returns BezierLayer

setShadowOffsetX

Parameters

Returns BezierLayer

setShadowOffsetY

Parameters

Returns BezierLayer

setStroke

Parameters

Returns BezierLayer

setX

Parameters

Returns BezierLayer

setY

Parameters

Returns BezierLayer

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

outline: LazyCanvasOutline

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

radius: number

rotation: number

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

shadowBlur: 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"