Questions tagged [konvajs]
Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications.
944
questions
-1
votes
0
answers
20
views
Is There Any Solution Of Konva Stage Problem..? [closed]
How to Fix Width and Height of konva Stage Element With in a div Element..
I Implement Class On Cancas and Konva Content and Fix Height .. It Fixed But The issue is It allows me to Draw On HalF Area.
...
0
votes
1
answer
19
views
the cornerRadius of the image component have no effect in "react-konva": "17.0.2-6"
the version is
"react": "^17.0.2",
"react-dom": "^17.0.2",
"konva": "^7.2.5",
"react-konva": "17.0.2-6"
Looks like it'...
-2
votes
0
answers
22
views
Text isn't positioned precisely enough
If Konva.Text align is set to right or verticalAlign to middle or bottom it's not being positioned well enough and always have some offset from right or/and bottom. Are there any ways to fix that?
0
votes
0
answers
12
views
In Konvajs after drag and drop if i update the position of the node .Its not moving to new location instead staying in same drop location
I have node(text/rectangle) with draggable=true.
Trying to drag and drop to a another possition
After drop event i am updating the position via my varriable(vue reactive varriable) .The data were ...
3
votes
1
answer
59
views
Uncaught Error: its-fine: useFiber must be called within a <FiberProvider />
I'm trying to use konva js in my react app and here is the version details
package.json
"react": "^16.8.6",
"react-dom": "^16.8.6",
"konva": "^...
1
vote
1
answer
41
views
Responsive position of a draggable element in React-Konva
I am using react-konva to try and make a tool where users can visualize and plan their frame wall. The user can choose a background, then chooses a frame size and different posters. It kind of looks ...
1
vote
0
answers
15
views
Avoiding anti-aliasing with round painting in react-konva
I am trying to create a app with Konva and react-konva where the user can freely draw anything he wants on the stage, but mainly to use the mouse as a pen or a erasor.
The user can only use two colors:...
0
votes
0
answers
31
views
Is it possible to add filter to a group, which has many child nodes in it?
I want to make filters on a group, and all the child nodes can apply the filters at the same time. But I found the filters can only be added on one single node, like a Image or a Rect, can I make the ...
0
votes
0
answers
19
views
Konva mousedown triggers dragging but mouseup doesn't stop it
Firstly, I'm very grateful for this excellent library.
I will do my best to explain this but I think the demo will explain it best.
I have a class that extends konva group because it needs other ...
0
votes
2
answers
96
views
Can I use an image (.svg) or svg path(?) in Konva.Group()'s clipFunc?
Suppose I have a map of the world.
And I'd like each continent to be an area where I could attach shapes to and drag/reshape them, while always being clipped by the continent's shape borders/limits.
...
0
votes
1
answer
34
views
How to style the transform anchors on a Konva element?
How do I style the transform anchors (e.g., blue boxes) on a transformable Konva element? Note I'm using Konva with konva-react.
Example 1:
In other words, what if I wanted to make the boxes grey, ...
0
votes
0
answers
31
views
KonvaJS cropping an image using data saved in a Redux state
I'm building an image editor using NextJS, Konva and Redux. I've got a Redux state that saves data for each image, and then sends it down as 'data'. I want to let users crop images among other things.
...
0
votes
0
answers
27
views
Konva with stage draggable passing mouse events to layers
using konva's library I'm trying to be able to drag the whole stage only with the middle click which i've solutioned using:
this.stage = new Konva.Stage({
container: canvasElement.id,
width: this....
0
votes
0
answers
23
views
Clip complex shape on canvas
I'm trying to clip an image with a shape that the user can draw.
Here is what I have so far:
This shape is then draggable and let the exact same shape under. But the draggable part should not be dark,...
2
votes
1
answer
63
views
How to center items inside konvajs?
I am currently building some sort of meme-editor in react and for that I am using konvajs to function similar to a Canvas.
My problem is that I am unable to center the items inside the canva stage, as ...
0
votes
0
answers
20
views
Is there a way to change position of transformer anchors so that I can interact with transformer using mousemove but from outside of transformer box?
For example need to use rotate anchor from another position then default top center of transformer
I have tried to create new Konva.Rect and pass its 'mousedown' and 'mousemove' events to transformer ...
0
votes
0
answers
20
views
KonvaJS: Move offset without moving existing shape?
I would like to be able to change the offset position while keeping the object otherwise in the same spot visually.
What is the best way to do this?
Illustration:
An example from an image editing ...
0
votes
0
answers
45
views
How to allow mobile (iOS) users to tap and hold HTML Canvas to save to Photos/Gallery?
The current user flow I'm trying to implement is
user adds text to an input field
inputted text is then overlayed on an image using Canvas + Konva
(iOS) user exports canvas by tapping and holding ...
0
votes
0
answers
17
views
How can a shape be removed from a < Group /> and moved and nested into another Group after a Drag and Drop?
Considering this (buggy until other questions are answered) demo from here:
https://codesandbox.io/s/kanbanboard-lackofcarddnd-doce75?file=/src/index.js
where the red < Text /> emulates a button ...
0
votes
1
answer
39
views
In react-konva (the HTML canvas lib), How can I emulate a classical editable <input > and get or read the string value entered there?
Considering this (buggy until other questions are answered) demo from here:
https://codesandbox.io/s/kanbanboard-lackofcarddnd-doce75?file=/src/index.js
where the red < Text /> emulates a button ...
0
votes
1
answer
26
views
Capture "wheel" event on KonvaJS Stage only once
I want to execute a function in the context of a "wheel" event from a KonvaJS Stage, only once.
Is there a sort of "idiomatic" way of achieving this in Konvajs?
0
votes
1
answer
64
views
Auto-adjustable line between canvas objects
My intention is to create a line with canvas that adjusts itself whenever the objects change position, so that it always has a correct shape.
I currently have the following (uses a quadratic curve to ...
1
vote
1
answer
29
views
How I delete a shape at the format Label with Tag and Text
I have a format with the Label, Tag, and text into a shape, so, I want to delete a shape with the double click, it was functioning for the sample shape with, a circle, rect, and so on, but the shape ...
0
votes
0
answers
22
views
How to draw and erase color pixels like mask/paintbrush in KonvaJS with the ability to store the mask/painting coordinates and re-render
I need to paint and erase in Konva, along with storing the co-ordinates of the painted area excluding the erased area pixels.
I cannot achieve this with the konva line shape and ...
0
votes
1
answer
21
views
KonvaJS / Dynamically enable/disable interaction with layer
Is there an easy way in konvajs to disable the interaction/events (drag&drop/pointermove/click) for a layer and its children?
I have a setup containing multiple layers and interaction should only ...
0
votes
0
answers
29
views
Is there a image pattern stroke option for lines?
I've been trying to look over the Konva shape library and haven't found a stroke reapeating pattern method. I've been trying to look for a way to implement https://stackoverflow.com/a/32323610/...
1
vote
1
answer
34
views
Problems when applying react-konva rotation
I want to move the shape and change the direction using the arrow key.
Moving was successful. But When 'rotation' is applied, the 'text' position changes.
How do I keep the text position and only ...
0
votes
1
answer
35
views
How to apply transparency for several shapes at once on the React-konva?
https://konvajs.org/docs/sandbox/Transparent_Group.html
I saw the link above and tried to use group.cache() in react-konva, but I don't know how to apply it. Please tell me how.
import React from '...
0
votes
0
answers
44
views
How to implement an editable quadrilateral with Konva.js
I would like to draw a rectangle with the mouse and after that be able to edit it is a quadrilateral (polygon) by dragging the corners (to be clear about editing, I found a similar behavior on Konva....
0
votes
0
answers
32
views
Distributed text alignment in Konva
I am using React Konva to draw shapes. I want the text can align distributed as Excel (not justify). How can I get that behavior ? I have included images about the detail of aligment. Thank you guys.
...
0
votes
0
answers
76
views
text background color konva
I have one canvas and in this canvas, I have multiple texts.
I need to add text background color
I have tried with the following link and it's working fine
text
but as per the GitHub suggestion this ...
0
votes
1
answer
70
views
Algorithm for drawing lines with 90-degree angles
To get straight to the point, what I hope to achieve is to be able to create a connecting line between two elements with this shape:
DBDIAGRAM.IO
When the elements move, the line resets but always ...
0
votes
1
answer
52
views
How to modified SVG file import to KonvaJS?
i have an issue that's make admin can upload SVG and using it into Drawing Screen use Konva. The way to import that is ok, but ex-function i would like to ask is:
Is there a ways to help me can change ...
0
votes
1
answer
61
views
Konva - Export to High Quality Image and crop unwanted stage area
Currently I am exporting Konva as an image using the below when user clicks a button:
export const Demo = () => {
const canvasRef = useRef();
const signature = "Example text";
...
1
vote
1
answer
47
views
Correct gradient for canvas
I want to display svg file as path in konva.
But I have a problem with styling.
And radialGradient doesn't apply well.
And I also don't want to use Konva.Image.
I write both here:
VSG file:
<?xml ...
0
votes
0
answers
30
views
Generic whiteboard eraser for shapes and lines in react konva
React konva has basic functionality and example of pen and eraser of free drawing. But here I am trying to include multiple shapes on my board. The issue is 'destination-out' eraser doesn't work well ...
0
votes
0
answers
29
views
konva how to correctly type dragBoundFunc
I use next with typescript and konva, I have problem:
function handleDragBoundFunc(this: Node, pos: Vector2d) {
const newPos = {
x: pos.x,
y: pos.y,
}
if (!this.parent) {
...
0
votes
1
answer
40
views
How can I render circles around rectangle in Konva js?
I need to render table and chairs like in this picture:
I dont know how to calculate position of circles around rect. I tried some code, but its not working...Anybody knows how to solve it?
Check my ...
0
votes
0
answers
38
views
How to repeat a group (pattern of shapes) across the canvas?
I've been trying to achieve a seamless continuing brick wall across the canvas using Konva React. At the moment, I have the following code. Don't mind the repeating code, there is still clean-up to do ...
0
votes
0
answers
17
views
How apply curve on center of rectangle(become it concave) in Konvajs?
How can I make this effect in rectangle using Konva.js or Canvas?
0
votes
0
answers
30
views
KonvaJS at backend: Can we directly load a stage with background videos using Konva.Node.Create and then export to video?
I actually want to generate videos with Konva at backend. I found an example where they were creating multiple frames first and then combining them using fffmpeg to generate the video. But how do we ...
0
votes
0
answers
56
views
After dragging a group how can i update the position of a Freeline in Konva js?
I am trying to draw a Freeline using Konva’s text path object with in a Group. The group consist of freeline with anchors, back arrow and front arrow placed within a group. When
I draw the line and ...
0
votes
1
answer
128
views
React-konva: place elements of a Group with absolute (stage) coordinates
I started using React-Konva just 1 week ago, but I have a problem in what I am doing and I can't figure it out, due my lack of knowledge of Konva.
I have aStage, with Layer and Group inside.
Inside ...
1
vote
1
answer
94
views
Shapes not rendering within Stage in react-konva
I have a few lines of code to create a Rectangle or any other shapes I have tried are not rendering within the Stage. I have tried adding html elements, however they do render within the Stage. Is ...
0
votes
1
answer
60
views
Apply Multiple Filters
Dispite the tutorial here https://konvajs.org/docs/filters/Multiple_Filters.html of using multiple filters, I have been unsuccessful in applying multiple to an image in a NodeJS space.
Here is an ...
0
votes
0
answers
9
views
How to add border/stroke when using globalCompositeOperation=destination-out Konvajs
I have a shape which has the globalCompositeOperation of destination-out. Which does perfectly what I want to do. But, when I add stroke, it doesn't show up at all. How can I make stroke appear when ...
0
votes
0
answers
96
views
Draw a line automaticlly tied to circle on Konva JS
i want to draw a line beetween a circle everytime i add a circle on konva js. and the circle is dragable. so i want the line follow the circle when i drag it. How to do it? or maybe i'm doing it wrong....
0
votes
0
answers
94
views
Creating an editable polygon, with the feature of point adding, how to convert it to draggable with the points?
I am using KonvaJS for image annotation, in my application, user can select points on canvas and create a custom polygon, everything is okay so far, but i need to implement one more feature, let's say ...
1
vote
1
answer
45
views
KonvaJS/Canvas Dynamic fog of war reveal with obstacles
I have a 2D board made with KonvaJS and tokens that can move on a square grid. I can already add fog of war and remove it manually. However, I would like to make it so, when each token moves, it ...
0
votes
1
answer
33
views
Typescript augmenting/monkey-patching a new attribute for Konva classes
I am new to typescript and having trouble to monkey-patch a new attribute '_model' referring to my data-model with one of the classes of the Konva library.
The idea is to have the model available ...