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
2
votes
2 answers

KonvaJS connect squares and correct line placement?

So I am building a UML drawing tool with KonvaJS and KonvaReact, for that I need to connect shapes with lines. I saw the tutorial on the website on connected objects https://konvajs.org/docs/sandbox/Connected_Objects.html. They use a function…
user11534547
2
votes
1 answer

Using a background image in Konva Layer or Stage

How can I add a background image to my Stage or Layer when using Konva with VueJS? I have tried applying fillPatternImage in config on both layer and stage with no effect. I can't find anything on this in the docs, except maybe adding a big…
ajthinking
  • 3,386
  • 8
  • 45
  • 75
2
votes
1 answer

Konva serialization and deserialization of a custom shape

How do you serialize and deserialize a custom Konva Shape? Konva allows you to create a custom shape with the sceneFunc, but when you store it to JSON and load it back, how do you know what custom shape it is?
Frik
  • 486
  • 6
  • 8
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

Getting react__WEBPACK_IMPORTED_MODULE_0__.useId in react when creating polygon bounding annotation

I am getting TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useId in my react app. I am using konva and react-konvathat lets a user to draw a polygon bounding annotation following this blog…
realtouseef
  • 11
  • 4
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…
saiyed irshad
  • 54
  • 7
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
1 answer

How do I Create a Vertical Arrow with Text Annotation with Dynamic Text Positioning in Konva?

I'm trying to draw some geometric shapes in the user interface via Konva and react-konva. One basic element is a vertical arrow with annotated text to show the dimension of a shape, as shown below: It's created by the following code snippet, which…
比尔盖子
  • 2,693
  • 5
  • 37
  • 53
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

Problems when applying react-konva rotation

I want to move the shape and change the direction using the arrow key. Moving was successful. But When 'rotation' is applied, the 'text' position changes. How do I keep the text position and only change the orientation of the…
zhdwl
  • 13
  • 3
1
vote
1 answer

React Konva: onMouseOver doesn't trigger when a shape above it is removed?

I have a project with two on top of each other. The at the bottom changes its color when the cursor is hovering over it. export const BottomSquare = () => { const [color, setColor] = useState("green"); return (
Riexn
  • 113
  • 2
  • 11
1
vote
2 answers

After the element is rotated or scaled by transformer, the element cannot be rotated around the center manually

There is an element in the canvas. Each time I click the button, I want it to rotate 90 degrees around its center point. So when I judge that the origin of this element is not at the center point, I will manually specify its origin to the center…
wen
  • 11
  • 2
1
vote
0 answers

How to stack rotations with different offsets? Is there a way to "freeze" transformations (rotation and offset) before applying new values?

I'd like to change rotation and offset of a shape multiple times. I need to "freeze" transformations before applying new rotation and offset, so that when I change offsetX, the shape will move horizontally, not along the X axis of a shape at an…
ellis
  • 181
  • 10
1
vote
2 answers

How to use svg imported from React Component with use-image in konva?

How to use svg imported from React Component with use-image in konva? I try import svg from Component but it's not working any way and it's not return any error. Same svg code imported from .svg file works good but i want to pass props to show in…
v0p3r
  • 43
  • 5
1 2
3
…
17 18