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
2
votes
1 answer

Selecting multiple objects using the hitbox when drawing a box in konvajs

I'm currently trying to select multiple objects (specifically lines) and adding them to a Group/Transformer by drawing a box. To do this, I followed this very helpful stackoverflow question. After implementing it, I wasn't really happy with the…
elco45
  • 220
  • 1
  • 11
2
votes
1 answer

react-konva dragBound a zoomable stage

I am trying to make an application with react-konva in which an image covers the entire stage and the stage is draggable and zoomable. So I am looking for a way to bound the drag to the edges of the image. I looked at this demo and added a…
Nadeem Haider
  • 160
  • 1
  • 12
2
votes
1 answer

Using Konva, how can I select and transform images?

I am quite new to javascript, and I have been following tutorials at https://konvajs.org/ to help me learn their library. I am currently trying to make it so you can load and select local images to move, resize, and rotate them. This is the code I…
moon
  • 21
  • 2
2
votes
1 answer

How to implement the dragBounfunc, boundBoxFunc of a Tranformer Rectangle and in React Konva?

I'm trying to draw a rectangle on an image with React Konva, and get the coordinate of its 4 corners. I have calculated and return the coordinate of 4 corners quite accurately but the problem is I still couldn't implement the dragBoundFunc (to bound…
Bad Son
  • 131
  • 2
  • 16
2
votes
1 answer

Render Image from database dynamically on react-konva

Im trying to do a RPG table using react-konva and I coudnt render images from database dynamically user the hook useImage, Its now work inside the map. const imagens = tokens && tokens.tokens && tokens.tokens.map(item => item.image) const…
Rogerio Azevedo
  • 786
  • 2
  • 13
  • 32
2
votes
1 answer

Best strategy to mimic object-fit / object-position property with konva images

Assume we have a 1000x1000 image drawn onto canvas, and set konva image size to something like 500x700. Is it possible to mimic html tags object-fit property in konva so we can tell image object to fit image in cover / contain mode.…
Ilja
  • 44,142
  • 92
  • 275
  • 498
2
votes
1 answer

How to delete a konva shape/image , when using node.destroy()

While using konva I am using a button to add a shape multiple times on to my Stage using something similar to document.getElementById('Rect').addEventListener( "click" , function () { let layer = new Konva.Layer(); let item…
Akshat Tulsani
  • 101
  • 1
  • 8
2
votes
1 answer

How to create a video component with vue-konva?

With konva.js you can create video components on your canvas. Here you can see the example in the docs (https://konvajs.org/docs/sandbox/Video_On_Canvas.html). Now I'm using vue-konva and there is no component to create a video on the canvas. You…
tomzinho
  • 47
  • 1
  • 6
2
votes
1 answer

How can I call hide() on an object on the screen using vue-konva?

What is the object that is containing the v-xxx item (v-circle for example)? I want to simply call hide() on that object, and thought may be ref plays a key roll, but that was not successful (got this.$refs.testCircle.show is not a…
Shintaro Takechi
  • 1,215
  • 1
  • 17
  • 39
2
votes
1 answer

Can I store custom data values on a Konva.Image() object?

I have a Konva layer with some creature Image objects on it. I would like to store custom data values (hp and time) on these objects so when I serialize the container these data values would appear in the json. How can I achieve that? var creature…
2
votes
2 answers

KonvaJS connect squares and correct line placement?

So I am building a UML drawing tool with KonvaJS and KonvaReact, for that I need to connect shapes with lines. I saw the tutorial on the website on connected objects https://konvajs.org/docs/sandbox/Connected_Objects.html. They use a function…
user11534547
2
votes
1 answer

Using a background image in Konva Layer or Stage

How can I add a background image to my Stage or Layer when using Konva with VueJS? I have tried applying fillPatternImage in config on both layer and stage with no effect. I can't find anything on this in the docs, except maybe adding a big…
ajthinking
  • 3,386
  • 8
  • 45
  • 75
2
votes
1 answer

Animating a GIF on Canvas using react-konva

I am trying to create a UI for an application using react. I have am using react-konva for creating a 2D canvas. I have figured out how to import an image onto this canvas but am having trouble trying to animate a gif. There is documentation for how…
SSPdude
  • 959
  • 1
  • 7
  • 11
2
votes
1 answer

KonjaJs saving background image with toDataUrl

I'm using konvajs ( https://konvajs.org ) to create a web page where user can drag drop furniture images into a canvas with background image. User can then click a submit button, i call stage.toDataUrl() , store it in a textarea and save to…
2
votes
0 answers

React Konva Transformer Error "Cannot read property 'getStage' of undefined"

I'm using Konva 4.0.18 within a React 16.8. Application, which works well so far in the Standalone (CRA). When integrating this working solution into an existing Application Frame I'm facing an error which appears on transforming the rectangle (and…
Raoul S.
  • 21
  • 4