vue-konva
vue-konva copied to clipboard
Allow using custom Konva Shapes with vue-konva
First of all: thanks for the awesome library!
I have a few custom Shapes that are subclasses of Konva.Node. Currently I don't see a way of using those as components with vue-konva. But if KonvaNode would be part of the public interface and also if you could pass it a class instead of a string it would work.
Do you think that this is something you could add?
Take a look how other Konva nodes are registered. E.g. https://github.com/konvajs/konva/blob/master/src/shapes/Circle.ts#L59
Just do the same with your custom shape. Register it in Konva. And you should be able to use it in vue-konva
Thank you for the response. That solves the issue of passing the class instead of the string to the KonvaNode(...)
function for creating a component. But unless I'm missing something, the nodes that are converted to components is hardcoded here https://github.com/konvajs/vue-konva/blob/566a2e3218ba177e869c71f6d4794cad56320b52/src/index.js#L9 so registering the node with Konva would not change that. So that's why my thought was to add the KonvaNode(...)
to the public interface of vue-konva.
Ah, you are right. I missed that.
So there are two ways:
- Do not subclass Konva shapes. Using existing primitives and custom
Konva.Shape
instance. (recommended). - Refactor that code to make public API to register custom shape. Make a Pull Request.