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

What's the differences with the line, path, and shape classes in KonvaJS?

I'm a big fan of PaperJS, however, the library doesn't see much activity so we're looking at other tools, like KonvaJS, Fabric, and Pixi. We'd like to replicate the example here: http://paperjs.org/examples/path-simplification/ in KonvaJS but we're…
Paint Laurent
  • 113
  • 1
  • 7
0
votes
1 answer

Konvajs : how to get bowser co-ordinates corresponding to canvas co-ordinates from canvas object?

I am trying to automate konvajs canvas UI. when using tools like selenium or playwright, the click event clicks on browser co-ordinates which are different from canvas co-ordinates. I wish to click on canvas co-ordinates. Therefore, I need some api…
Himanshu Choudhary
  • 1
0
votes
1 answer

how to add only padding top and padding bottom to Konva Text

I want to just give padding top and padding bottom to my Text in canvas but when I give padding={20}, it gives padding to all the 4 sides. Can you plase help me to get rid of left/right paddings.
Amir
  • 92
  • 1
  • 7
0
votes
1 answer

How to make shape only show in react and partially hide on stage

I created a responsive rect as an artboard in the stage, and when I add shapes and move them, I want the shapes to only show on the rect, just like opening a window on the stage, only show the shapes inside the window
雪山飞胡
  • 1
0
votes
1 answer

Convert Konva-Canvas into PDF using React-Konva

Hello i have implemented on how to save the canvas in png and jpeg but i would like to save it into pdf i have seen the code for JavaScript from here:https://konvajs.org/docs/sandbox/Canvas_to_PDF.html i would like to know how it can be implemented…
Nami12
  • 5
  • 1
  • 3
0
votes
1 answer

draw with react-konva a rectangle when clicking a button

I'm trying to draw with Konva a rectangle when clicking a button This is the code: import * as React from 'react' import Konva from 'konva' import { Stage, Layer, Line, Text, Rect, Group} from 'react-konva' import { Portal, Html } from…
Raphael10
  • 2,508
  • 7
  • 22
  • 50
0
votes
0 answers

React-Konva canvas resizing

I would like to be able to resize the height of the whole konva canvas/stage like we are able to do with canvas objects like shapes/images with the help of transformer. Is there something already in place for the same?
codegeek101
  • 33
  • 5
0
votes
1 answer

how to do it correctly so that when transform one shape, transform another shape in react-konva?

I need to transform one shape to also transform the other so that it fills the free space. How can I do it right in react? Now what I did is not working as it should at all and I have no ideas how to do it differently Demo:…
Roman
  • 3
  • 1
0
votes
0 answers

How to convert canvas stage to save in png/jpeg react konva

function downloadURI(uri, name) { var link = document.createElement('a'); link.download = name; link.href = uri; document.body.appendChild(link); link.click(); document.body.removeChild(link); …
Nami12
  • 5
  • 1
  • 3
0
votes
1 answer

How to zoom in and zoom out on canvas using button in konvajs react

I want to make my canvas zoom in and zoom out through button onclick function i have implemented through onwheel but unable to do it through button please help https://codesandbox.io/s/react-canvas-n779q2?file=/src/App.js
Nami12
  • 5
  • 1
  • 3
0
votes
0 answers

How To Crop uploaded image with react-konva

I am using react-konva and I want to crop my selected image when edit button clicked. Can anyone please guide me how I can achieve this ? this is the Rect I am using to crop the portion of the image. Here in this code onShapeChange function saves…
Amir
  • 92
  • 1
  • 7
0
votes
1 answer

React Konva custom context/canvas (for use with canvas2svg)

We're using react-konva, which renders a component that manages an underlying canvas/context. We want to use canvas2svg with it, which is basically a wrapper around a canvas context that tracks all draws to the canvas and maintains an svg…
Max Hudson
  • 9,961
  • 14
  • 57
  • 107
0
votes
1 answer

Pattern Repeat on object in KonvaJS

Is there any way to repeat a pattern in KonvaJS through a user input? I have this (DEMO). However,I am having difficulties wrapping my head around this next step. Is it possible? Edit: I would like to programmatically clone/repeat the arc's peaks…
Яхья
  • 17
  • 1
  • 7
0
votes
1 answer

Konva React - Collision detection for hovered DOM elements

I'm using React with Konva. I am dragging a DOM element onto the canvas and creating a Konva node, just like the lion demo in the docs, except I create a Circle shape from the dropped element. I want for some validation to happen before the user…
Rei
  • 47
  • 3
  • 7
0
votes
1 answer

react-konva Free hand area selection using mouse click (straight lines)

I want to implement a free hand area selection on canvas using react-konva. Anyone have solution or suggestion ? Please refer screenshot for better understanding. Thank You !!! And I tried this, https://codesandbox.io/s/dry-flower-b5eof-b5eof
Sachin Dongare
  • 58
  • 1
  • 7
1 2 3
…
19 20