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

Guides snapping in wrong location after stage drag

I followed the guide on making snapping rulers, but I have additional functionality. The issue is that after dragging stage, the rules appear in the wrong location. I have tried looking, but can't find anything to use for e.g. something like an…
ifh
  • 171
  • 2
  • 10
2
votes
2 answers

Play video on Canvas in React Konva

Building off of Konva documentation on how to render a video to the canvas, I would like to play the video by accessing the video reference directly from the Konva.Image instance. Below is a contrived example to simulate my goal of playing the video…
fitzmode
  • 1,007
  • 1
  • 18
  • 29
2
votes
2 answers

How to add border-radius to react-konva Image object?

I have an Image component in react-konva and want to add border-radius: 8px. Which is the easiest way?
dmraptis
  • 909
  • 1
  • 10
  • 22
2
votes
1 answer

Vue Typescript Konva. Canvas onClick throws "Uncaught SyntaxError: Function statements require a function name"

I doubt this is a Konva specific question but since I am using the library as the basis of my example I wanted to include the bare minimum of my code to replicate this. Whenever the onMouseDownHandler (and in my full code onMouseUpHandler as well)…
SamuelB
  • 157
  • 9
2
votes
1 answer

How can I add a border to my react-konva shape?

I have a React project with TypeScript. I'm using the react-konva package to draw some shapes. How can I add to my shape a border like at HTML (border: 1px solid black)? My code:
Vladimir Arkhangelskii
  • 120
  • 1
  • 11
2
votes
3 answers

Is there a way to add external DOM objects(i.e.

I am trying to incorporate dynamic images to Konva. The plugin I am using is Apache Echarts. The container of these images is usually a div element. Is there a way to add the div to Konva layer?
wan
  • 51
  • 6
2
votes
1 answer

Konva.js dotted stroke around Img element with text

I'm new to Konva.js lib, I implemented drag and drop of the img inside the canvas element, I would like to point user that the img is draggable so I would like to do something like this -> Any Ideas how to do this inside Konva.js ? Thanks!
Markuz Shultz
  • 678
  • 3
  • 9
  • 22
2
votes
1 answer

How to add base64 image in konvajs.image source

I'm trying to add the base64 image into the konvaJS image, but not able to add it. If someone can help me to do this it would be great. Please check my code, var stage = new Konva.Stage({ container: 'imgId', width: width, height:…
Sunil Dora
  • 1,407
  • 1
  • 13
  • 26
2
votes
1 answer

Konva infinite grid in React

i,m trying to learn how to use canvas via a package react -konva. I fount the exact thing what i nead write in javascript but i nead to have it like react component and add images where rectangles are on button click. Can anyone help me to…
Mick
  • 21
  • 1
  • 4
2
votes
2 answers

KonvaJS - No transformer update after group.clip()

About the issue I'm working on a graphics editor built with konva.js After hours of research, I cannot get the transformer to adjust to the clipped size of a group Details I have a group that defines a simple clip area, and within this there are 2…
mika
  • 49
  • 8
2
votes
2 answers

How to add an id to canvas generated by Konva?

Is there a way to somehow add unique id to the canvas generated by konva? Its nested inside the 'container' div and one more div. It's pretty difficult to get to it, would be much easier if there would be a way to add id to it.
Patrickkx
  • 1,740
  • 7
  • 31
  • 60
2
votes
1 answer

React-konva double connected objects with arrow

I'm trying to expand the Connected Objects demo by allowing two nodes (shapes of Circle class) to be double referenced (A connects to B with Arrow1 and B connects to A with Arrow2). I work with react-konva package. I have implemented a demo on Code…
Charles Nikolopoulos
  • 35
  • 4
2
votes
2 answers

How to choose transparent for fillRadialGradientColorStops of KonvaJS Rect?

I'm trying to use Konva.Rect as overlay for image filters. When using radial gradient with transparent color stops, on IOS simulator it works perfect but on device it doesn't recognize transparent and fills it with solid color. I tried using…
she hates me
  • 1,212
  • 5
  • 25
  • 44
2
votes
1 answer

2D/3D CAD design in JavaScript

I am having 2D design in microstation and I wanted to represent this design in web using any tool(javascript/Unity 3D or any other) where the web tool will not have all the functionality but basic functionality like reshaping or adding a new shape…
techipank
  • 432
  • 4
  • 17
2
votes
1 answer

React-Konva Custom Shape using arcTo renders incorrectly

I am using Konva with Konva-React to draw a simple custom shape consisting of two perpendicular lines joined by an arc. The API documentation for custom shape states that we can use the renderer to access the HTML5 Canvas context. As such I have…
Jeff Pirie
  • 71
  • 6
1 2 3
…
65 66