A user recently had a query regarding how to get the pixel color data for a point on the stage. This is quite easy, but there’s a catch on high pixel density devices – think Apple devices like the MacBook and iPad. Here’s the solution… TLDR: Here’s the sample code – try it on yourContinue reading “Konva – Mouse position + pixelRatio will mess up your day”
Writing drag bound functions is easy with rectangular shapes like Konva.Rects and Konva.Images- but Konva.Groups have a few more unexpected challenges. Lets take a look at some of the assumption traps around the Konva.Group and see what we can do.
Coding a project that needs an undo-redo feature? Me too – here’s my thinking from the end of the development on the subject based on my learnings coding a rich text editor. Let’s take your code editor as an example. Whether it’s VS Code or NotePad++, if you you type a letter then delete itContinue reading “Thinking about an approach to do-undo-redo”
Someone asked about shape-point collision detection for the point under the mouse in a case where there are many shapes on the stage, and how to improve performance in relation to the Stage.getAllIntesections(), Stage.getIntersection() and Shape.intersects() methods. Here’s my explanation of those functions and an approach to improving hit detection. Just to be clear –Continue reading “Konva – Point & shape collision detection”
Someone on Discord asked it it was possible to make a star rating widget thing with Konva – the holes in the stars sounded like an interesting challenge. Here we go… TLDR: See the demo and code. This is a Vanilla JS solution, but @ivor adapted it for React here. The key technique for makingContinue reading “Konva – Star rating control”
I wondered how to edit the points on a path or line – here’s an answer. Both the Konva Line and Path use a list of points to draw themselves. The Line takes a simple array of x & y values whilst the Path wants a data definition composed of SVG drawing commands. I choseContinue reading “Konva – editing path points”
Re-drawing a hand drawn line with too many points can hit performance. Using a lib like simplify.js we can reduce the points considerably to get a performance boost.
So what, you grabbed a transformer handle and stretched the rectangle and now you don’t understand what gives with the width and height – they didn’t change? You can see the freekin size changed but why are the width & height the same as before? Huh ? Stop the world, I wanna get off. Ok, lets talk about it.
This came up in a Discord discussion where someone asked why the objects on the canvas always changed regardless of the fact that one of their objects was set to be non-reactive.
Ever needed to have a rect with alpha applied to the fill bit not the stroke – here’s how! Before I found this excellent example that Anton mentioned in an old Github issue, I would have solved this challenge with multiple rects – one for the stroke and one for the fill. But this simple solution needs only one rect.
Giving text a block color background with margin and padding is catered for well in CSS but not so easy in Konva where there is nothing as capable as CSS built-in. Here’s some code to give you that feature. TLDR: Here’s the demo CodePen… I should mention that Konva provides the ‘textBackgroundColor’ attribute, but thisContinue reading “Konva – text with block background”
In an earlier post I covered how to rotate a shape around any point on the canvas without using offset. In this post I’ll look at how to rotate and scale a rectangle so that it entirely covers the space it occupied before rotation. This is useful if you ever have to rotate an imageContinue reading “Konva – Rotating a rectangle to cover another”
Used to using CSS selectors to work on the HTML DOM and wondering if there is anything similar in Konva? Here’s your answer!
Something went wrong. Please refresh the page and/or try again.
Follow My Blog
Get new content delivered directly to your inbox.