Optional
opts: EllipsePropsProtected
_$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
_decalProtected
_normalProtected
_paintProtected
_prevProtected
_rectWill translated the element to the anchor position before applying other transforms.
Id for mapping animation
If element can be batched automatically
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: EllipsePropsProtected
_innerProtected
_mergeProtected
_mergeProtected
_saveProtected
_transitionOptional
cfg: ElementAnimateConfigOptional
animationProps: MapToType<EllipseProps, 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: booleanOptional
loop: booleanAnimate from the target state to current state.
The params and the value are the same as this.animateTo
.
Optional
animationProps: MapToType<EllipseProps, boolean>Alias for animate('shape')
Alias for animate('style')
Optional
cfg: ElementAnimateConfigOptional
animationProps: MapToType<EllipseProps, 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 a path style object with default values in it's prototype.
Optional
obj: PathStylePropsDrift 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.
Protected
getGet 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 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.
Static
extend扩展一个 Path element, 比如星形,圆等。 Extend a path element
Optional
afterOptional
beforeOptional
calculateOptional
getInterface of getting the minimum bounding box.
Optional
shape?: ShapeOptional
style?: PathStylePropsOptional
type?: stringUse class extends
Dirty bits. From which painter will determine if this displayable object needs brush.