Questions tagged [konvajs]

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications.

Homepage: http://konvajs.github.io/

An object oriented HTML5 Canvas JavaScript framework with a well-documented API, along with tutorials and labs to cover most of the basic needs.

Konva supports node nesting, layering, caching, serialization, deserialization, animations, transitions, filters, custom shapes, configurable drag & drop, and more.

Multiple Canvases are used to create a high performance animation and event detection system. Konva also utilizes a virtual node system which allows developers to create hierarchies which resemble familiar HTML DOM structures and use familiar selectors (eg. '#foo') to manipulate nodes.

Konva allows you to draw shapes onto the stage, add event listeners to them, group them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

986 questions
1
vote
1 answer

How do I crop a konva image when it has been resized?

In my project, I have a konva canvas where I can add items. I default these item images to a height and width of 200. When trying to apply a crop to the item, the crop ignores the resized image dimensions. It crops the image size to the correct…
chonglawr
  • 201
  • 1
  • 3
  • 15
1
vote
0 answers

TypeError: Konva.Stage is not a constructor

I cannot find the reason of this error anywhere. On runtime I get the following error: TypeError: Konva.Stage is not a constructor at file:///[path]/src/index.ts:40:15 at ModuleJob.run (node:internal/modules/esm/module_job:197:25) at async…
47ndr
  • 583
  • 5
  • 23
1
vote
1 answer

including konva.js 2D drawings in reveal.js slides using anything plugin

I am new to reveal.js and have tried to include a konva.js 2D drawing to my slides. I modified the provided sample codes of anything plugin explaining how to include d3.js charts in slides to do that, but my work failed and nothing showed up in the…
1
vote
1 answer

Konva (react) - Group draggable and child drggable

I want to have a group which is draggable. Inside the group I have a child which is also draggable. Currently dragging the group works properly. But sometimes the child is not selected properly when I start drag. And when it does start dragging, it…
Jellohouse
  • 165
  • 3
  • 12
1
vote
1 answer

Performance issue when dragging/zooming high resolution image in KonvaJS canvas

I am currently loading a rather large image (15000x10000) into a konva canvas. The canvas is draggable in another canvas. The image is not drawn if parts of it leave the view of the browser. The main problem is that the dragging is not smooth when…
lef
  • 67
  • 4
1
vote
1 answer

How to handle with images (overflow, draggable area, etc) on Konva js stage?

I am trying to create a stage using konva.js. Basically, I need to add two (at least) or more images on the stage based on some layouts. Example: I have a layout that splits the stage area verically into two similar groups. Each group has one…
gdim
  • 203
  • 1
  • 4
  • 13
1
vote
1 answer

Is there a way to scale the text fontsize using react konva on transform end

I have the following code below where once the text has been transformed on the screen the font size has gotten bigger but when i log fontsize it is the exact same as before.Is there anyway to get the updated fontsize as when I reload the page after…
1
vote
1 answer

KonvaJS different strokes

I have a rectangle in KonvaJS: How can I made…
1
vote
0 answers

Konva.js How can I resize the image with fixed position?

I'm trying to resize image with Transformer. The problem lies that when the image is resized, the image is not fixed and moves as much as it is reduced in that direction. For these reasons, I removed offset offsetX={image ? image.width / 2 : 0}…
JiHyun Kim
  • 33
  • 3
1
vote
1 answer

Konva Image on heroku server eats RSS Memory

I have been working on a Discord bot to generate image attachments and send them into channels; and it all works a treat. However I have now encountered a problem in that when I use images, and in this case 32 images for an attachment the 'RSS'…
Yin117
  • 31
  • 7
1
vote
1 answer

How to detect a collision between an Image and a Text object using Konva JS

I am trying to build a simple app in which the user drags a word onto the corresponding image. When the user "drops" the word on the image a collision needs to be detected. I have a console.log message which should only log when this happens. …
KathA
  • 33
  • 5
1
vote
1 answer

Is there a way to prevent 'dragend' event in parent Konva.Group when a child is dragged and both child and parent are draggable?

I have a Konva.Group which is draggable. Within this group I add another Konva.Group which has yet another draggable Konva.Group. So the relationship is like this: parent group -> child group -> child group Now when I try to drag my last draggable…
1
vote
1 answer

Creating a custom shape in konva.js using path2d?

Using d3 for some shape calculations, then drawing with Konva.js. Creating a new shape from a svg path string. The shape is drawn, but fillStrokeShape doesn't seem to apply any styles. The documentions says: We can use the renderer to access the…
Ivan Bacher
  • 5,855
  • 9
  • 36
  • 56
1
vote
1 answer

Konvajs/Vue-Konva connect the shapes using the connector dynamically

I am using Konvajs/Vue-Konva within my Vuejs/Nuxt application. Using Konva I am creating the Rect shape dynamically at run time. Now I would like to use some sort of Connectors to connect the different Rect Shapes so that I can have the logic of…
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
1
vote
1 answer

Konvajs/Vue-konva add Text/Label to each of the created Rect shape

I am using Konvajs/Vue-Konva within my Vuejs/Nuxt application. Using Konva I am creating the Rect shape dynamically at run time. I would like to know if there is a way to add a Text/Label within each of the shapes. I want to add a name to each of…
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98