Stack Overflow
Stack Overflow

Questions tagged [react-konva]

react-konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework.

react-konva is, judging by the volume of questions arising on SO, an increasingly popular combo for development of HTML5 canvas solutions within Reactjs. The Git page is at https://github.com/konvajs/react-konva

As a subject, it is sufficiently different from the plain JS Konvajs library that folks will benefit from tagging it with a specific tag. This will assist others searching for solutions that are specifically Konvajs-Reactjs, but they should also consider broadening their searches to plain konvajs as there is a wider body of question material for this and although it is plain-JS, the concepts are generally taken into react-konva.

292 questions
2
votes
1 answer

react-konva dragBound a zoomable stage

I am trying to make an application with react-konva in which an image covers the entire stage and the stage is draggable and zoomable. So I am looking for a way to bound the drag to the edges of the image. I looked at this demo and added a…
Nadeem Haider
  • 160
  • 1
  • 12
2
votes
1 answer

How to implement the dragBounfunc, boundBoxFunc of a Tranformer Rectangle and in React Konva?

I'm trying to draw a rectangle on an image with React Konva, and get the coordinate of its 4 corners. I have calculated and return the coordinate of 4 corners quite accurately but the problem is I still couldn't implement the dragBoundFunc (to bound…
Bad Son
  • 131
  • 2
  • 16
2
votes
1 answer

Render Image from database dynamically on react-konva

Im trying to do a RPG table using react-konva and I coudnt render images from database dynamically user the hook useImage, Its now work inside the map. const imagens = tokens && tokens.tokens && tokens.tokens.map(item => item.image) const…
Rogerio Azevedo
  • 786
  • 2
  • 13
  • 32
2
votes
1 answer

Best strategy to mimic object-fit / object-position property with konva images

Assume we have a 1000x1000 image drawn onto canvas, and set konva image size to something like 500x700. Is it possible to mimic html tags object-fit property in konva so we can tell image object to fit image in cover / contain mode.…
Ilja
  • 44,142
  • 92
  • 275
  • 498
2
votes
1 answer

Animating a GIF on Canvas using react-konva

I am trying to create a UI for an application using react. I have am using react-konva for creating a 2D canvas. I have figured out how to import an image onto this canvas but am having trouble trying to animate a gif. There is documentation for how…
SSPdude
  • 959
  • 1
  • 7
  • 11
2
votes
0 answers

React Konva Transformer Error "Cannot read property 'getStage' of undefined"

I'm using Konva 4.0.18 within a React 16.8. Application, which works well so far in the Standalone (CRA). When integrating this working solution into an existing Application Frame I'm facing an error which appears on transforming the rectangle (and…
Raoul S.
  • 21
  • 4
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
1 answer

Is it possible to apply react-konva into React Native project?

I saw react-konva bounce ball sample https://codesandbox.io/s/5qvyyyjrx from google and I tried to apply it into my React Native app. But no luck, I getting this error invariant violation view config not found for name div which is from Stage…
AD Tee
  • 345
  • 4
  • 21
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

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

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

Stop dragging once connected

I am using React-Konva library for creating shapes using my palette. Then I am dragging it to connect. But once it is connected it should then draggable for group should only work not for each item. I have put different shapes inside a variable…
Kramer
  • 389
  • 8
  • 34
1 2
3
…
19 20