Stack Overflow
Stack Overflow

Questions tagged [konva]

Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

270 questions
1
vote
0 answers

KonvaJS: How to know updated width and height of shape after applying transformation using transformer

After applying transformation using transformer on a shape, its scaleX and scaleY properties are changed where as its width and height property remains the same. But I need to calculate the updated width and height of shape after applying…
Dijkstra Algorithm
  • 61
  • 7
1
vote
0 answers

How to fix wrong act() around your test interactions

I created an app with create react app. npx create-react-app someapp --template typescript Then I installed konva and react-konva yarn add konva react-konva The App.tsx has been reduced to a minimum. import { Stage, Layer, Rect, Circle } from…
user1791139
  • 606
  • 1
  • 11
  • 27
1
vote
2 answers

How do I simulate background-position behavior with Konva.Image?

I have about 50 images that need to be loaded before I can show my stage. I'd like to reduce the number of requests and load one big sprite that contains all the images I need and then use it everywhere but with the right offset. Just like we do in…
Mikhail Dudin
  • 459
  • 5
  • 15
1
vote
2 answers

Place node centred on rotated note

I have following example stage. const rectangle = new Konva.Rect({ width: 300, height: 100, x: stage.width() / 2, y: stage.height() / 2, fill: 'blue', rotation: 140 }); layer.add(rectangle); layer.draw(); const tooltip = new…
isADon
  • 3,433
  • 11
  • 35
  • 49
1
vote
1 answer

How to set filters properly in Konva?

I have a function that gets hex color and returns an object in the following format: { brightness: "88%" contrast: "94%" hue: "165deg" invert: "42%" saturate: "2371%" sepia: "12%" } I've tried this, but the color is wrong.
Sentenzo
  • 41
  • 1
  • 6
1
vote
1 answer

react konva keep one layer fixed while zoom on stage

I'm developing a map (green rectangle ) and a path drawn over it ( black lines ) in Konva: The map has a fixed dimensions while the path is get from an API call. I want to be able to zoom the map either with the mousescroll or by clicking the…
Andrea Barnabò
  • 534
  • 6
  • 19
1
vote
1 answer

How to set the initial dimensions of a transformer when applying it on a group having clip properties in Konva?

I have a Konva.Group with a few nodes to which I have set clip properties to limit what is seen. I'm applying Konva.Transformer to the group and the problem I'm facing is that the Transformer encloses the entire group, even the unclipped portion.…
mplusr
  • 151
  • 15
1
vote
1 answer

Resize rectangle by steps in Konva

I would like to ask for some help please. In my app the rectangles need to stick to a grid. I found a solution to follow the grid when they are dragged, but in case of resize I'm at my wit's end. It takes 5 steps to reach one grid cell size with…
catperson
  • 11
  • 1
1
vote
1 answer

Increase Arrow from both sides in React-Konva

I'm drawing a Line with React-Konva. Once the Line is drawn, I would like to display an Arrow (with pointers on both sides) underneath that Line. That Arrow should be longer (both sides) than the Line but should point the same direction. What I've…
Barbell
  • 194
  • 1
  • 6
  • 19
1
vote
3 answers

Hide transparent image from download while using React Konva

I want to download only the papayawhip square box without the transparent image behind it. I am using React Konva. I have the following code: import * as React from "react" import { Stage, Layer, Rect } from "react-konva" import type { Stage as…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
1
vote
1 answer

Migrating from webpack/CRA to snowpack: Uncaught SyntaxError: The requested module X does not provide an export named Y

Please help me understand what is causing the error message below. I'm trying to migrate a project to Snowpack, having used create-react-app previously. In this project I am using a library called react-konva for some canvas stuff. This library…
Ludwig Nagelhus
  • 177
  • 8
1
vote
1 answer

Rotate a group of shapes containing text whilst keeping text centered and horizontal

This is probably just maths. I am using Konva to dynamically generate shapes, which I'm storing as a label. So there's a label which contains a textElement and a rectangle. I want to make sure text in that rectangle is always a) Centered…
Josh
  • 186
  • 1
  • 3
  • 17
1
vote
1 answer

Text's `fill` color is overriden by `stroke` in Konva

I have some Konva Text node, whose fill attribute is set to black and stroke is set to some other color. In my canvas it looks as expected. The problem happens when I convert the canvas to base64 image to download it as an image file - in that case…
Vardan
  • 55
  • 1
  • 10
1
vote
1 answer

KonvaJS Flip Text Across Top of Circle

I have a circle and I want to draw some curved text across the top. Currently I am generating the circle and the text-path, however the text faces towards the outside of the circle and appears upside down to the reader. How do I flip the text to the…
ubiQ
  • 791
  • 2
  • 7
  • 17
1
vote
1 answer

JS: draggable object speed

I want to slow down speed of the draggable HTML object to make it kind of lazy dragging. Is there any way to implement this feature with native HTML/CSS? Or may be there are some existing JS libraries which have such ability? Can't find any library…
mr.boris
  • 3,667
  • 8
  • 37
  • 70
1 2 3
…
17 18