Arrow

new Konva.Arrow(config)

Arrow constructor

Parameters

Name	Type	Description
config	Object
points	Array	Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
tension (optional)	Number	Higher values will result in a more curvy line. A value of 0 will result in no interpolation. The default is 0
pointerLength	Number	Arrow pointer length. Default value is 10.
pointerWidth	Number	Arrow pointer width. Default value is 10.
pointerAtBeginning	Boolean	Do we need to draw pointer on beginning position?. Default false.
pointerAtEnding	Boolean	Do we need to draw pointer on ending position?. Default true.
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.Line

Own Methods

pointerLength(Length)

get/set pointerLength

Parameters:

• Length (Number): of pointer of arrow. The default is 10.

Returns: Number

Example:

// get length
var pointerLength = line.pointerLength();

// set length
line.pointerLength(15);

pointerWidth(Width)

get/set pointerWidth

Parameters:

• Width (Number): of pointer of arrow. The default is 10.

Returns: Number

Example:

// get width
var pointerWidth = line.pointerWidth();

// set width
line.pointerWidth(15);

pointerAtBeginning(Should)

get/set pointerAtBeginning

Parameters:

• Should (Number): pointer displayed at beginning of arrow. The default is false.

Returns: Boolean

Example:

// get value
var pointerAtBeginning = line.pointerAtBeginning();

// set value
line.pointerAtBeginning(true);

pointerAtEnding(Should)

get/set pointerAtEnding

Parameters:

• Should (Number): pointer displayed at ending of arrow. The default is true.

Returns: Boolean

Example:

// get value
var pointerAtEnding = line.pointerAtEnding();

// set value
line.pointerAtEnding(false);

Inherited Methods

Konva.Arrow 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.Line

• _eachTensionSegment()
• closed(closed)
• bezier(bezier)
• tension(tension)
• points(points)

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)
• on(evtStr, handler)
• off(evtStr)
• remove()
• destroy()
• getAttr(attr)
• getAncestors()
• getAttrs()
• setAttrs(config)
• isListening()
• isVisible()
• show()
• hide()
• getAbsoluteZIndex()
• getDepth()
• getRelativePointerPosition()
• getAbsolutePosition(top)
• 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)