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
0 answers

Table Management Features by Creating Shapes and Drag-and-Drop in React.js

I am building an application in React.js that requires users to create and manipulate floorplans with detailed table management functionality. The features I need to implement include: The features I need to implement include: Create a Floorplan:…
ali
  • 11
  • 3
1
vote
1 answer

KonvaJS two finger pan and zoom on Mac

I'm using KonvaJS (more specifically vue-konva), and recently I've switched to a Macbook. I'm trying to implement two finger scrolling and panning. I already have the mousemove/mouseup/mousedown event and that works with one click panning. I already…
Adam Silva
  • 1,013
  • 18
  • 48
1
vote
0 answers

Create frames and get coordinates of drawing in Konva React JS

I have the following code file App.js, using this code I am able to draw square/rectangle shape using mouse events. see working here : https://www.awesomescreenshot.com/video/18588785?key=8a5877587128b9d65b77999becd3f2e3 App.js File code: import…
Deep Kakkar
  • 5,831
  • 4
  • 39
  • 75
1
vote
0 answers

How can I recalculate the coord of point after (rotate, translate and scale)

There are two stages. Both include hall image. Hall image size is static but two stages dimension is dynamic. The image which is located in the middle of the stages and there are thousands of polygons on image. I draw several polygons on the first…
1
vote
1 answer

React konva custom shape drag

How to update position of a custom shape after drag? With other shapes e.target.position() works, but with custom shapes it returns position relative to original position when drawing the shape. I tried to update position by adding new coordinates…
Ted
  • 13
  • 2
1
vote
1 answer

Konva js provide stroke lists

I have checked Konva js documentation and can't find stroke lists. I want to implement like attached image to get dimension of image. Is konva js provides to display stroke list as well as get image dimension using konva js line tool ? I have…
1
vote
1 answer

Limited workspace in React-Konva

I work with React-Konva and am trying to make a limited size workspace (like in photoshop) with scalability. So that when you scale the workspace window starts to take up more and more space on the screen. But after writing the function, the…
Shell
  • 13
  • 4
1
vote
1 answer

How to detect Konva.Transformer anchor type in transform event

Is there any way to get anchor type ("middle-left", "middle-right", etc) in transform event of Konva.Transformer? Thanks. I need to add textnode(Konva.Text) actions when "middle-right" and "bottom-right" transform events. So I need to detect anchor…
Passion
  • 11
  • 1
1
vote
0 answers

Rendering Konva.js script to image in python

While generating a pdf in python using pdfkit, I am required to attach a diagram drawn using konva.js script to the pdf. I have attached the konva.js script to the html code string but the image is not being rendered into the pdf while generating.…
1
vote
0 answers

Drawing and closing a polygon in konva js

Draw Polygon I need help to draw a polygon and snap to a grid. I also would like to be able to change the dimensions after it has been drawn. Does anyone know where I can find information on how to do this in konva js. I have googled it but can't…
1
vote
1 answer

Small extra movement after dragging the Rect node. Is this a bug?

I'm trying to implement stepped positioning on canvas elements in KonvaJS. Here is the minimal, reproducible example I've created to see the problem better: https://codesandbox.io/s/autumn-wave-wkz4ut?file=/src/App.tsx Everything is fine if the…
Devwulf
  • 370
  • 4
  • 11
1
vote
1 answer

Prevent shape rotation by dragging in Konva

I'm using react-konva (Konva) and I need to prevent rotating the shape(rectangle) by clicking on corner point and dragging it over diagonal corner point. That will rotate the rectangle by 180 or -180 deg. Setting rotation=0 works only if you do…
Vejsil Hrustić
  • 179
  • 1
  • 7
1
vote
1 answer

Responsive position of a draggable element in React-Konva

I am using react-konva to try and make a tool where users can visualize and plan their frame wall. The user can choose a background, then chooses a frame size and different posters. It kind of looks like this: So far I have made a background image…
1
vote
0 answers

Avoiding anti-aliasing with round painting in react-konva

I am trying to create a app with Konva and react-konva where the user can freely draw anything he wants on the stage, but mainly to use the mouse as a pen or a erasor. The user can only use two colors: red and green. Although, the user have to see…
1
vote
1 answer

Is it possible to add filter to a group, which has many child nodes in it?

I want to make filters on a group, and all the child nodes can apply the filters at the same time. But I found the filters can only be added on one single node, like a Image or a Rect, can I make the whole page apply the filters? I want to do…
wangj
  • 11
  • 2