Sprite

new Konva.Sprite(config)

Sprite constructor

Parameters

Name	Type	Description
config	Object
animation	String	animation key
animations	Object	animation map
frameIndex (optional)	Integer	animation frame index
image	Image	image object
frameRate (optional)	Integer	animation frame rate
fill (optional)	String	fill color
fillPatternImage (optional)	Image	fill pattern image
fillPatternX (optional)	Number
fillPatternY (optional)	Number
fillPatternOffset (optional)	Object	object with x and y component
fillPatternOffsetX (optional)	Number
fillPatternOffsetY (optional)	Number
fillPatternScale (optional)	Object	object with x and y component
fillPatternScaleX (optional)	Number
fillPatternScaleY (optional)	Number
fillPatternRotation (optional)	Number
fillPatternRepeat (optional)	String	can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat"
fillLinearGradientStartPoint (optional)	Object	object with x and y component
fillLinearGradientStartPointX (optional)	Number
fillLinearGradientStartPointY (optional)	Number
fillLinearGradientEndPoint (optional)	Object	object with x and y component
fillLinearGradientEndPointX (optional)	Number
fillLinearGradientEndPointY (optional)	Number
fillLinearGradientColorStops (optional)	Array	array of color stops
fillRadialGradientStartPoint (optional)	Object	object with x and y component
fillRadialGradientStartPointX (optional)	Number
fillRadialGradientStartPointY (optional)	Number
fillRadialGradientEndPoint (optional)	Object	object with x and y component
fillRadialGradientEndPointX (optional)	Number
fillRadialGradientEndPointY (optional)	Number
fillRadialGradientStartRadius (optional)	Number
fillRadialGradientEndRadius (optional)	Number
fillRadialGradientColorStops (optional)	Array	array of color stops
fillEnabled (optional)	Boolean	flag which enables or disables the fill. The default value is true
fillPriority (optional)	String	can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
stroke (optional)	String	stroke color
strokeWidth (optional)	Number	stroke width
fillAfterStrokeEnabled (optional)	Boolean	Should we draw fill AFTER stroke? Default is false.
hitStrokeWidth (optional)	Number	size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth
strokeHitEnabled (optional)	Boolean	flag which enables or disables stroke hit region. The default is true
perfectDrawEnabled (optional)	Boolean	flag which enables or disables using buffer canvas. The default is true
shadowForStrokeEnabled (optional)	Boolean	flag which enables or disables shadow for stroke. The default is true
strokeScaleEnabled (optional)	Boolean	flag which enables or disables stroke scale. The default is true
strokeEnabled (optional)	Boolean	flag which enables or disables the stroke. The default value is true
lineJoin (optional)	String	can be miter, round, or bevel. The default is miter
lineCap (optional)	String	can be butt, round, or square. The default is butt
shadowColor (optional)	String
shadowBlur (optional)	Number
shadowOffset (optional)	Object	object with x and y component
shadowOffsetX (optional)	Number
shadowOffsetY (optional)	Number
shadowOpacity (optional)	Number	shadow opacity. Can be any real number between 0 and 1
shadowEnabled (optional)	Boolean	flag which enables or disables the shadow. The default value is true
dash (optional)	Array
dashEnabled (optional)	Boolean	flag which enables or disables the dashArray. The default value is true
x (optional)	Number
y (optional)	Number
width (optional)	Number
height (optional)	Number
visible (optional)	Boolean
listening (optional)	Boolean	whether or not the node is listening for events
id (optional)	String	unique id
name (optional)	String	non-unique name
opacity (optional)	Number	determines node opacity. Can be any number between 0 and 1
scale (optional)	Object	set scale
scaleX (optional)	Number	set scale x
scaleY (optional)	Number	set scale y
rotation (optional)	Number	rotation in degrees
offset (optional)	Object	offset from center point and rotation point
offsetX (optional)	Number	set offset x
offsetY (optional)	Number	set offset y
draggable (optional)	Boolean	makes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance (optional)	Number
dragBoundFunc (optional)	function

Inherited from: Konva.Shape

Own Methods

start()

start sprite animation

stop()

stop sprite animation

isRunning()

determine if animation of sprite is running or not. returns true or false

Returns: Boolean

animation(anim)

get/set animation key

Parameters:

• anim (String): animation key

Returns: String

Example:

// get animation key
var animation = sprite.animation();

// set animation key
sprite.animation('kicking');

animations(animations)

get/set animations map

Parameters:

• animations (Object)

Returns: Object

Example:

// get animations map
var animations = sprite.animations();

// set animations map
sprite.animations({
  standing: [
    // x, y, width, height (6 frames)
    0, 0, 49, 109,
    52, 0, 49, 109,
    105, 0, 49, 109,
    158, 0, 49, 109,
    210, 0, 49, 109,
    262, 0, 49, 109
  ],
  kicking: [
    // x, y, width, height (6 frames)
    0, 109, 45, 98,
    45, 109, 45, 98,
    95, 109, 63, 98,
    156, 109, 70, 98,
    229, 109, 60, 98,
    287, 109, 41, 98
  ]
});

offsets(offsets)

get/set offsets map

Parameters:

• offsets (Object)

Returns: Object

Example:

// get offsets map
var offsets = sprite.offsets();

// set offsets map
sprite.offsets({
  standing: [
    // x, y (6 frames)
    0, 0,
    0, 0,
    5, 0,
    0, 0,
    0, 3,
    2, 0
  ],
  kicking: [
    // x, y (6 frames)
    0, 5,
    5, 0,
    10, 0,
    0, 0,
    2, 1,
    0, 0
  ]
});

image(image)

get/set image

Parameters:

• image (Image)

Returns: Image

Example:

// get image
var image = sprite.image();

// set image
sprite.image(imageObj);

frameIndex(frameIndex)

set/set animation frame index

Parameters:

• frameIndex (Integer)

Returns: Integer

Example:

// get animation frame index
var frameIndex = sprite.frameIndex();

// set animation frame index
sprite.frameIndex(3);

frameRate(frameRate)

get/set frame rate in frames per second. Increase this number to make the sprite animation run faster, and decrease the number to make the sprite animation run slower The default is 17 frames per second

Parameters:

• frameRate (Integer)

Returns: Integer

Example:

// get frame rate
var frameRate = sprite.frameRate();

// set frame rate to 2 frames per second
sprite.frameRate(2);

Inherited Methods

Konva.Sprite also has all methods of its parent classes. Each link below opens the full documentation of the method on the class that defines it.

From Konva.Shape

• getContext()
• getCanvas()
• hasShadow()
• hasFill()
• hasStroke()
• intersects(point)
• getSelfRect()
• drawHitFromCache(alphaThreshold)
• stroke(color)
• strokeWidth(strokeWidth)
• fillAfterStrokeEnabled(fillAfterStrokeEnabled)
• hitStrokeWidth(hitStrokeWidth)
• strokeHitEnabled(strokeHitEnabled)
• perfectDrawEnabled(perfectDrawEnabled)
• shadowForStrokeEnabled(shadowForStrokeEnabled)
• lineJoin(lineJoin)
• lineCap(lineCap)
• miterLimit(miterLimit)
• sceneFunc(drawFunc)
• hitFunc(drawFunc)
• dash(dash)
• shadowColor(color)
• shadowBlur(blur)
• shadowOpacity(opacity)
• shadowOffset(offset)
• shadowOffsetX(x)
• shadowOffsetY(y)
• fillPatternImage(image)
• fill(color)
• fillPatternX(x)
• fillPatternY(y)
• fillLinearGradientColorStops(colorStops)
• strokeLinearGradientColorStops(colorStops)
• fillRadialGradientStartRadius(radius)
• fillRadialGradientEndRadius(radius)
• fillRadialGradientColorStops(colorStops)
• fillPatternRepeat(repeat)
• fillEnabled(enabled)
• strokeEnabled(enabled)
• shadowEnabled(enabled)
• dashEnabled(enabled)
• strokeScaleEnabled(enabled)
• fillPriority(priority)
• fillPatternOffset(offset)
• fillPatternOffsetX(x)
• fillPatternOffsetY(y)
• fillPatternScale(scale)
• fillPatternScaleX(x)
• fillPatternScaleY(y)
• fillLinearGradientStartPoint(startPoint)
• strokeLinearGradientStartPoint(startPoint)
• fillLinearGradientStartPointX(x)
• linearLinearGradientStartPointX(x)
• fillLinearGradientStartPointY(y)
• strokeLinearGradientStartPointY(y)
• fillLinearGradientEndPoint(endPoint)
• strokeLinearGradientEndPoint(endPoint)
• fillLinearGradientEndPointX(x)
• strokeLinearGradientEndPointX(x)
• fillLinearGradientEndPointY(y)
• strokeLinearGradientEndPointY(y)
• fillRadialGradientStartPoint(startPoint)
• fillRadialGradientStartPointX(x)
• fillRadialGradientStartPointY(y)
• fillRadialGradientEndPoint(endPoint)
• fillRadialGradientEndPointX(x)
• fillRadialGradientEndPointY(y)
• fillPatternRotation(rotation)
• fillRule(rotation)

From Konva.Node

• clearCache()
• cache(config)
• isCached()
• getClientRect(config)
• off(evtStr)
• remove()
• destroy()
• getAttr(attr)
• getAncestors()
• getAttrs()
• setAttrs(config)
• isListening()
• isVisible()
• show()
• hide()
• getAbsoluteZIndex()
• getDepth()
• getRelativePointerPosition()
• getAbsolutePosition(Ancestor)
• move(change)
• rotate(theta)
• moveToTop()
• moveUp()
• moveDown()
• moveToBottom()
• getAbsoluteOpacity()
• moveTo(newContainer)
• toObject()
• toJSON()
• getParent()
• findAncestors(selector, includeSelf, stopNode)
• findAncestor(selector, includeSelf, stopNode)
• getLayer()
• getStage()
• fire(eventType, evt, bubble)
• getAbsoluteTransform()
• getAbsoluteScale()
• getAbsoluteRotation()
• getTransform()
• clone(obj)
• toCanvas(config)
• toDataURL(config)
• toImage(config)
• toBlob(config)
• getClassName()
• getType()
• addName(name)
• hasName(name)
• removeName(name)
• setAttr(attr, val)
• draw()
• startDrag()
• stopDrag()
• isDragging()
• isClientRectOnScreen(margin)
• zIndex(index)
• absolutePosition(pos)
• position(pos)
• x(x)
• y(y)
• globalCompositeOperation(type)
• opacity(opacity)
• name(name)
• id(id)
• rotation(rotation)
• scale(scale)
• scaleX(x)
• scaleY(y)
• skew(skew)
• skewX(x)
• skewY(y)
• offsetX(x)
• offsetY(y)
• dragDistance(distance)
• width(width)
• height(height)
• listening(listening)
• preventDefault(preventDefault)
• filters(filters)
• visible(visible)
• transformsEnabled(enabled)
• size(size)
• dragBoundFunc(dragBoundFunc)
• draggable(draggable)
• to(params)
• blurRadius(radius)
• brightness(brightness)
• contrast(contrast)
• embossStrength(level)
• embossWhiteLevel(embossWhiteLevel)
• embossDirection(embossDirection)
• embossBlend(embossBlend)
• enhance(amount)
• hue(hue)
• saturation(saturation)
• luminance(value)
• value(value)
• kaleidoscopePower(power)
• kaleidoscopeAngle(degrees)
• noise(noise)
• pixelSize(pixelSize)
• levels(level)
• red(red)
• green(green)
• blue(blue)
• alpha(alpha)
• threshold(threshold)