Stack Overflow
Stack Overflow

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

How to implement undo/redo functionality for KovaJS in react?

What's the best way to implement undo/redo functionality for KovaJS in react? I see that each node has toObject() method used for serialisation of each canvas node. One easy implementation would be to serialize the object on each modification and…
Mihai Serban
  • 241
  • 3
  • 10
2
votes
1 answer

react-konva How to set stage width and height to be equal to its container?

I want to set the stage width and height to be equal to it's div container, in my case, it's the div with className "drawing-area" const Canvas = props => { return
0xh8h
  • 3,271
  • 4
  • 34
  • 55
2
votes
1 answer

Responsive canvas with React and Konva

I use React and Konva libraries to draw a simple line. But when i resize the screen, the line stays out of the screen. So, how can I make it responsive? This is my code: import React from "react"; import { Stage, Layer,Line } from…
Juan Menashsheh
  • 127
  • 1
  • 3
  • 6
2
votes
2 answers

KonvaJS crop and resize

I'm using KonvaJS to create a simple Image-Editor. As a base for the image resize function I used the code from the Konva Examples (Knonva JS Image Resize). But now I'm struggling with the implementation of a crop function. On a button click, I…
Lapskaus
  • 1,709
  • 1
  • 11
  • 22
2
votes
1 answer

Draw rectangle with mouse and fill with color on mouseup

I am using Konva library for drawing a canvas and dragging images onto it My question is how can I select a part of canvas and fill color to the selected portion using Konva 1) users select a portion by dragging mouse 2) fill color what he wants to…
siva somu
  • 21
  • 1
  • 2
2
votes
1 answer

react-konva How to change image after uploading?

I'm working on a small project that allows user to upload image and then the image will be displayed on a canvas. I'm using react-konva for this. I have a container component called DesignPage, which manages the state and pass event handlers to its…
0xh8h
  • 3,271
  • 4
  • 34
  • 55
2
votes
2 answers

Draw border edges of the Konvajs container Stage in html

I am using the Konvajs library. Am trying to put a border box around the main Stage element, but can't seem to make it work. The CSS only apply to the
and the Konva.Stage element does not seem to have specific properties for this. Is the only…
Frens
  • 149
  • 4
  • 11
2
votes
1 answer

Designing a gantt view with Konva

I am trying to build a gantt control with Konva (does it make sense to use Konva for this)? I have tried to sketch the control below: I was thinking of breaking down the Konvas stage as follows: One stage with 4 layers: activity names, timeline,…
BigONotation
  • 4,406
  • 5
  • 43
  • 72
2
votes
1 answer

Is it possible to catch the right click event on a shape/group in KonvaJS?

) I have a question about the KonvaJS. I am trying to figure out how to catch the right click mouse event on a shape. There are already some events for this kind of "event catching" but it seems to be that they are not for the shapes/groups. So,…
Xearox
  • 49
  • 2
  • 7
2
votes
2 answers

Vue.js Konva library to display a simple image, what am I missing?

So I went through the sample code listed on the vue-konva page. Although it samples creating shapes I understood it enough to try to display a simple image to start. Here is the base code. My question lies in how do I attach the actual image file to…
user1110938
  • 153
  • 4
  • 11
2
votes
1 answer

Typescript Konva class variable not in scope

I have an Ionic project that I am trying to use Konva.js on. The problem I am having is that one of my class methods is not being recognized in an inner function. I am trying to call a function once the user clicks a block of text (tossUpText), but…
Neil
  • 1,275
  • 11
  • 25
2
votes
2 answers

Konva JS. Change Image position, rotate

I'm adding an image. circle = new Image (); circle.src = '/img/logo.png'; circle.onload = function () { anyimage = new Konva.Image ({ x: 150, y: 150, image: circle, width: 106, height: 118 …
Konstantin A
  • 51
  • 1
  • 6
2
votes
1 answer

React-Konva Text Alignment and Wrapping not working

I am unable to align my text to center on my canvas, nor can I get the text to wrap to a new line when the length exceeds the length of the canvas. import { Layer, Stage, Text } from 'react-konva'; render() { return (
Mromzek
  • 23
  • 1
  • 5
2
votes
1 answer

Images do not appear completely until mouse click

I found a issue that images are not show like below. It's a canvas that I use konva.js. And the stage is draggable: true. I found the images will now show event if I click this canvas when draggable: false. It's a little like the canvas be reload…
Jay
  • 121
  • 2
  • 16
2
votes
1 answer

konvajs serialize stage containing images

I'm creating a custom label maker using Konvajs and everything was working perfectly until I tried to serialize the stage to JSON. The user creates their custom label in three steps. The first step they select a template image from our library that…
Robin Savinsky
  • 63
  • 7
1 2 3
…
65 66