Optional props: TSpanPropsProtected _$eventOptional __clipIf element is used as a component of other element.
Optional __hoverIf element has been moved to the hover layer.
If so, dirty will only trigger the render2d refresh hover layer
If element was painted on the screen
Render2D instance will be assigned when element is associated with render2d
Protected _normalProtected _paintProtected _prevProtected _rectWill translated the element to the anchor position before applying other transforms.
Id for mapping animation
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.
Prepared out object. If not provided, this method should be responsible for creating one.
{x, y, width, height}
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. }
If enable culling
Optional currentMouse cursor when hovered
Whether it can be dragged.
Whether is it dragging.
Scale ratio
If ignore drawing and events of the element object
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.
Optional ignoreNever increase to target size
For increamental rendering
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.
是否是 Group
Element name
Origin of scale, rotation, skew
Optional prevIf hover area is bounding rect
Whether to respond to mouse events.
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
Animation config applied on state switching.
Store of element state. 'normal' key is preserved for default properties.
Optional textConfig of textContent. Inlcuding layout, color, ...etc.
Optional textConfig for guide line calculating.
NOTE: This is just a property signature. READ and WRITE are all done in .
Element type
Optional use*********** Properties will be inejected in other modules. ******************
The z level determines the displayable object can be drawn in which layer canvas.
Static Protected initThe 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.
Prepared out object. If not provided, this method should be responsible for creating one.
{x, y, width, height}
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. }
Protected _applyProtected _initOptional props: TSpanPropsProtected _innerProtected _mergeProtected _mergeProtected _saveProtected _transitionOptional cfg: ElementAnimateConfigOptional animationProps: MapToType<TSpanProps, boolean>Add self from render2d instance. Not recursively because it will be invoked when element added to storage.
动画
Optional key: ""Optional loop: booleanWhether to loop animation.
Optional loop: booleanAnimate from the target state to current state.
The params and the value are the same as this.animateTo.
Optional animationProps: MapToType<TSpanProps, boolean>Alias for animate('style')
Optional cfg: ElementAnimateConfigOptional animationProps: MapToType<TSpanProps, boolean>A map to specify which property to animate. If not specified, will animate all.
// 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 }
})
Protected canCreate an image style object with default values in it's prototype.
Optional obj: TSpanStylePropsDrift element
dx on the global space
dy on the global space
Optional e: ElementEventInterface of getting the minimum bounding box.
Get computed global transform NOTE: this method will force update transform on all ancestors. Please be aware of the potential performance cost.
Get global scale
Optional out: VectorArrayProtected getProtected getGet computed local transform
Optional m: MatrixArrayProtected getProtected getDetermine 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.
Bind a handler.
The event name.
The event handler.
Optional context: CtxBind a handler.
The event name.
The event handler.
Optional context: CtxRemove self from render2d instance. Not recursively because it will be invoked when element added to storage.
Set bounding rect calculated from Text For reducing time of calculating bounding rect.
Set layout of attached text. Will merge with the previous.
Attach text on element
Dispatch a event.
The event name.
Rest ...args: Parameters<({ Use state. State is a collection of properties. Will return current state object if state exists and stateName has been changed.
State name to be switched to
Optional keepCurrentStates: booleanOptional noAnimation: booleanOptional forceUseHoverLayer: booleanReplace style property. It will create a new style if given obj is not a valid style object.
Dirty bits. From which painter will determine if this displayable object needs brush.