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

How to obtain ID of Konva Label from Konva's 'dblclick' event

I'm looking for a way to obtain ID (123 in the code below) of a Konva Label ("Hello World!" in the code below) from Konva's 'dblclick' event. I could obtain ID (321 in the code below) of a Konva Image (Konva's LOGO "K" in the code below) from both…
Rio
  • 59
  • 6
1
vote
2 answers

Is there any way to export as a SVG on Konva

In my project I am using konvajs. Is there any way to export as a SVG image ?
mkaya387
  • 368
  • 2
  • 10
1
vote
1 answer

How can I fill a konva rect with fillPatternImage in React or create an infinite grid with the same svg image in React

I've already created the masonry grid with konva and React here is the example of how far I have come: https://codesandbox.io/s/masonry-grid-image-konva-react-cp73d Docs about Konva Image in React https://konvajs.org/docs/react/Images.html I need to…
Vrokn
  • 13
  • 1
  • 3
1
vote
2 answers

Select + hold and drag a shape should scroll horizontally or vertically

I want a shape i.e. Rect select using the mouse (left hold and drag) should scroll it horizontally if goes to right side and if goes to bottom should scroll vertically in React Konva. If anyone has used trello, i'm trying to emulate the ability to…
Nidhi Dadiya
  • 798
  • 12
  • 31
1
vote
0 answers

Konva.js 2D canvas - mouse down function on dynamically loaded elements only works for the last element loaded

I am using Konva js as a canvas library. I store each added element individually in a database and load them once the user enters the editor again. To achieve this I iterate over an object containing each node in json format. I am facing the problem…
Jakob
  • 195
  • 4
  • 12
1
vote
0 answers

Unable to re-size the video windows by using konva

I am including the video in a webpage and i don't want to use the video control loops. So i wrote the normal js to pause ,play and stop. Whenever i try to play the video, the video window is going beyond the screen size and unable to re-size it.I…
Giriteja Bille
  • 168
  • 1
  • 13
1
vote
0 answers

konvajs Multi-touch Scale Stage

How can I set triangles to zoom, and circles to not to zoom? (mobile)
Paddy Pang
  • 53
  • 4
1
vote
1 answer

Konva possible to dynamically change the text of a Konva

My question is it possible to dynamically change the text of a Konva.text by doble clicking and entering the new text with the keyboard?
1
vote
1 answer

toDataURL() returns a blank image if Konva is not visible

I have an application where Konva is initially hidden (It's on the 2nd "tab" of a tab control on the page). When the user clicks a "Save" button on this page, I'm trying to call Stage.toDataURL() to get the content in Konva. However, if the 2nd tab…
JWalden
  • 21
  • 3
1
vote
1 answer

Is there a way to control more specifically the drag event of konva objects?

For example, by setting stage.draggable(true) we can make a stage draggable. By default, it is a continuous motion, meaning that every time when the mouse exerts dragging on a stage, the drag event is invoked. This causes lagging in my application,…
1
vote
2 answers

how initialize third party library (konvajs) in react hooks

I try to initialize third party library In React hooks I'm using useEffect but I get All the time null I tried using custom hooks but I get the same result (null) any idea? this my code https://stackblitz.com/edit/react-rg9uov thank's
Alex Malin
  • 63
  • 5
1
vote
1 answer

How can I tint an image with react-konva?

I've created a class to load images into my canvas using event listeners, based on the URLImage example on the Konva website. I have a PNG composed entirely of white pixels on a transparent background. I want to tint the white pixels a solid color…
Matthew Ratzloff
  • 4,518
  • 1
  • 31
  • 35
1
vote
1 answer

Generated drawing gives unexpected output

I'm trying to generate a drawing based on mouse events and I'm noticing some interesting rendering behavior that I can't explain why it's happening that way. Here's a jsbin that shows this example:…
KumarM
  • 1,669
  • 1
  • 18
  • 26
1
vote
1 answer

Refreshing Konva shape state in Vue component

After dragging and releasing a shape I want it to snap to a close by position. To test this I create a shape at {x:100, y:100}, then drag it and it does snap to 0,0, but only the first time Im dragging it. Next time it will ignore me setting x,y. I…
ajthinking
  • 3,386
  • 8
  • 45
  • 75
1
vote
0 answers

Konva's .draw method overlaps old draw, how do i prevent that?

In my code i am redrawing a rectangle every time a user moves their mouse to track it, but as said here, the .draw method will not remove the old drawing of the shape. So my question is, how do i remove the old drawing? Is there some sort of…
iLinked
  • 131
  • 1
  • 1
  • 4