Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
One of the features that Konva provides is the dragBoundFunc which lets us confine a shape within a rect. But how to make that work for a group where things can get a bit more tricky? Lets take a look...
Whether you need just a small section of a shape or the entire width and height of the view, getting snapshot images is quite straightforward once you know a couple of tricks - lets take a look at them...
So there you are with a shiny new group - with a couple of shapes added to it. Now you want to drag the group. Click-dragging the shapes will move the Group, but click-dragging the empty space doesn't - what gives?
The Konva group is a bit hard to pin-down, almost a normal shape but not quite. Its super-powers can be a bit challenging though once you understand a few fundamentals its got your back. Lets dive in...
The Konva transformer is brilliant at handling what would otherwise take a whole bunch of work to copy. But people either overthink it or don't know its full power and tunability. So lets investigate...
Using the click-drag-rect patterns to add or select objects visually is a staple of graphics UX - this is one way to do it with Konva. The trick is to keep everything relative to the stage. Lets take a look...
After getting a few shapes onto the canvas, folks start wondering about how to make the canvas play nice with their UI and the subject of scrollbars emerges. But Konva does not have automatic scrollbars on a canvas element, so what can we do...
So I'm writing various library components using TypeScript that are targeted at Konva and I want the components to be usable in Vanilla JS without being opinionated about where Konva's JavaScript is located. What?