All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.
- Performance fixes when cached node has many children
- Better drawing for shape with
strokeScaleEnabled = false
on HDPI devices
- New
ignoreStroke
forKonva.Transformer
. Good to use when a shape hasstrokeScaleEnabled = false
- getKerning TextPath API is deprecated. Use "kerningFunc" instead.
- Use custom functions for
trimRight
andtrimLeft
(for better browsers support)
- New
anchorCornerRadius
forKonva.Transformer
- Performance fixes for caching
dragstart
event behavior is a bit changed. It will fire BEFORE actual position of a node is changed.
- Fixed a wrong cache when a shape inside group has
listening = false
- Added some text trim logic to wrap in better
getClientRect
for complex paths fixesgetClientRect
calculation fix for groups- Update
Konva.Transformer
onrotateEnabled
change - Fix click stage event on dragend
- Fix some Transformer cursor behavior
- Centered resize with ALT key for
Konva.Transformer
- New
centeredScaling
forKonva.Transformer
- Tween support for gradient properties
- Add
user-select: none
to the stage container to fix some "selected contend around" issues
- new methods
path.getLength()
andpath.getPointAtLength(val)
verticalAlign
forKonva.Text
- Default duration for tweens and
node.to()
methods is now 300ms - Typescript fixes
- Automatic validations for many attributes
- New properties for
Konva.Transformer
:borderStroke
,borderStrokeWidth
,borderDash
,anchorStroke
,anchorStrokeWidth
,anchorSize
.
- Some properties of
Konva.Transformer
are renamed.lineEnabled
->borderEnabled
.rotateHandlerOffset
->rotateAnchorOffset
,enabledHandlers
->enabledAnchors
.
- Some
Konva.Transformer
fixes - Typescript fixes
stage.toDataURL()
fixes when it has hidden layersshape.toDataURL()
automatically adjust position and size of resulted image
toObject
fixes
- Some drag&drop fixes
- Removed wrong dep
- Typescript fixes
- Typescript fixes
- add shape as second argument for
sceneFunc
andhitFunc
- Fixed
Konva.Text
justify drawing for a text with decoration - Added methods
data()
,setData()
andgetData()
methods toKonva.TextPath
- Correct cache reset for
Konva.Transformer
Konva.Transformer
automatically track shape changesKonva.Transformer
works with shapes with offset too
- Cursor fixes for
Konva.Transformer
- Fixed lineHeight behavior for
Konva.Text
- Some performance optimizations for
Konva.Text
- Better wrap algorithm for
Konva.Text
- fixed
Konva.Arrow
with tension != 0 - Some fixes for
Konva.Transformer
- Typescript defs for
Konva.Transformer
- Typescript defs for
globalCompositeOperation
- Fixed flow for
contextmenu
event. Now it will be triggered on shapes too find()
method for Containers can use a function as a parameter
- some bugs fixes for
group.getClientRect()
Konva.Arrow
will not draw dash for pointers- setAttr will trigger change event if new value is the same Object
- better behavior of
dblclick
event when you click fast on different shapes stage.toDataURL
will usepixelRatio = 1
by default.
- Even more bugs fixes for
Konva.Transformer
- Several bugs fixes for
Konva.Transformer
- new
Konva.Transformer
. It is a special group that allow simple resizing and rotation of a shape. - Add ability to remove event by callback
node.off('event', callback)
. - new
Konva.Filters.Contrast
. - new
Konva.Util.haveIntersection()
to detect simple collusion - add
Konva.Text.ellipsis
to add '…' to text string if width is fixed and wrap is set to 'none' - add gradients for strokes
- stage events are slightly changed.
mousedown
,click
,mouseup
,dblclick
,touchstart
,touchend
,tap
,dbltap
will be triggered when clicked on empty areas too
- Some typescript fixes
- Pixelate filter fixes
- Fixes for path data parsing
- Fixed shadow size calculation
- Some deprecated methods are removed. If previous version was working without deprecation warnings for you, this one will work fine too.
- Some typescript fixes
isBrowser
detection for electron
- Changing size of a stage will redraw it in synchronous way
- Some fixes special for nodejs
- Fixed
Konva.document is undefined
- Konva for browser env and Konva for nodejs env are separate packages now. You can use
konva-node
for NodeJS env.
- Several typescript fixes
- Default value for
dragDistance
is changed to 3px. - Fix rare error throw on drag
- Caching with height = 0 or width = 0 with throw async error. Caching will be ignored.
- The
node.getClientRect()
calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs. - Upgrade nodejs deps
- Fix bug with double trigger wheel in Firefox
- Fix
node.getClientRect()
calculation in a case of Group + invisible child - Fix dblclick issue konvajs#252
- Fixed bug with pointer detection. css 3d transformed stage will not work now.
- Fixed bug with automatic shadow for negative scale values
- Fix pointer position detection
- moved
globalCompositeOperation
property toKonva.Node
- support of globalCompositeOperation for
Konva.Shape
- getAllIntersections now works ok for Text shapes (konvajs#224)
- Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. konvajs#215
- support for
lineDashOffset
property forKonva.Shape
.
textDecoration
ofKonva.Text
now supportsline-through
- new align value for
Konva.Text
andKonva.TextPath
:justify
- new property for
Konva.Text
andKonva.TextPath
:textDecoration
. Right now it sports only '' (no decoration) and 'underline' values. - new property for
Konva.Text
:letterSpacing
- new event
contentContextmenu
forKonva.Stage
align
support forKonva.TextPath
- new method
toCanvas()
for converting a node into canvas element
- changing a size of
Konva.Stage
will update it in async way (viabatchDraw
). shadowOffset
respect pixel ratio now
- Fixed bug when
Konva.Tag
width was not changing its width dynamically - Fixed "calling remove() for dragging shape will throw an error"
- Fixed wrong opacity level for cached group with opacity
- More consistent shadows on HDPI screens
- Fixed memory leak for nodes with several names
- refresh stage hit and its
dragend
getClientRect
calculations
- new properties for
Konva.TextPath
:letterSpacing
andtextBaseline
.
- Prevent throwing an error when text property of
Konva.Text
= undefined or null
- Better hit function for
TextPath
. - Validation of
Shape
filters.
- Fixed "Dragging Group on mobile view throws "missing preventDefault" error" #169
- Fixed #166 bug of drag&drop
- new property of
Konva.Shape
-preventDefault
.
- Fixed some typescript definitions
Konva.Text
will interpret undefinedwidth
andheight
asAUTO
- you can now unset property by
node.x(undefined)
ornode.setAttr('x', null)
- Bug fix for case when
touchend
event throws error
- Bug fix for case when
touchend
event throws error
- Custom clip function
- fixes in typescript definitions
- fixes for bug with
mouseenter
event on deep nesting case
- typescript definition in npm package
- [email protected], [email protected], [email protected] support
Konva.Path
will be filled when it is not closedAnimation.start()
will not not immediate sync draw. This should improve performance a little.- Warning when node for
Tween
is not in layer yet. removeChildren()
remove only first level children. So it will not remove grandchildren.
batchDraw
will do not immediatedraw()
- fix incorrect shadow offset on rotation
batchDraw
function works less time now- lighter npm package
- repair
cancelBubble
event property behaviour - fix wrong
Path
getClientRect()
calculation - better HDPI support
- better typescript definitions
- node 0.12 support
- more universal stage container selector
mousewheel
event changed towheel
- correct
Konva.Arrow
drawing. Now it works better. - Better support for dragging when mouse out of stage
- Better corner radius for
Label
shape contentTap
event for stage
- event delegation. You can use it in this way:
layer.on('click', 'Circle', handler);
- new
node.findAncestors(selector)
andnode.findAncestor(selector)
functions - optional selector parameter for
stage.getIntersection
andlayer.getIntersection
- show warning message if several instances of Konva are added to page.
moveTo
and some other methods returnthis
getAbsolutePosition
support optional relative parent argument (useful to find absolute position inside of some of parent nodes)change
event will be not fired if changed value is the same as old value
- RGBA filter. Thanks to @codefo
stroke
andfill
support forKonva.Sprite
- Correct calculation in
getClientRect
method ofKonva.Line
andKonva.Container
. - Correct
toObject()
behaviour for node with attrs with extended native prototypes - Fixed bug for caching where buffer canvas is required
- Dragging works much better. If your pointer is out of stage content dragging will still continue.
Konva.Node.create
now works with objects.Konva.Tween
now supports tweening points to state with different length
to
will not throw error if noonFinish
callback- HDPI support for desktop
- Fix bug when filters are not correct for HDPI
- Fix bug when hit area is not correct for HDPI
- Fix bug for incorrect
getClientRect
calculation - Repair fill gradient for text
- context wrapper is more capable with native context.
So you can use
context.fillStyle
property in yoursceneFunc
without accessing native context. toDataURL
now handles pixelRatio. you can passconfig.pixelRatio
argument- Correct
clone()
for custom nodes FastLayer
can now have transformsstage.toDataURL()
method now works synchronously. Socallback
argument is not required.container.find(selector)
method now has a validation step. So if you forgot to add#
or.
you will see a warning message in the console.
- new
Konva.Image.fromURL
method
fillRed
,fillGreen
,fillBlue
,fillAlpha
are deprecated. Usefill
instead.strokeRed
,strokeGreen
,strokeBlue
,strokeAlpha
are deprecated. Usestroke
instead.shadowRed
,shadowGreen
,shadowBlue
,shadowAlpha
are deprecated. Useshadow
instead.dashArray
is deprecated. Usedash
instead.drawFunc
is deprecated. UsesceneFunc
instead.drawHitFunc
is deprecated. UsehitFunc
instead.rotateDeg
is deprecated. Userotate
instead.
- cache algorithm has A LOT OF updates.
scale
now affectsshadowOffset
- performance optimization (remove some unnecessary draws)
- more expected drawing when shape has opacity, stroke and shadow
- HDPI for caching.
- Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to
cache
method for all buildin Konva shapes. (only for your customKonva.Shape
instance). Tween
now supports color properties (fill
,stroke
,shadowColor
)
- new methods for working with node's name:
addName
,removeName
,hasName
. - new
perfectDrawEnabled
property for shape. See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html - new
shadowForStrokeEnabled
property for shape. See http://konvajs.github.io/docs/performance/All_Performance_Tips.html - new
getClientRect
method. - new
to
method for every node for shorter tweening
- Bug Fixes
- browser crashing on pointer events fixed
- optimized
getIntersection
function
- Enhancements
container.findOne()
method- new
strokeHitEnabled
property. Useful for performance optimizations - typescript definitions. see
/resources/konva.d.ts
Differences from last official KineticJS
release
-
Bug Fixes
strokeScaleEnabled = false
is disabled for text as I can not find a way to implement thisstrokeScaleEnabled = false
for Line now creates a correct hit graph- working "this-example" as name for nodes
- Konva.Text() with no config will not throw exception
- Konva.Line() with no config will not throw exception
- Correct stage resizing with
FastLayer
batchDraw
method forFastLayer
- Correct mouseover/mouseout/mouseenter/mouseleave events for groups
- cache node before adding to layer
intersects
function now works for shapes with shadow
-
Enhancements
cornerRadius
of Rect is limited bywidth/2
andheight/2
black
is default fill for text- true class extending. Now
rect instanceOf Konva.Shape
will return true - while dragging you can redraw layer that is not under drag. hit graph will be updated in this case
- now you can move object that is dragging into another layer.
- new
frameOffsets
attribute forKonva.Sprite
- much better dragging performance
browserify
support- applying opacity to cached node
- remove all events with
node.off()
- mouse dragging only with left button
- opacity now affects cached shapes
- Label corner radius
- smart changing
width
,height
,radius
attrs for circle, start, ellipse, ring. mousewheel
support. Thanks @vmichnowicz- new Arrow plugin
- multiple names:
node.name('foo bar'); container.find('.foo');
(thanks @mattslocum) Container.findOne()