Class Path<Props>

Type Parameters

Hierarchy (view full)

Constructors

Properties

Methods

Constructors

Properties

_$eventProcessor: EventProcessor<{
    click: ((e) => boolean | void);
    contextmenu: ((e) => boolean | void);
    dblclick: ((e) => boolean | void);
    drag: ((e) => boolean | void);
    dragend: ((e) => boolean | void);
    dragenter: ((e) => boolean | void);
    dragleave: ((e) => boolean | void);
    dragover: ((e) => boolean | void);
    dragstart: ((e) => boolean | void);
    drop: ((e) => boolean | void);
    globalout: ((e) => boolean | void);
    mousedown: ((e) => boolean | void);
    mousemove: ((e) => boolean | void);
    mouseout: ((e) => boolean | void);
    mouseover: ((e) => boolean | void);
    mouseup: ((e) => boolean | void);
    mousewheel: ((e) => boolean | void);
} & {}>
__canvasFillGradient: CanvasGradient
__canvasFillPattern: CanvasPattern
__canvasStrokeGradient: CanvasGradient
__canvasStrokePattern: CanvasPattern
__clipPaths?: Path<PathProps>[]
__dirty: number

Dirty bits. From which painter will determine if this displayable object needs brush.

__hostTarget: Element<ElementProps>

If element is used as a component of other element.

__hoverStyle?: CommonStyleProps
__inHover: boolean

If element has been moved to the hover layer.

If so, dirty will only trigger the render2d refresh hover layer

__isRendered: boolean

If element was painted on the screen

__svgEl: SVGElement

Render2D instance will be assigned when element is associated with render2d

_decalEl: Path<PathProps>
_normalState: PathState
_paintRect: BoundingRect
_prevPaintRect: BoundingRect
anchorX: number

Will translated the element to the anchor position before applying other transforms.

anchorY: number
anid: string

Id for mapping animation

animators: default<any>[] = []
autoBatch: boolean

If element can be batched automatically

calculateTextPosition: ElementCalculateTextPosition

The string value of textPosition needs to be calculated to a real postion. For example, 'inside' is calculated to [rect.width/2, rect.height/2] by default. See contain/text.js#calculateTextPosition for more details. But some coutom shapes like "pin", "flag" have center that is not exactly [width/2, height/2]. So we provide this hook to customize the calculation for those shapes. It will be called if the style.textPosition is a string.

Param: out

Prepared out object. If not provided, this method should be responsible for creating one.

Param: style

Param: rect

{x, y, width, height}

Returns

out The same as the input out. { x: number. mandatory. y: number. mandatory. align: string. optional. use style.textAlign by default. verticalAlign: string. optional. use style.textVerticalAlign by default. }

culling: boolean

If enable culling

currentStates?: string[] = []
cursor: string

Mouse cursor when hovered

dirtyRectTolerance: number
draggable: boolean | "horizontal" | "vertical"

Whether it can be dragged.

dragging: boolean

Whether is it dragging.

extra: Dictionary<unknown>
globalScaleRatio: number

Scale ratio

id: number = ...
ignore: boolean

If ignore drawing and events of the element object

ignoreClip: boolean

If ignore clip from it's parent or hosts. Applied on itself and all it's children.

NOTE: It won't affect the clipPath set on the children.

ignoreCoarsePointer?: boolean

Never increase to target size

incremental: boolean

For increamental rendering

invTransform: MatrixArray
invisible: boolean

Whether the displayable object is visible. when it is true, the displayable object is not drawn, but the mouse event can still trigger the object.

isGroup: boolean

是否是 Group

name: string

Element name

onclick: ElementEventCallback<unknown, unknown>
oncontextmenu: ElementEventCallback<unknown, unknown>
ondblclick: ElementEventCallback<unknown, unknown>
ondrag: ElementEventCallback<unknown, unknown>
ondragend: ElementEventCallback<unknown, unknown>
ondragenter: ElementEventCallback<unknown, unknown>
ondragleave: ElementEventCallback<unknown, unknown>
ondragover: ElementEventCallback<unknown, unknown>
ondragstart: ElementEventCallback<unknown, unknown>
ondrop: ElementEventCallback<unknown, unknown>
onmousedown: ElementEventCallback<unknown, unknown>
onmousemove: ElementEventCallback<unknown, unknown>
onmouseout: ElementEventCallback<unknown, unknown>
onmouseover: ElementEventCallback<unknown, unknown>
onmouseup: ElementEventCallback<unknown, unknown>
onmousewheel: ElementEventCallback<unknown, unknown>
originX: number

Origin of scale, rotation, skew

originY: number
parent: Group
path: default
prevStates?: string[]
rectHover: boolean

If hover area is bounding rect

rotation: number
scaleX: number
scaleY: number
segmentIgnoreThreshold: number
shape: Dictionary<any>
silent: boolean

Whether to respond to mouse events.

skewX: number
skewY: number
stateProxy: ((stateName) => PathState)

Proxy function for getting state with given stateName. Render2D will first try to get with stateProxy. Then find from states if stateProxy returns nothing

targetStates will be given in useStates

Type declaration

stateTransition: ElementAnimateConfig

Animation config applied on state switching.

states: Dictionary<PathState>

Store of element state. 'normal' key is preserved for default properties.

strokeContainThreshold: number
subPixelOptimize: boolean
textConfig?: ElementTextConfig

Config of textContent. Inlcuding layout, color, ...etc.

textGuideLineConfig?: ElementTextGuideLineConfig

Config for guide line calculating.

NOTE: This is just a property signature. READ and WRITE are all done in .

transform: MatrixArray
type: string

Element type

useHoverLayer?: boolean

*********** Properties will be inejected in other modules. ******************

x: number
y: number
z: number
z2: number
zlevel: number

The z level determines the displayable object can be drawn in which layer canvas.

initDefaultProps: void = ...

The string value of textPosition needs to be calculated to a real postion. For example, 'inside' is calculated to [rect.width/2, rect.height/2] by default. See contain/text.js#calculateTextPosition for more details. But some coutom shapes like "pin", "flag" have center that is not exactly [width/2, height/2]. So we provide this hook to customize the calculation for those shapes. It will be called if the style.textPosition is a string.

Param: out

Prepared out object. If not provided, this method should be responsible for creating one.

Param: style

Param: rect

{x, y, width, height}

Returns

out The same as the input out. { x: number. mandatory. y: number. mandatory. textAlign: string. optional. use style.textAlign by default. textVerticalAlign: string. optional. use style.textVerticalAlign by default. }

Methods

  • Parameters

    • targetStyle: CommonStyleProps
    • sourceStyle: CommonStyleProps

    Returns CommonStyleProps

  • Parameters

    • toState: Dictionary<any>
    • normalState: Dictionary<any>
    • primaryKeys: readonly string[]

    Returns void

  • Parameters

    • animator: default<any>
    • key: string

    Returns void

  • Add self from render2d instance. Not recursively because it will be invoked when element added to storage.

    Parameters

    Returns void

  • 动画

    Parameters

    • Optional key: ""
    • Optional loop: boolean

      Whether to loop animation.

    Returns default<Path<Props>>

  • Parameters

    • key: "style"
    • Optional loop: boolean

    Returns default<PathStyleProps>

  • Parameters

    • key: "shape"
    • Optional loop: boolean

    Returns default<Dictionary<any>>

  • Animate from the target state to current state. The params and the value are the same as this.animateTo.

    Parameters

    Returns void

  • Alias for animate('shape')

    Parameters

    • loop: boolean

    Returns default<Dictionary<any>>

  • Parameters

    • target: Props
    • Optional cfg: ElementAnimateConfig
    • Optional animationProps: MapToType<Props, boolean>

      A map to specify which property to animate. If not specified, will animate all.

    Returns void

    Example

    // Animate position
    el.animateTo({
    position: [10, 10]
    }, { done: () => { // done } })

    // Animate shape, style and position in 100ms, delayed 100ms, with cubicOut easing
    el.animateTo({
    shape: {
    width: 500
    },
    style: {
    fill: 'red'
    }
    position: [10, 10]
    }, {
    duration: 100,
    delay: 100,
    easing: 'cubicOut',
    done: () => { // done }
    })
  • Parameters

    Returns this

  • Type Parameters

    • T extends string | number | symbol

    Parameters

    Returns this

  • Parameters

    • ctx: CanvasRenderingContext2D | default
    • shapeCfg: Dictionary<any>
    • Optional inBatch: boolean

    Returns void

  • Clear all states.

    Parameters

    • Optional noAnimation: boolean

    Returns void

  • If displayable element contain coord x, y

    Parameters

    • x: number
    • y: number

    Returns boolean

  • Returns void

  • Create a path style object with default values in it's prototype.

    Parameters

    • Optional obj: Props["style"]

    Returns Props["style"]

  • Besides marking elements to be refreshed. It will also invalid all cache and doing recalculate next frame.

    Returns void

  • Shape changed

    Returns void

  • Parameters

    • Optional notRedraw: boolean

    Returns void

  • Drift element

    Parameters

    • dx: number

      dx on the global space

    • dy: number

      dy on the global space

    • Optional e: ElementEvent

    Returns void

  • Returns {}

    • Returns Props["style"]

    • Parameters

      • Optional inBatch: boolean

      Returns default

    • Returns boolean

    • Returns boolean

    • Return if el.silent or any ancestor element has silent true.

      Returns boolean

    • Determine if an object is a valid style object. Which means it is created by createStyle.

      A valid style object will have all default values in it's prototype. To avoid get null/undefined values.

      Parameters

      Returns any

    • If path shape is zero area

      Returns boolean

    • Unbind a event.

      Parameters

      • Optional eventType: string

        The event name. If no event input, "off" all listeners.

      • Optional handler: Function

        The event handler. If no handler input, "off" all listeners of the event.

      Returns this

    • Bind a handler.

      Type Parameters

      • Ctx

      • EvtNm extends string

      Parameters

      • event: EvtNm

        The event name.

      • handler: WithThisType<({
            click: ((e) => boolean | void);
            contextmenu: ((e) => boolean | void);
            dblclick: ((e) => boolean | void);
            drag: ((e) => boolean | void);
            dragend: ((e) => boolean | void);
            dragenter: ((e) => boolean | void);
            dragleave: ((e) => boolean | void);
            dragover: ((e) => boolean | void);
            dragstart: ((e) => boolean | void);
            drop: ((e) => boolean | void);
            globalout: ((e) => boolean | void);
            mousedown: ((e) => boolean | void);
            mousemove: ((e) => boolean | void);
            mouseout: ((e) => boolean | void);
            mouseover: ((e) => boolean | void);
            mouseup: ((e) => boolean | void);
            mousewheel: ((e) => boolean | void);
        } & {})[EvtNm], CbThis<Ctx, Path<Props>>>

        The event handler.

      • Optional context: Ctx

      Returns this

    • Bind a handler.

      Type Parameters

      • Ctx

      • EvtNm extends string

      Parameters

      • event: EvtNm

        The event name.

      • query: EventQuery
      • handler: WithThisType<({
            click: ((e) => boolean | void);
            contextmenu: ((e) => boolean | void);
            dblclick: ((e) => boolean | void);
            drag: ((e) => boolean | void);
            dragend: ((e) => boolean | void);
            dragenter: ((e) => boolean | void);
            dragleave: ((e) => boolean | void);
            dragover: ((e) => boolean | void);
            dragstart: ((e) => boolean | void);
            drop: ((e) => boolean | void);
            globalout: ((e) => boolean | void);
            mousedown: ((e) => boolean | void);
            mousemove: ((e) => boolean | void);
            mouseout: ((e) => boolean | void);
            mouseover: ((e) => boolean | void);
            mouseup: ((e) => boolean | void);
            mousewheel: ((e) => boolean | void);
        } & {})[EvtNm], CbThis<Ctx, Path<Props>>>

        The event handler.

      • Optional context: Ctx

      Returns this

    • Returns void

    • If bounding rect of element contain coord x, y

      Parameters

      • x: number
      • y: number

      Returns boolean

    • Remove self from render2d instance. Not recursively because it will be invoked when element added to storage.

      Parameters

      Returns void

    • Remove state

      Parameters

      • state: string

        State to remove

      Returns void

    • Replace exists state.

      Parameters

      • oldState: string
      • newState: string
      • forceAdd: boolean

        If still add when even if replaced target not exists.

      Returns void

    • Set origin from array

      Parameters

      • arr: number[]

      Returns void

    • Set position from array

      Parameters

      • arr: number[]

      Returns void

    • Set scale from array

      Parameters

      • arr: number[]

      Returns void

    • Parameters

      Returns this

    • Type Parameters

      • T extends string | number | symbol

      Parameters

      Returns this

    • Set skew from array

      Parameters

      • arr: number[]

      Returns void

    • Parameters

      Returns this

    • Type Parameters

      • T extends string | number | symbol

      Parameters

      Returns this

    • If shape changed. used with dirtyShape

      Returns boolean

    • Parameters

      • viewWidth: number
      • viewHeight: number
      • considerClipPath: boolean
      • considerAncestors: boolean

      Returns boolean

    • 停止动画

      Parameters

      • Optional scope: string
      • Optional forwardToLast: boolean

        If move to last frame before stop

      Returns Path<Props>

    • Is style changed. Used with dirtyStyle.

      Returns boolean

    • Mark style updated. Only useful when style is used for caching. Like in the text.

      Returns void

    • Toogle state.

      Parameters

      • state: string
      • enable: boolean

      Returns void

    • 变换局部坐标位置到全局坐标空间

      Parameters

      • x: number
      • y: number

      Returns number[]

    • 变换坐标位置到 shape 的局部坐标空间

      Parameters

      • x: number
      • y: number

      Returns number[]

    • Type Parameters

      • Context

      Parameters

      • cb: ((this, el) => void)
          • (this, el): void
          • Parameters

            Returns void

      • Optional context: Context

      Returns void

    • Dispatch a event.

      Type Parameters

      • EvtNm extends string

      Parameters

      • eventType: EvtNm

        The event name.

      • Rest ...args: Parameters<({
            click: ((e) => boolean | void);
            contextmenu: ((e) => boolean | void);
            dblclick: ((e) => boolean | void);
            drag: ((e) => boolean | void);
            dragend: ((e) => boolean | void);
            dragenter: ((e) => boolean | void);
            dragleave: ((e) => boolean | void);
            dragover: ((e) => boolean | void);
            dragstart: ((e) => boolean | void);
            drop: ((e) => boolean | void);
            globalout: ((e) => boolean | void);
            mousedown: ((e) => boolean | void);
            mousemove: ((e) => boolean | void);
            mouseout: ((e) => boolean | void);
            mouseover: ((e) => boolean | void);
            mouseup: ((e) => boolean | void);
            mousewheel: ((e) => boolean | void);
        } & {})[EvtNm]>

      Returns this

    • Dispatch a event with context, which is specified at the last parameter.

      Parameters

      • type: string

        The event name.

      • Rest ...args: any[]

      Returns this

    • Use state. State is a collection of properties. Will return current state object if state exists and stateName has been changed.

      Parameters

      • stateName: string

        State name to be switched to

      • Optional keepCurrentStates: boolean
      • Optional noAnimation: boolean
      • Optional forceUseHoverLayer: boolean

      Returns any

    • Apply multiple states.

      Parameters

      • states: string[]

        States list.

      • Optional noAnimation: boolean
      • Optional forceUseHoverLayer: boolean

      Returns void

    • Replace style property. It will create a new style if given obj is not a valid style object.

      Parameters

      Returns void

    • 扩展一个 Path element, 比如星形,圆等。 Extend a path element

      Type Parameters

      • Shape extends Dictionary<any>

      Parameters

      • defaultProps: {
            afterBrush?: (() => void);
            beforeBrush?: (() => void);
            calculateTextPosition?: ElementCalculateTextPosition;
            getBoundingRect?: (() => BoundingRect);
            shape?: Shape;
            style?: PathStyleProps;
            type?: string;
            buildPath(this, ctx, shape, inBatch?): void;
            init?(this, opts): void;
        }
        • Optional afterBrush?: (() => void)
            • (): void
            • Returns void

        • Optional beforeBrush?: (() => void)
            • (): void
            • Returns void

        • Optional calculateTextPosition?: ElementCalculateTextPosition
        • Optional getBoundingRect?: (() => BoundingRect)
        • Optional shape?: Shape
        • Optional style?: PathStyleProps
        • Optional type?: string
        • buildPath:function
          • Parameters

            • this: Path<PathProps>
            • ctx: CanvasRenderingContext2D | default
            • shape: Shape
            • Optional inBatch: boolean

            Returns void

        • init?:function

      Returns (new (opts?) => Path<PathProps>)

      DEPRECATED

      Use class extends