Stack Overflow
Stack Overflow

Questions tagged [konvajs-reactjs]

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

Konvajs-Reactjs 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 konvajs-reactjs.

118 questions
1
vote
1 answer

React Konva draw half circumference without diameter

I draw this half-circumference with the react Konva Arc object: This is my code: import React, { useState } from "react"; import {Circle, Shape, Rect, Line, Group, Arc } from "react-konva"; export const Pitch = props => { const [width,…
Andrea Barnabò
  • 534
  • 6
  • 19
1
vote
1 answer

Text's `fill` color is overriden by `stroke` in Konva

I have some Konva Text node, whose fill attribute is set to black and stroke is set to some other color. In my canvas it looks as expected. The problem happens when I convert the canvas to base64 image to download it as an image file - in that case…
Vardan
  • 55
  • 1
  • 10
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

Is the Sharpness filter available in Konvajs, if it is there how to use that?

https://konvajs.org/api/Konva.Filters.html in this link the sharpness filter is not available
KRISHNAKANTH BASKARAN
  • 55
  • 4
1
vote
1 answer

Konva.js waved stroke around Rect element

If that possible to change the Rect element stroke(border) to wave style like below image. I will let user to draw Rect by mouse moving. I know how to change border to Dashed but how about wave style? This is the Rect sample code for Konva.js and…
MichaelMao
  • 2,596
  • 2
  • 23
  • 54
1
vote
1 answer

How to make Konva-React responsive (scaling) canvas according to device size / resolution?

I'm creating a videogame-like app, for this I'm using Konva React to handle my Canvas, this app will be accessible from either a computer and / or mobile devices and I'd want it to scale / resize itself just like in this example that I found through…
Frakcool
  • 10,915
  • 9
  • 50
  • 89
1
vote
1 answer

KonvaJS - Way to determine if children of Stage have been clicked

I'm enjoying learning about KonvaJS with react and typescript. I have a click handler on component that will create a new star at the x and y coordinates where it was clicked. It does this by adding the x and y coords to state. That coord array is…
risingBirdSong
  • 198
  • 3
  • 9
1
vote
1 answer

ReactJS KonvasJS How to create 2 layers that cannot overlaps

i'm trying to create 2 layers (Images) that cannot overlap, So they can still dragged freely, but won't showed over each other. I've tried using zIndex or a blank Rect, but can't figure out how to make 2 draggable layers that can't overlap (Very…
Itay Elkouby
  • 344
  • 1
  • 15
1
vote
1 answer

Maintain aspect ratio for stage

I'm trying to set an aspect ratio to the Stage element,but without any luck. For example, with a canvas, I would write the following for landscape: const dpr = window.devicePixelRatio || 1 const aspectRatio = 16 / 9 const canvasHeight = 1080 *…
user13018020
  • 11
  • 1
1
vote
1 answer

Mouse enter and mouse leave event listeners for stage component in react-konva does not work

Is there mouse enter and mouse leave event listeners for stage component in react-konva? I need to implement collaboration pointer similar like Figma when the users mouse enter, move, and leave the canvas. Tried to use onMouseEnter and onMouseLeave…
Inovramadani
  • 1,955
  • 3
  • 14
  • 34
1
vote
0 answers

How to implement Eraser tool in Konva js without using destination-out and drawing with white color we need like object erasing?

enter code hereCan we implement Object Erasing in konva js for eraser tool. Actually i need to erase free drawing line if we erase with destination-out im facing issues while moving or dragging lines from one place to another. To overcome this issue…
Rajashekhar Reddy
  • 126
  • 3
  • 11
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
2 answers

Rendering objects dynamically with KonvaJs-ReactJs

I want to render an array of React components with the help of KonvaJs without knowing exactly which object I draw at a particular moment. To be more specific, here is my code: One of the React components I want to render, wall.js: class CWall…
kasom
  • 43
  • 4
1
vote
1 answer

React-konva connect two nodes with a weighted arrow

I want to create a weighted directed graph in react-konva. What I have achieved so far is to create the nodes and connect them using an Arrow component. The next step is to add a label on the Arrow which will represent the weight of the edge. The…
Charles Nikolopoulos
  • 35
  • 4
1
vote
1 answer

In React-Konva, How to get the position of a click on an Image-shape in a draggable Stage

On Konva (React-Konva to be precise) there is a Stage with a Layer with an Image. Clicking on that Image gives the position of the Click on that Image. But after Dragging (either the Stage or the Image), the position is different. In React-Konva…
BertC
  • 2,243
  • 26
  • 33
1 2
3
4 5 6 7 8