Hiyve Components - v1.0.0
    Preparing search index...

    Interface SerializedWhiteboardObject

    Serialized object data for transmission

    interface SerializedWhiteboardObject {
        angle: TDegree;
        backgroundColor: string;
        clipPath?: Partial<SerializedObjectProps & ClipPathProps>;
        customProps?: WhiteboardObjectCustomProps;
        fill:
            | string
            | Partial<Gradient<"linear", "linear">> & {
                colorStops: { color: string; offset: number; opacity?: number }[];
                coords: LinearGradientCoords<number>;
                gradientTransform: number[] | undefined;
                gradientUnits: GradientUnits;
                offsetX: number;
                offsetY: number;
                type: "linear";
            }
            | Partial<Gradient<"radial", "radial">> & {
                colorStops: { color: string; offset: number; opacity?: number }[];
                coords: RadialGradientCoords<number>;
                gradientTransform: number[] | undefined;
                gradientUnits: GradientUnits;
                offsetX: number;
                offsetY: number;
                type: "radial";
            }
            | Record<string, any>
            | null;
        fillRule: CanvasFillRule;
        flipX: boolean;
        flipY: boolean;
        globalCompositeOperation: GlobalCompositeOperation;
        height: number;
        id?: string;
        left: number;
        opacity: number;
        originX: TOriginX;
        originY: TOriginY;
        paintFirst: "fill" | "stroke";
        scaleX: number;
        scaleY: number;
        shadow: Partial<SerializedShadowOptions> | null;
        skewX: TDegree;
        skewY: TDegree;
        stroke:
            | string
            | Partial<Gradient<"linear", "linear">> & {
                colorStops: { color: string; offset: number; opacity?: number }[];
                coords: LinearGradientCoords<number>;
                gradientTransform: number[] | undefined;
                gradientUnits: GradientUnits;
                offsetX: number;
                offsetY: number;
                type: "linear";
            }
            | Partial<Gradient<"radial", "radial">> & {
                colorStops: { color: string; offset: number; opacity?: number }[];
                coords: RadialGradientCoords<number>;
                gradientTransform: number[] | undefined;
                gradientUnits: GradientUnits;
                offsetX: number;
                offsetY: number;
                type: "radial";
            }
            | Record<string, any>
            | null;
        strokeDashArray: number[] | null;
        strokeDashOffset: number;
        strokeLineCap: CanvasLineCap;
        strokeLineJoin: CanvasLineJoin;
        strokeMiterLimit: number;
        strokeUniform: boolean;
        strokeWidth: number;
        top: number;
        visible: boolean;
        width: number;
    }

    Hierarchy

    • SerializedObjectProps
      • SerializedWhiteboardObject
    Index

    Properties

    angle backgroundColor clipPath? customProps? fill fillRule flipX flipY globalCompositeOperation height id? left opacity originX originY paintFirst scaleX scaleY shadow skewX skewY stroke strokeDashArray strokeDashOffset strokeLineCap strokeLineJoin strokeMiterLimit strokeUniform strokeWidth top visible width

    Properties

    angle: TDegree

    Angle of rotation of an object (in degrees)

    0
    backgroundColor: string

    Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/
    clipPath?: Partial<SerializedObjectProps & ClipPathProps>

    a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas. If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center'

    customProps?: WhiteboardObjectCustomProps
    fill:
        | string
        | Partial<Gradient<"linear", "linear">> & {
            colorStops: { color: string; offset: number; opacity?: number }[];
            coords: LinearGradientCoords<number>;
            gradientTransform: number[] | undefined;
            gradientUnits: GradientUnits;
            offsetX: number;
            offsetY: number;
            type: "linear";
        }
        | Partial<Gradient<"radial", "radial">> & {
            colorStops: { color: string; offset: number; opacity?: number }[];
            coords: RadialGradientCoords<number>;
            gradientTransform: number[] | undefined;
            gradientUnits: GradientUnits;
            offsetX: number;
            offsetY: number;
            type: "radial";
        }
        | Record<string, any>
        | null

    Color of object's fill takes css colors https://www.w3.org/TR/css-color-3/

    rgb(0,0,0)
    fillRule: CanvasFillRule

    Fill rule used to fill an object accepted values are nonzero, evenodd Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use globalCompositeOperation instead)

    nonzero
    flipX: boolean

    When true, an object is rendered as flipped horizontally

    false
    flipY: boolean

    When true, an object is rendered as flipped vertically

    false
    globalCompositeOperation: GlobalCompositeOperation

    Composite rule used for canvas globalCompositeOperation
    height: number

    Object height
    id?: string
    left: number

    Left position of an object. Note that by default it's relative to object left. You can change this by setting FabricObject#originX

    0
    opacity: number

    Opacity of an object

    1
    originX: TOriginX

    Horizontal origin of transformation of an object (left, center, right or [0, 1]) See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups

    please set your default to 'center' in new projects and don't use it to build logic The reason is explained here: https://github.com/fabricjs/fabric.js/discussions/9736 To set the default value to 'center' import BaseFabricObject and set the static BaseFabricObject.ownDefaults.originX = 'center'

    'left'
    originY: TOriginY

    Vertical origin of transformation of an object (top, center, bottom or [0, 1]) See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups

    please set your default to 'center' in new projects and don't use it to build logic The reason is explained here: https://github.com/fabricjs/fabric.js/discussions/9736 To set the default value to 'center' import BaseFabricObject and set the static BaseFabricObject.ownDefaults.originY = 'center'

    'top'
    paintFirst: "fill" | "stroke"

    Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
    scaleX: number

    Object scale factor (horizontal)

    1
    scaleY: number

    Object scale factor (vertical)

    1
    shadow: Partial<SerializedShadowOptions> | null

    Shadow object representing shadow of this shape

    null
    skewX: TDegree

    Angle of skew on x axes of an object (in degrees)

    0
    skewY: TDegree

    Angle of skew on y axes of an object (in degrees)

    0
    stroke:
        | string
        | Partial<Gradient<"linear", "linear">> & {
            colorStops: { color: string; offset: number; opacity?: number }[];
            coords: LinearGradientCoords<number>;
            gradientTransform: number[] | undefined;
            gradientUnits: GradientUnits;
            offsetX: number;
            offsetY: number;
            type: "linear";
        }
        | Partial<Gradient<"radial", "radial">> & {
            colorStops: { color: string; offset: number; opacity?: number }[];
            coords: RadialGradientCoords<number>;
            gradientTransform: number[] | undefined;
            gradientUnits: GradientUnits;
            offsetX: number;
            offsetY: number;
            type: "radial";
        }
        | Record<string, any>
        | null

    When defined, an object is rendered via stroke and this property specifies its color takes css colors https://www.w3.org/TR/css-color-3/

    null
    strokeDashArray: number[] | null

    Array specifying dash pattern of an object's stroke (stroke must be defined)

    null;
    strokeDashOffset: number

    Line offset of an object's stroke

    0
    strokeLineCap: CanvasLineCap

    Line endings style of an object's stroke (one of "butt", "round", "square")

    butt
    strokeLineJoin: CanvasLineJoin

    Corner style of an object's stroke (one of "bevel", "round", "miter")
    strokeMiterLimit: number

    Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke

    4
    strokeUniform: boolean

    When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width. this Property does not work on Text classes or drawing call that uses strokeText,fillText methods default to false

    2.6.0

    false

    false
    strokeWidth: number

    Width of a stroke used to render this object

    1
    top: number

    Top position of an object. Note that by default it's relative to object top. You can change this by setting FabricObject#originY

    0
    visible: boolean

    When set to false, an object is not rendered on canvas
    width: number

    Object width

    Settings

    Member Visibility

    On This Page

    Properties