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

Konvajs custom shapes and transformers

What I am trying to achieve is showing the transformer around the custom shape itself. I took the code directly from the API docs for creating the custom shape and adding the transformer. The transformer works great for rectangles, circles, etc but…
0x33ccff
  • 33
  • 1
  • 3
3
votes
3 answers

How to have rounded corners for stage or layers in React Konva

Hi , I want my stage to look like below image and user will draw on it , my question is how can I do this with React-Konva ? I only saw cornerRadius property in rect. And also users actions should be with in the stage. thanks in advance
Roshan Fernando
  • 87
  • 1
  • 10
3
votes
0 answers

organizing MANY hexagons

im creating a boardgame, with a hexagon shaped tilebased map. i used konva to create the hexagons/polygons. the way i went about it was to just create a variable for each polygon, but this ended up as a 1000+ lines of code (as the map has about 50…
j a
  • 41
  • 7
3
votes
1 answer

Is there a way to define text inside a Konva.Rect Class by using only Konva.Rect class attributes?

I am using Konva.js in my project and I have a specific need to define text inside a draggable rectangle that was defined using Konva.Rect() class.Is there a way to achieve this without using a separate Konva.Text() or Konva.Label() class object…
Haris
  • 45
  • 5
3
votes
1 answer

Fitting Konva layer nodes into "viewport"

I am currently trying to create an algorithm that will center the viewport on the content present on the Stage. Lets say the stage is initiated and it looks like this I can get it to this point where the stage is centred over all shapes on the…
Tyler Churchill
  • 51
  • 1
  • 4
3
votes
1 answer

Canvas Shape Scaling

I'm using canvas with konva library and I'm trying to scale the canvas element. I can easily scale it down with CSS but the problem is the shapes that I have drawn in there are clickable. When the canvas scales down the elements do as well but…
Metzger
  • 93
  • 1
  • 13
3
votes
1 answer

How to set initial stage color in Konva?

I'm just starting with Konva and I wonder if there is a way to set the stage color? It is some kind of bright grey by default and I would like to change that, if possible, without having to add a rectangle and fill it.
Rob
  • 11,492
  • 14
  • 59
  • 94
3
votes
1 answer

Unable to render content with React-Konva

I've recently been getting the following error when trying to render a Stage with React-Konva: Cannot read property 'getPooled' of null at Object.componentDidMount. As of now, I've been unable to render anything at all using Konva. I'm using…
perennial_
  • 1,798
  • 2
  • 26
  • 41
3
votes
2 answers

Error when running tests while using konva

I am trying to get started in building a react application using konva, react-konva. I built a basic react component: import React, { Component } from "react"; import { Stage } from "react-konva"; import Square from "./Square.jsx"; class Map…
joek1975
  • 3,573
  • 5
  • 40
  • 44
3
votes
1 answer

Konvajs How to change image src dynamically

I created a Konva image like this var imageObj = new Image(); imageObj.onload = function() { var image = new Konva.Image({ x: 200, y: 50, image: imageObj, width: 100, height: 100 }); }; imageObj.src =…
abhiklpm
  • 1,603
  • 2
  • 16
  • 21
3
votes
2 answers

Unable to preventDefault inside passive Konva event listener due to target being treated as passive

I'm using the Konva.js@1.3.0 library (with React@15.4.2 and react-konva) to build a simple 2D game. When testing the app in Chrome all is well. However, when I open Dev Tools and switch to the Device Toolbar (to view the app on mobile-sized…
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
3
votes
1 answer

How to propagate a click event from a shape in the Upper layer to an image in the Lower Layer using KonvaJS?

Disclaimer: it may be considered this post is a duplicate of this post but I have demonstrated my need specifically. I have a case in my KonvaJS application where I need to propagate a click event from the Rectangle shape (that is a child of the…
Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
3
votes
0 answers

Diamond gradient in KonvaJS

I need to fill a diamond gradient using KonvaJS for a ring. The ring should look like the following image: I have used an instance of Konva.Arc with the following properties: fillRadialGradientStartPoint: 0, fillRadialGradientStartRadius:…
Vivek Kumar Shukla
  • 191
  • 1
  • 11
3
votes
2 answers

KonvaJS: event.preventDefault is not a function

Nowadays I am playing with KonvaJS. I have set a click event listener on a shape. When I click on shape, the listener is invoked. In my listener I am invoking event.preventDefault() method to stop triggering of other events. But when I do so it says…
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
3
votes
2 answers

Why there is no method draw() in KineticJS documentation?

I've spent hours googling about Kinetic.Layer.draw() method. All that I've found is use-cases - no documentation about how, when and why to use it. Maybe it's deprecated already? These are primary links which I use while learning and playing with…
sermolaev
  • 975
  • 11
  • 23
1 2 3
…
65 66