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

Konva Image showing black when loading

I'm trying to have a grid as a background using ImageKonva and filling it with a pattern. The problem is that when I load the canvas, the ImageKonva looks completely black, and it shows up as soon as I add children elements. import React from…
Matias
  • 527
  • 1
  • 4
  • 19
0
votes
1 answer

Acessing refs with render props

I'm trying to deal with lifting up ref from child component. My parent component: import React, { Component, use } from "react"; import { Transformer } from "react-konva"; export default class SelectProvider extends Component { constructor(props)…
hans001
  • 123
  • 1
  • 2
  • 8
0
votes
2 answers

ReactJS sending ref to global useContext state (Konva)

I am using useContext as a global state solution. I have a Store.jsx which contains my state, and a reducer.jsx which reduces. I am using Konva to create some shapes on an HTML5 Canvas. My goal is when I click on a shape I want to update my global…
davidgotmilk
  • 33
  • 3
0
votes
1 answer

How to remove line, that drawn with brush, without removing image

I have using https://konvajs.org/docs/sandbox/Free_Drawing.html this first example,but also added image in stage. But when I erase drawn line, image also removed. How can I fixe that
Programmer
  • 65
  • 7
0
votes
1 answer

KonvaJS transform rotation around center on SVG

I create text on canvas using KonvaJS. And I can freeze the text using Transformer. While drawing, the origin remains in the center as I wish there is no problem here. However, when I want to use the data with svg here, x andy come true without…
Minan
  • 807
  • 7
  • 17
0
votes
2 answers

How to get ending position of line in React-Konva

Sorry, I'm new to coding and am struggling on something I believe is quite basic. I want to draw a shape via multiple konva line objects. Once I've created a line, instead of manually calculating where the next line should begin, I'm thinking there…
Steven Michael
  • 31
  • 3
0
votes
1 answer

Konvajs: How to change position of group of texts

I'm using Konvajs, I have group of texts, and I want don't allow drag group outside of the canvas, I'm tried solved that using dragBoundFunc, but that don't help me, now I just try change group position during dragmove, but setPosition,…
Programmer
  • 65
  • 7
0
votes
1 answer

Can't attach transformer to element from another class using konva

I am trying to attach a transformer to an element using findOne and Id, when printing it recognizes both nodes but does not attach it, no error is shown. Below is the concerned function triggered onClick, the nodes are defined in a sibling class and…
Camille Basbous
  • 299
  • 5
  • 11
  • 34
0
votes
1 answer

What’s the most efficient method to drag/move objects simultaneously?

This is more of a general design question than a specific question about a piece of code. Let me do an outline: Imagine a canvas with a poly line consisting of 3 or more points. Each of those points has a circle object as draggable handle. The user…
genox
  • 23
  • 6
0
votes
1 answer

Cannot read property 'apply' of undefined Konva.js

I'm trying to find object by using method find. It is only a part of code, just to demonstrate issue. In general I need to find object from array of Shapes from Konva framework. I got it by using refs after rendering functional component. import…
Maksim
  • 3
  • 2
0
votes
1 answer

How to avoid shapes from changing size and position when deleting previous shape component with same component name? Konva

I have been having this issue using react-konva were when I remove a shape within the array all shapes move to initial position and if the shape is placed in one position above the deleted one and has the same component name for e.g: deleted ===…
Camille Basbous
  • 299
  • 5
  • 11
  • 34
0
votes
1 answer

How to add as attribute and get React Konva Element ID

I would like to know how to add an ID to an element and retrieve it similarly to e.target.getAttribute("id") for DOM elements. One thing to note is that the elements are based on an array that is part of the parent component. In order for the…
Camille Basbous
  • 299
  • 5
  • 11
  • 34
0
votes
1 answer

KonvaJs example does not work once i updated mobx 5

I am trying to develop on that KonvaJs example: https://konvajs.org/docs/sandbox/Window_Frame_Designer.html When cloned the repository everything is working fine. However, Once i updated mobx from 4.3.1 to 5.15.0 it gives that error; Error: MobX…
mkaya387
  • 368
  • 2
  • 10
0
votes
1 answer

React-konva - Conneting Circle with a Line using mouse click

I am using react-konva and I have two Circle component that I would like to connect with a Line. I have accomplished that by hardcoding but I want to make it interactive. My goal: when I click a Circle component it would create a Line component.…
dracoboros
  • 55
  • 2
  • 7
0
votes
1 answer

Using WebFontLoader with React Konva causes text offsets?

I am attempting to draw some text data on a canvas, using a web font, with the React Konva canvas library. I am loading the web fonts using the WebFontLoader library. There is of course a short delay before the fonts are fully loaded. However, once…
EliteMasterEric
  • 180
  • 2
  • 11
1 2 3
…
19 20