Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 21:30
    maloguertin opened #1019
  • 15:19

    lavrton on master

    Fix correct rendering of `Konva… (compare)

  • Nov 24 20:21
    maloguertin commented #1006
  • Nov 24 20:20
    maloguertin commented #1006
  • Nov 24 17:29
    lavrton closed #585
  • Nov 24 17:29
    lavrton commented #585
  • Nov 24 09:11
    xxlee0927 commented #1011
  • Nov 23 15:10

    lavrton on 7.2.0

    (compare)

  • Nov 23 15:10

    lavrton on master

    Fix rendering of `TextPath` one… update CHANGELOG with new versi… build for 7.2.0 and 1 more (compare)

  • Nov 22 18:49

    lavrton on master

    New property `fillAfterStrokeEn… (compare)

  • Nov 20 17:22

    lavrton on 7.1.9

    (compare)

  • Nov 20 17:22

    lavrton on master

    Fix autodrawing for `Konva.Tran… Merge branch 'master' of github… update CHANGELOG with new versi… and 2 more (compare)

  • Nov 18 17:00
    frizurd commented #256
  • Nov 18 12:37
    raminious edited #1018
  • Nov 18 12:36
    raminious opened #1018
  • Nov 18 12:17

    lavrton on master

    fix: return type of container.f… Merge pull request #1017 from b… (compare)

  • Nov 18 12:17
    lavrton closed #1017
  • Nov 18 07:32
    bluehymn opened #1017
  • Nov 18 03:44
    lavrton commented #1016
  • Nov 18 02:11
    bluehymn edited #1016
Anton Lavrenov
@lavrton
I mean what kind of styles do you want? Why current styles doesn’t work for you?
You can use anchorCornerRadius for circle emulation.
pingdojo
@pingdojo

I mean what kind of styles do you want? Why current styles doesn’t work for you?

Would like the option to add mouseover styles, perhaps even icons.

Eoghan McCarthy
@eoghanmccarthy
@lavrton Got it. The force is with me :) Thanks for pointing me in the right direction
pingdojo
@pingdojo

Hey @lavrton is it possible to use one Rect that has a transformer attached to it as a proxy to simultaneously transform a second Rect by the same transformation values ?

I have one Rect which has a Transformer attached to it and a second Rect which does not have a Transformer attached to it. I would like it to happen such that when the first Rect is transformed, the second Rect is also transformed by the same values.

I've tried something like rect2._setTransform(rect1.getTransform()) inside the onTransform event.
waqasahmad34
@waqasahmad34
@Abdul___Says_twitter i have done with show emojis to react-konva
Anton Lavrenov
@lavrton
@pingdojo just use transform event and copy required attrs from original rect into second rect
rect.on(’transform’, () => {
  otherRect.setAttrs({
    x: rect.x(),
    y: rect.y(),
    rotation: rect.rotation(),
    scaleX: rect.scaleX(),
    scaleY: rect.scaleY()
  })
});
Lucas
@lucas-janon
Hi! We are rendering multiple SVG paths into Konva Path elements and getting little gaps between some of the elements, something similar to this: https://stackoverflow.com/questions/44465506/svg-path-imprecision
is there any known workaround to that issue?
Anton Lavrenov
@lavrton
Use small stroke too?
Lucas
@lucas-janon
I'll try that one
AYAZ AHMED KHAN
@RajAyaz
@lavrton I have 1 group have 2 images 1 is cross sign image and another one is a simple to picture of a human so I want to resize the human image not cross image right now both images is resizing I want to fix the cross image on the upper right corner of human image and want to resize and drag human image. Thank you
Please help me
AYAZ AHMED KHAN
@RajAyaz
i am using Konva JavaScript Framework v4.0.0
pingdojo
@pingdojo

@lavrton is there a way to detect which anchor of Konva.Transformer is active onTranform?

i.e onTransform I need to detect if it's bottom-left anchor or bottom-right

Anton Lavrenov
@lavrton
@pingdojo yes, see API docs
pingdojo
@pingdojo

@pingdojo yes, see API docs

@lavrton Checked, can't seem to locate doc under Tranformer or by search.

Anton Lavrenov
@lavrton
@pingdojo activeAnchor
pingdojo
@pingdojo

Oh, got it thanks. Must have missed it.

@pingdojo activeAnchor

codelover2k
@codelover2k
Hi, I would like to style the rotation point only, just something simple, I would like to add a circle
codelover2k
@codelover2k
I created this little example:
the problems that I have is that there are an async movment between the circle and the rotator, the rotate takes a moment to find its place AND the circle does not react on clicks
codelover2k
@codelover2k
with Konva.Transformer you can config the anchor points, like the color, size and corner radius of an anchor radius
are there options for the rotation point/rotater only?
waqasahmad34
@waqasahmad34
@lavrton how I can draw the line with random color on canvas. and also can I remove the shape( rectangle, circle, etc..) with an eraser like we remove the line.
@lavrton I am using react-konva.
Anton Lavrenov
@lavrton
@waqasahmad34 what did you try?
waqasahmad34
@waqasahmad34
@lavrton i have created a drawing app. you can check here. https://www.demo.diggiart.com/signin
Prakash Ujjwal
@prakashujjwal1010
Hi, I was working on including rotate gestures in my app following the tutorial given on https://konvajs.org/docs/sandbox/Gestures.html. But in my app i have also attached 'tap' event listener so whenever I tried to rotate the shape using gesture , 'tap' event gets emitted also is there any way so that I can prevent that from happening means while rotation via 2 finger rotate gesture, 'tap' event should not get emitted?
https://jsfiddle.net/pudio/z68nc5p3/2/
CalvinBentoSMB
@CalvinBentoSMB
Hey there konva community. I know it isn't directly supported, but is there anyone who has come up with a successful way to convert the konva canvas to svg?
Anton Lavrenov
@lavrton
@CalvinBentoSMB I was doing it manually a project.

I made an app for free drawing. The app works on Konva. But is was better to save the result as SVG. So I just manually generate from konva nodes.

Then parse it back to konva nodes.

So it was a manual work.
pingdojo
@pingdojo

Hi @lavrton , trying to wrap my head around attaching a Transformer to a cropped image to scale only the cropped area.

I added the image to Konva.Group, together with a "fake shape"

const cropProps = {
x: 50,
y:50,
width: 100,
height: 100
}



<Group>
<Image ref={image}  {...imageProps} crop={cropProps}/>
<Rect id="fakeShape" {...cropProps}
onTransform={() => {
//How to scale the image taking into account the offset of the cropped area
image.current.setAttrs({

})
}}/>
</Group>

My question is how can I scale the image as the "fake shape" is scaled , while taking into account the values of the cropProps such that the original image's x,y always matches the cropped area?

Anton Lavrenov
@lavrton
I don’t understand how visually it should look.
z411500976
@z411500976
@lavrton How to achieve transform snaps
Wesley Mostien
@wesleymostien

I have stage with hundreds of text items on it and I have performance issues while zooming/scaling. I have done all the performance enhancements listed here (except caching) : https://konvajs.org/docs/performance/All_Performance_Tips.html

When I scale the stage with the mousewheel, the font size of these text items should remain visibly the same. So indeed I can keep the absolute scale at 1 like you've suggested here: https://stackoverflow.com/questions/60757623/increase-text-size-in-konva-js-map-when-user-zooms-out

But while implementing this solution works, it is totally not user friendly. The scaling stutters like crazy because I need to loop over all text objects and adjust the scale for each of them on every call of the mousewheel handler.

Any ideas how to accomplish such a feat? Thanks

Anton Lavrenov
@lavrton
@wesleymostien in fact caching is the most powerful.
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