obtain a brush segment

[lkevinzc]

Thank you for your great work, this package is really helpful!
I noticed the onUpdate is triggered very frequently when the mouse is brushing. Is there a way to just get a segment of brush between the user's click-and-release of the mouse?
Thank you very much!

[vinothpandian]

Hey @lkevinzc,

Yea, you can get the points directly using the low-level Canvas API of react-sketch-canvas. I created an example in issue #14.

If you want it as an SVG path, you can pass the paths directly to the Path component and it will provide you with a path tag.

[lkevinzc]

For example, when the user click the mouse and brush, and release the mouse, we can trigger something like handlePointerUp function to handle this brush segment (e.g. to utilize this segment as label for graph cut)

[vinothpandian]

I understand that you want the last or last 'n' segments of the path, right? You can do that by slicing the path returned from the onUpdate function.

import React from 'react'

const N_SEGMENTS = 1;

function Sketch() {
    const [sketchSegment, setSketchSegment] = React.setState()

    const onUpdate = (canvasPaths) => {
        const segment = canvasPaths.slice(-N_SEGMENTS);
        setSketchSegment(segment)
    }

    return (
      <ReactSketchCanvas
        onUpdate={onUpdate}
      />
    );
}

[lkevinzc]

Thank you so much for your help! Another quick question is exportImage seems to only export the brushes, is there any way to export the background image itself?

[vinothpandian]

Unfortunately, this is still pending (see issue #13).

[lkevinzc]

Thank you so much for all your help! Appreciate your time for answering and also developing this package!