Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 30 16:22
    lavrton commented #1005
  • Oct 30 16:19
    lavrton commented #1006
  • Oct 30 13:13
    ramonortigosa opened #1006
  • Oct 30 01:41
    MrErHu commented #1005
  • Oct 29 19:34
    lavrton reopened #1004
  • Oct 29 15:15
    lavrton commented #1005
  • Oct 29 11:53
    MrErHu opened #1005
  • Oct 28 03:09
    z411500976 closed #1001
  • Oct 28 03:09
    z411500976 commented #1001
  • Oct 27 07:30
    Heartsky commented #1004
  • Oct 26 16:17
    lavrton closed #1004
  • Oct 26 16:17
    lavrton commented #1004
  • Oct 26 14:02
    lavrton commented #1001
  • Oct 26 07:22
    Heartsky edited #1004
  • Oct 26 07:20
    Heartsky edited #1004
  • Oct 26 07:20
    Heartsky edited #1004
  • Oct 26 07:19
    Heartsky edited #1004
  • Oct 26 07:18
    Heartsky opened #1004
  • Oct 26 01:17
    moonrailgun commented #1002
  • Oct 25 18:25
    lavrton commented #1002
Anton Lavrenov
@lavrton
@pingdojo why do you need it?
Eoghan McCarthy
@eoghanmccarthy
Hey does anyone know of a Konva example online of how to add a point to a polygon between two already existing points? I'm using this great example to draw the polygon (https://codesandbox.io/s/oxwx9q9ko6?file=/src/index.js) but now I need to be able to add a point to an already drawn polygon. Any tips anyone?
Anton Lavrenov
@lavrton
@eoghanmccarthy on click find closest segment of a line.
then find indexes of segments points in a line
Then just add a new point
Eoghan McCarthy
@eoghanmccarthy
@lavrton thanks. Is there a utility function to find closest segment? Or what approach would be best for that?
Anton Lavrenov
@lavrton
@eoghanmccarthy use power of math.
There is nothing in Konva for that.
pingdojo
@pingdojo

@pingdojo why do you need it?

@lavrton Customizing the Transformer anchor styles without manually creating a new component. The anchorShape in the above example would be optional and default to the regular Transformer styles.

Anton Lavrenov
@lavrton
How do you want to change styles?
pingdojo
@pingdojo

How do you want to change styles?

By providing a Konva.Shape that has predefined styles as an anchor component. In the example above this would be a Circle instead of the default Rect

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