CGSGNodeImage Class
A CGSGNodeImage represent an image node
Constructor
Item Index
Methods
- _checkDimension
- _clearContext
- _createDelegate
- _onImageAbort
- _onImageError
- _onImageLoaded
- addChild
- addChildAt
- afterRender
- afterRenderGhost
- beforeRender
- beforeRenderGhost
- computeAbsoluteMatrix
- copy
- detachChild
- detachChildAt
- detectSelection
- detectSelectionInRegion
- evalSet
- free
- getAbsoluteBottom
- getAbsoluteHeight
- getAbsoluteLeft
- getAbsolutePosition
- getAbsoluteRegion
- getAbsoluteRight
- getAbsoluteRotation
- getAbsoluteScale
- getAbsoluteTop
- getAbsoluteWidth
- getHeight
- getListOfCollidingBrothers
- getRegion
- getWidth
- isALeaf
- isColliding
- isCollidingABrother
- pickNode
- pickNodes
- removeAll
- removeChild
- render
- renderGhost
- renderSelected
- resizeBy
- resizeTo
- resizeWith
- rotateBy
- rotateTo
- rotateWith
- scaleBy
- scaleTo
- scaleWith
- setEffect
- setImage
- setRegionConstraint
- setSelected
- setSlice
- setURL
- translateBy
- translateTo
- translateWith
Properties
- _absolutePosition
- _absoluteRotation
- _absoluteScale
- _id
- _img
- _isDrag
- _isLoaded
- _parentNode
- _urlImage
- children
- classType
- dimension
- effect
- globalAlpha
- isClickable
- isCollisionManaged
- isDraggable
- isMouseOver
- isMoving
- isProportionalResize
- isResizable
- isResizing
- isSelected
- isTraversable
- isVisible
- name
- needToKeepAbsoluteMatrix
- onClick
- onDblClick
- onDeselect
- onDrag
- onDragEnd
- onLoadAbort
- onLoadEnd
- onLoadError
- onMouseEnter
- onMouseOut
- onMouseOver
- onMouseUp
- onResize
- onResizeEnd
- onSelect
- pickNodeMethod
- position
- regionConstraint
- resizeHandles
- rotation
- rotationCenter
- scale
- selectionHandleColor
- selectionHandleSize
- selectionLineColor
- selectionLineWidth
- slice
- userdata
Methods
Check the true dimension of the image and fill the this.dimension property with it, only if dimension is not already defined in the constructor
-
context -
canvasWidth -
canvasHeight
Wipes the canvas context
-
objectContext -
delegateMethod
used to call delegate method when the image is finally loaded
To be overrided when the image loading is aborted
To be overrided when the image failed to load
fired when the image is loaded. Check the dimension of the image and fired the onLoadEnd event
-
newNode
Add a new nodes into this one, at the end of the list
-
newNodeCGSGNodethe nodes to add as a child
-
newNode -
index
Add a new nodes at a particular index in the list of children. If the index is too large, the nodes will be inserted at the end of the list
-
context
Must be called after a render
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
context
Must be called before begin to render
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
context
Must be called before to start the rendering of the nodes
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
context
Must be called before begin to render the nodes in GHOST mode
-
contextCanvasRenderingContext2Dthe context into render the nodes
-
recursive
Compute the absolute position, rotation and scale in the canvas container
-
recursiveBooleanif !== false, compute recursively
-
childNode
Detach the nodes without delete it. So it's not a child anymore
-
childNodeCGSGNode
-
index
Detach the nodes in index 'index' without delete it. So it's not a child anymore
-
indexNumber
-
mousePosition -
ghostContext -
absoluteScale
return this if this nodes is under the mice cursor Can be overrided by inherited klass to optimize this perform. This default function used the ghost rendering method
-
mousePositionCGSGPositionA CGSGPosition object
-
ghostContextCanvasRenderingContext2D -
absoluteScaleCGSGScale
-
region -
ghostContext -
absoluteScale
return this if this nodes is under the region Can be overrided by inherited klass to optimize this perform. This default function used the ghost rendering method
-
regionCGSGRegionThe region to check
-
ghostContextCanvasRenderingContext2D -
absoluteScaleCGSGScale
-
attribute -
value
Execute/Eval the script passed in parameter in "this" scope. Used to set new value to an attribute of a node
-
attributeStringThe attribute to be changed
-
valueThe new value for the attribute
node.evalSet("position.y", 12);
free memory taken by this object and it's children. The 'userData' property won't be freed
-
threshold
-
thresholdNumberspace between the 2 nodes before considering they are colliding
Return true if this nodes has no child
-
node -
threshold
Test if this node is colliding the node in parameter. Don't forget to add nodes to CGSGCollisionManager.
-
threshold
-
thresholdNumberspace between the 2 nodes before considering they are colliding
-
mousePosition -
absoluteScale -
ghostContext -
recursively -
condition
Check if this nodes is under the cursor position.
-
mousePositionCGSGPositionposition of the mouse on the canvas
-
absoluteScaleCGSGScalea CGSGScale absolute relativeScale of all parents
-
ghostContextCanvasRenderingContext2Da copy of the canvas context
-
recursivelyBooleanif false, don't traverse the children of this nodes
-
conditionFunctionCondition to be picked ie: "color=='yellow'" or "classType=='CGSGNodeImage' && this.globalAlpha>0.5"
-
region -
absoluteScale -
ghostContext -
recursively -
condition
Return all nodes (Array) in the given region
-
regionCGSGRegionof the canvas to check
-
absoluteScaleCGSGScalea CGSGScale absolute relativeScale of all parents
-
ghostContextCanvasRenderingContext2Da copy of the canvas context
-
recursivelyBooleanif false, don't traverse the children of this nodes
-
conditionFunctionCondition to be picked ie: "color=='yellow'" or "classType=='CGSGNodeImage' && this.globalAlpha>0.5"
remove all children, delete them and reset the current parameters
-
node -
searchRecursively
Remove the child passed in parameter and delete it
-
context
Must be defined to allow the scene graph to render the image nodes
-
contextCanvasRenderingContext2Dthe context to render on
-
ghostContext
Ghost rendering function. Render here your custom nodes with a single color (cgsgGhostColor). This will be used by the SceneGraph to know if the mouse cursor is over this nodes.
-
ghostContextCanvasRenderingContext2DThe context for the ghost rendering
-
context
Render the selection box and handle boxes around the bounding box of this node when selected
-
contextCanvasRenderingContext2Dthe context into render the node
-
widthFactor -
heightFactor
Multiply current dimension by these new ones
-
newWidth -
newHeight
Replace current dimension by these new ones
-
width -
height
Increase/decrease current dimension with adding values. It is used when the user resize the image with the handle boxes
-
rotateFactor -
computeAbsoluteValue
Multiply this relativeScale factor by the current relative relativeScale
-
newAngle -
computeAbsoluteValue
Replace current relative relativeRotation by this new oneScale
-
angle -
computeAbsoluteValue
Add this angle to the current relative relativeRotation
-
scaleFactorX -
scaleFactorY -
computeAbsoluteValue
Multiply this relativeScale factor by the current relative relativeScale
-
scaleX -
scaleY -
computeAbsoluteValue
Replace current relative relativeScale by this new one
-
x -
y -
computeAbsoluteValue
Add to the current relative Scale
-
effect
-
effectCGSGEffect
-
newImage
-
newImageImagenew Image object. Must bea already loaded before
-
region
Set the region inside which one this node ca be placed an can move
-
regionCGSGRegiona CGSGRegion relatively to this parent region. Can be null.
-
x -
y -
w -
h -
updateDimension
Set the slice into the image
-
x -
y -
computeAbsoluteValue
Add new coordinate to the current relative one
-
newRelativeX -
newRelativeY -
computeAbsoluteValue
Replace current relative position by this new one
Properties
Absolute position of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to move the node, use translateBy/translateWith/translateTo instead
Absolute rotation of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to rotate or resize the node, use rotateBy/rotateWith/rotateTo instead
Absolute scale of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to scale the node, use scaleBy/scaleWith/scaleTo instead
ID for the node. Should be filled by the developer. The framework will never use it.
the image object itself
Dimension of this nodes on the canvas container Never use it to resize the node, use resizeBy/resizeWith/resizeTo instead
Default: CGSGDimension(0, 0)
the selected effect to be applied
Default: null
selection attributes If true, this node is clickable and so will be checked by the pickNode function
Default: true
Updated by the scene itself. Don't update it manually. True if the mice is over the node, false otherwise
Updated by the scene itself. Don't update it manually. True if the node is being moved manually, false otherwise
If true, this node can be resized by the user. In that case, the dimension property will be affected, not the scale one.
Default: false
Updated by the scene itself. Don't update it manually. True if the node is being resized manually, false otherwise
Indicate whether this node is selected or not. Use CGSGScene::scenegraph.selectNode(nodeToSelect) to select a node
Default: false
true if this node is traversable (recursively) (ie : by the picknode, a traverser, ...)
If true, the absolute matrix will be recomputed after each movement (and so in animation). Set it to false to gain performance if you don't need to keep trace of absolute position (no need to collision, picknode, ...)
Default: true
Callback on mouse or touch click
Default: null
this.onClick = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse or touch double click
Default: null
this.onDblClick = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on deselect this node
Default: null
this.onDeselect = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on drag this node
Default: null
this.onDrag = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on end of drag this node
Default: null
this.onDragEnd = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse enter on the node
Default: null
this.onMouseEnter = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse out
Default: null
this.onMouseOut = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse over the node
Default: null
this.onMouseOver = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on mouse up
Default: null
this.onMouseUp = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on resize this node
Default: null
this.onResize = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on end resize this node
Default: null
this.onResizeEnd = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Callback on select this node
Default: null
this.onSelect = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }
Define the method the detection (or "pick") method will be used for this node. Possible values CGSGPickNodeMethod.REGION and CGSGPickNodeMethod.GHOST.
- REGION : the detection returns true if the mouse cursor is inside the bounding box of the node
- GHOST : the detection will use the "renderGhost" method of the node to achieve a more accurate detection
Default: CGSGPickNodeMethod.REGION
Relative position of this nodes on the canvas container, relatively to the position of its parent node. Never use it to move the node, use translateBy/translateWith/translateTo instead
Default: CGSGPosition(0, 0)
The constraint region when moving the node
Default: null
The 8 handleboxes that will be the resize handles the resize handles will be in this order: 0 1 2 3 4 5 6 7
Relative rotation of this nodes on the canvas container, relatively to the rotation of its parent node. Never use it to rotate or resize the node, use rotateBy/rotateWith/rotateTo instead
Default: CGSGRotation(0)
Pivot point to apply a rotation. The point is a value between [0, 0] and [1, 1]. [0, 0] is the top left corner of the bounding box and [1, 1] the bottom right corner.
Default: null
Relative scale of this nodes on the canvas container, relatively to the scale of its parent node. Never use it to scale or resize the node, use scaleBy/scaleWith/scaleTo instead
Default: CGSGScale(1, 1)
Color for the handle boxes around this node when selected
Default: "#9068FF""
can be fulfilled by the developer to put in whatever he needs
Default: null