Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 23 21:46
    lavrton closed #1178
  • Sep 23 21:46
    lavrton closed #1175
  • Sep 23 21:46
    lavrton closed #1166
  • Sep 23 21:46
    lavrton commented #1166
  • Sep 23 21:45
    lavrton closed #1163
  • Sep 23 21:44
    lavrton closed #1157
  • Sep 23 21:44
    lavrton commented #1157
  • Sep 23 21:44
    lavrton closed #1126
  • Sep 23 21:44
    lavrton commented #1126
  • Sep 23 21:43

    lavrton on master

    fix build, add docs (compare)

  • Sep 23 21:26

    lavrton on 8.2.0

    (compare)

  • Sep 23 21:26

    lavrton on master

    update CHANGELOG with new versi… build for 8.2.0 update cdn link (compare)

  • Sep 23 21:23

    lavrton on master

    export fixes add cmj info (compare)

  • Sep 23 16:32

    lavrton on master

    fix transformer versions (compare)

  • Sep 23 16:26

    lavrton on master

    hold parcel version (compare)

  • Sep 23 16:17

    lavrton on master

    cmj build (compare)

  • Sep 22 16:40
    Hexalyse commented #1181
  • Sep 22 15:15
    lavrton commented #1181
  • Sep 22 15:15
    lavrton commented #1181
  • Sep 22 15:14
    lavrton closed #1177
Anton Lavrenov
@lavrton
Are all texts objects visible at the same time?
They all on the screen?
Wesley Mostien
@wesleymostien
yes sir
i am trying caching now and different approach, i am getting there. But some objects disappear if I turn on caching, what is the reason exactly? I have read something about there is a problem when using strokes (my rectangles have only strokes and no fill). But what is going on exactly with caching?
and has grouping objects any positive effect on performance? so it doesnt have to scale all objects separately but the group as a whole?
Anton Lavrenov
@lavrton

and has grouping objects any positive effect on performance? so it doesnt have to scale all objects separately but the group as a whole?

No, the perf will be the same.

ali-asghar1
@ali-asghar1
Hi @lavrton , I have a bit complex shape. I have a group containing path, text, arrow and bit a code to connect arrow with the path. I am trying to change size of text as per change of font size or family. I am trying to do so when transforming at the group. Any idea how I go about it. Thanks
Shohel Rana
@mdshohelrana
has someone made draw.io using react-konva? or any other similar app. I will use this for kids learning where kids will drag and drop alphabet, numbers, and shapes to the whiteboard and can change easily the color of the alphabet, number and they can make a word by letter so we need grouping features for alphabet and number also.
Shohel Rana
@mdshohelrana
ROHIT SINGH
@rohitsinghshan
I wanna update text color from outside of konva stage like from side bar using html input[type=color], but i have to click on shape to change it where as I need live color change as I change color in input. How can I achieve that?
If anyone can solve this then please mail me as I am not active on gitter. my mail is rohitsinghshan@gmail.com
atolucky6
@atolucky6
Do you have plan to port library to blazor ??
ChristiaanBilthof
@ChristiaanBilthof

Hey guys. I've search everywhere but I'm not able to find an answer to my question. Or my wrongfull work haha. Hope someone can point me in the right direction.

My setup:

So I have a Stage with one layer.
I have several elements on there (Text and Image elements) which work perfectly.
I also have a group which consists of two text elements.

The problem:

When I export all these elements to save them in my database, all elements come out correctly according to their X and Y positions. However, one element, the Group, has negative X and Y coordinates even though I can cleary see it on my canvas.

What I've tried:
When I log the the console the positions after dragging the Group I can clearly see that they are negative. However I can still see it ony my screen.
I thought it was an absolute position problem but when I do group.getAbsolutePosition(), It get the same, incorrect, coordatinates.

Who can help me out here?!

Anton Lavrenov
@lavrton
@ChristiaanBilthof we are moved to discord https://discord.gg/Cq8Zr7ywgd, please ask a question there
Puneet Jindal
@puneetjindal

Hi All, i am trying to achieve following functionality on my canvas based image editing/drawing tool
As a user, i should be able to
1) Draw a polygon
2) Drag and drop it
3) Add vertices in the polygon by breaking an edge into multiple edges from midpoint of the edge
4) Delete the polygon
5) Assign labels to the polygon

Anyone who would be able to help my developer for the same? you can whatsapp me at +917838860769 or connect with me at https://www.linkedin.com/in/puneetjindalisb/

Bala krish
@krishbala1997_gitlab
Hi,
how to fill rectangle with lines?. is there any builtin option available in konva js
Daniel Andreyev
@anboo

Hi everyone!
I have error.

My stage is draggable and after that getPointerPosition return incorrect coordinates

this.stage.on('click', (e) => {
      let target = this.stage.getPointerPosition()
      this.circle.to({
          x: target.x,
          y: target.y,
      })
});

For scale I found this lifehack:

        var mousePointTo = {
          x: (pointer.x - stage.x()) / oldScale,
          y: (pointer.y - stage.y()) / oldScale,
        };

What I need do when I have draggable stage for calculate mouse pointer position?

Syed Muhammad Abdullah Zaydi
@AbdullahZaydi
Hey! I've been dealing with a problem for almost one week, I want to create a layer feature inside my application similar to pixlr layers feature. Where you can change the layer position resize the layer and also add filters to the layer. I've did almost everything in that web app. but that layer feature is really confusing. I somehow managed to make it change the layer position eg change the zIndex of the layer, with the help of the article provided on the konvajs portal. But It has made the application work slowly. the application is lagging and the sliders are not working well. Also the state doesn't changes when I move the slider. The effect takes place after a few clicks and sometimes when i move the layers.
mhd21
@mhd21
Hi, I want to put an image as the background and draw on it. when using the eraser, I just want to ease drawings not the image
PTDDevelopers
@PTDDevelopers
Hi, I am using konva js to annotate high resolution images that have pixel size above 20k * 20k. I am unable to display those images on my canvas. I tried to open those images on mozilla and it opens when I used browser to open our jpg directly but when I use my application to open those images they are not opening up. Any help will be much appreciated.
Dev Expert
@expert-dev1
can we use xml image for konva?
Suren
@Suren65598339_twitter
Hi all, how can I handle an event on the image outside of the clipped group part ? or how can I drag that's image ?
chatpark
@chatpark
Hi there is there a way to make drag and drop a image to like click and drop ?
Suren
@Suren65598339_twitter
@lavrton
Dev Expert
@expert-dev1
Hi can we use flash xml into konva
i have xml and i want to display using metrix
devmanagalaxy
@devmanateam
Hi, How are you?
I am building a mobile app using knova.js in my ionic project.
What I am facing is that I cannot export the layer into the image.
I think the reason is that the frontend handles it.
https://konvajs.org/docs/posts/Tainted_Canvas.html
Upon checking this guide, it seems this behavior should be work on the server side.
but I hope to export this layer into the image on the frontend side.
Is there any solution? Thank you in advance
Bala krish
@krishbala1997_gitlab
Can I generate Konva js shapes using node js or anyother server side frameworks. Because I would like to generate canvas using backend rather than client browser. Help with this please.
dan-klasson
@dan-klasson
@krishbala1997_gitlab konva is a frontend library. maybe you can return json from the server and dynamically create your canvas like that?
Ricardo Canastro
@canastro

is there any good example of a draggable area with bounds that work properly with rotated shapes? I'm having a really hard time implementing a dragBoundFunc on rotated shapes :\

PS: I mean, Im trying to have an editor area where shapes should not leave.

Ashutosh Kumar
@ashutoshpw
Is there any guide to Konva Coordinate systems?
Konva.Util.haveIntersection is not working for me after implementing Zoom In/Out using this
https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html
Ashutosh Kumar
@ashutoshpw
Could anyone help me in this please?
hard2318
@hard2318
Hi , I am trying to get the todataURl() of image droped in konva stage , is it possible to get dataURL of whole image even which is outside the viewport of stage. If possible then How
hard2318
@hard2318
@lavrton I am trying to get the todataURl() of image droped in konva stage , is it possible to get dataURL of whole image even which is outside the viewport of stage. If possible then How
1 reply
SeungJu Lee
@seungjulee

Is there a way to optimize rendering many Rects? I'm trying to render a 256x256 grid, but it's so slow. Is there a way optimize?

I love how I don't have to worry about onClick and other handlers, and way to write the grid declaritively. But I don't know how I can do the same without React Konva.

Vimalraj
@Vimallakzz
@lavrton Hi I m facing issue on loading image in canvas, because i m loading high quality image size varies from 1- 4MB. So that it takes some time to load, in example it takes 6-10sec In the mean time How Can I show some loader which is helpful for user to know the image been loading????
Yannick Schwarenthorer
@y4nnick
Hi, is there a way to access current position of an element inside the dragmove eventhandler? The passed in event seems to not include that information.
Rudresh Trivedi
@rudreshtrivedi
Hello All,
I am planning to automate Canvas app built by konva. Any guideline or tool suggestion? It seems, I'll have challenge with Selenium. Any feedback would be appreciated.
Eirik Måseidvåg
@Eirmas
Hello, I'm working with the Transformer and im wondering if the matrix used is using same scheme as CSS matrix meaning:
this.m[0] = 1; // Scale X
this.m[1] = 0; // Skew Y
this.m[2] = 0; // Skew X
this.m[3] = 1; // Scale Y
this.m[4] = 0; // Translate X
this.m[5] = 0; // Translate Y
denvolynets
@denvolynets
Hi, I cannot set a value for the new Konva.Filters.Grayscale filter, how can this be done for the native canvas - ctx.filter = 'grayscale(0.65)' - https://stackoverflow.com/a/67392978;
is it possible to do it in Konva? help me please
Vinay M
@rmdort
@lavrton Hey Anton. Would it make sense to use useEffect instead of useLayoutEffect in React KOnva
https://github.com/konvajs/react-konva/blob/master/src/ReactKonvaCore.js#L43 . Since Konva doesnt care about DOM mutations, why cant we use useEffect ?
wsamosir
@wsamosir
Hello, is there a way for prevent anti-aliasing when scaling/rotating using Transformer? Currently when scaled/rotated my 3 true-color image starts having pixel-level gradients in between different colors
wsamosir
@wsamosir
Oh and I already have layer.imageSmoothingEnabled(false) as well as image-rendering : pixelated on my scss
hillghost
@hillghost
image.png
hello guys, i'm trying to restrict the stars show only in the black cirle, i set globalCompositeOperation property as destination-in with the stars group, but it doesn't work
it's just like that each <v-star> are all to be destination-in, but I'd like the star group to be destination-in the black circle
hillghost
@hillghost
does anybody got this issues before?