Konva - drawing arrows on a path
Ever needed to put a direction of flow indicator on some connector line? In this post I explain a simple approach to get that done.
Members only
Konva - text and web-fonts, use a font loader
The font loading process is a stumbling block for folks new to using web-fonts in conjunction with Konva.Text and in the canvas. In this short post I'll explain what the problem is, how to solve it, and provide links to sample code. Read on...
![JavaScript - my develop, build bundler setup with TypeScript & Vite [Part #2]](/content/images/size/w768/2024/09/compressed_cans.jpg)
JavaScript - my develop, build bundler setup with TypeScript & Vite [Part #2]
In part #1 I talked about setting up a Vite project from VSCode. That's only half the job because sooner or later you'll need to share what you made, and maybe one day even make it live. And let's not overlook testing.
Members only
![JavaScript - my develop, build
bundler setup with TypeScript & Vite [Part #1]](/content/images/size/w768/2024/09/clean_cans.jpg)
JavaScript - my develop, build bundler setup with TypeScript & Vite [Part #1]
When I moved over to TypeScript I could see the benefits but the code-transpile-test loop was way to slow, and I found a whole new world of pain in the form of bundlers. That was before I found Vite - since then my productivity is up and my frustration down. Here's why...
Members only
Konva - How to edit and save points on a line or polygon
Editing line points or vertices of a polygon is a recurring question I see in the Konva Discord. It gets tricky when the line or its parents are affected by transforms. Here's how to make a bulletproof solution that handles that.
Members only
Konva - Relativity and why your shapes aren't where you expect
We are often required to position shapes relative to each other - maybe circles mark points on a line - but then you move one of the shapes and update the others position but it doesn't make sense. The answer is relativity!
Members only
Konva - masked image
So you need to make an image mask. That means making a shape and drawing the image into that shape so that the area of the image outside the shape is cut off. But you can't use a path so clipping is off the menu. How to get the mask with composition operations or fill pattern image...
Members only
Konva - styling transformer anchors
One of the common requirements we see coming through the Konva Discord channel is modifying the stock Transformer anchors with popular requests being how to change the anchors shape and colors, and how use an icon for the rotation anchors. Lets take a look...
Members only