Konva – Point & shape collision detection

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”

Konva – Star rating control

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”

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 – 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”