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”
Author Archives: VanquishedWombat
Konva – editing path points
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”
Konva – path point simplification with Simplify.js
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.
Konva – What the hell did the Transformer actually do to my shape?
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.
Konva – React & Vue reactivity considerations HTML Canvas libs
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.
Konva – focus border around a group
How can we make a focus border around the shapes in a group whilst the group and shape are draggable? A transformer could do it, or we could add a rect to the group…
Konva – handy trick to apply opacity to rect fill but leave stroke unchanged
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.
Konva – text with block background
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”
Konva – trap an image in a framing shape
So you have a space where the user is allowed to upload an image. You need to let the user position the image but you need to clip off any overflow. Here’s an approach…
Konva – HTML5 canvas blur & spotlight effect
Based on the learnings from my clip regions with holes article I thought I would cover how to make a spotlight effect since it has been asked for a few times on the discord channel. here we go…