Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
So you have a shape with some transforms applied - you need to apply the same transforms to another shape. How do you do that ?
I had always created Konva stages by setting the container parameter to the selector of an existing HTML DIV element. Then I needed to create an image from canvas elements as a one-off which I would then draw into the main stage. So how to do that without having a physical, in-the-DOM container DIV?
The Konva HTML5 canvas lib has a very useful feature that can spit out the transformations applied to a shape, and which we can borrow to rotate points without math. Lets take a look...
So I spent some time building a rich text editor as a side project. Here's some of what I learned which I'm sharing so you can avoid the bear traps and subsequent pain!
When we exchange position and size information with Konva, multiple coordinate systems come into play. We normally use the canvas or stage coordinates but others are available. Knowing which to use will save a lot of frustration later. Lets investigate...
I mistakenly thought that a math-based mouse pointer hit testing approach might be faster than Konva's built-in approach. In the end I had to agree that Konva has it covered and there's no optimisation to be done. Here's the explanation...
A question I see sometimes is how can we know when the layer gets redrawn. Firstly I recommend that you don't sweat about this - Konva does a perfectly good job without you interfering. But if you absolutely have to there is a way. Let's take a look...
So you need undo-redo for your project. The uniqueness of your app means there's no perfect out-of-the-box solution. But the good news is that you're here and this blog describes an overall approach that you can adapt to meet your needs.