Class BezierCurve

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
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

    Returns void

  • 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

  • Hook after update

    Returns void

  • Parameters

    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 void

  • Hook before update

    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

  • Parameters

    • source: Transformable

    Returns void

  • 分解transform矩阵到position, rotation, scale

    Returns void

  • 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

  • Ensure state exists. If not, will create one and return.

    Parameters

    • stateName: string

    Returns PathState

  • Get computed global transform NOTE: this method will force update transform on all ancestors. Please be aware of the potential performance cost.

    Returns MatrixArray

  • Returns {
        fill: string;
        stroke: string;
    }

    • fill: string
    • stroke: string
  • Returns "#333" | "#ccc" | "#eee"

  • Parameters

    • Optional textFill: string

    Returns string

  • Parameters

    • textFill: string

    Returns string

  • Parameters

    • Optional inBatch: boolean

    Returns default

  • Returns boolean

  • If has any state.

    Returns boolean

  • Hide the element

    Returns void

  • 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

  • Mark element needs to be repainted

    Returns void

  • If needs to compute transform

    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, BezierCurve>>

      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, BezierCurve>>

      The event handler.

    • Optional context: Ctx

    Returns this

  • Get point at percent

    Parameters

    • t: number

    Returns number[]

  • 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 clip path

    clipPath can't be shared between two elements.

    Parameters

    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

  • Set skew from array

    Parameters

    • arr: number[]

    Returns void

  • Attach text on element

    Parameters

    Returns void

  • If shape changed. used with dirtyShape

    Returns boolean

  • Parameters

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

    Returns boolean

  • Show the element

    Returns void

  • 停止动画

    Parameters

    • Optional scope: string
    • Optional forwardToLast: boolean

      If move to last frame before stop

    Returns BezierCurve

  • 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

  • Get tangent at percent

    Parameters

    • t: number

    Returns number[]

  • 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

  • Update each frame

    Returns void

  • Parameters

    • Optional forceUpdate: boolean

    Returns void

  • 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