Closed mirabledictu closed 3 years ago
What I did for now which is working, I guess
import * as React from "react"
import getStroke from "perfect-freehand"
import { getSvgPathFromStroke } from "./utils"
export default function Example() {
const [points, setPoints] = React.useState()
const [paths, setPaths] = React.useState()
function handlePointerDown(e) {
e.preventDefault()
setPoints([[e.pageX, e.pageY, e.pressure]])
}
function handlePointerMove(e) {
if (e.buttons === 1) {
e.preventDefault()
setPoints([...points, [e.pageX, e.pageY, e.pressure]])
}
}
function handlePointerUp(e) {
e.preventDefault()
setPaths(points)
}
return (
<svg
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
style={{ touchAction: "none" }}
>
{points && (
<path
d={getSvgPathFromStroke(
getStroke(points)
)}
/>
)}
{paths.map((p,index) => <path
key={index}
d={p}/>
)}
</svg>
)
}
First of all, very awesome library! Thank you for creating this.
So this isn't really an issue but just want to ask if there's an easy way to do this.
I've tried the React example and it works perfectly!
But this one clears the previous line because there is only one path right? I hope there's an easy example of making it continuous, like in your demo. Thank you!