How to draw continuous lines? - perfect-freehand HTML
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!
import * as React from "react"
import getStroke from "perfect-freehand"
import { getSvgPathFromStroke } from "./utils"
export default function Example() {
const [points, setPoints] = 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]])
}
}
return (
<svg
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
style={{ touchAction: "none" }}
>
{points && (
<path
d={getSvgPathFromStroke(
getStroke(points)
)}
/>
)}
</svg>
)
}
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!
Asked Jul 07 '22 07:07
mirabledictu
2 Answer:
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>
)
}
1
Answered Jun 21 '21 at 02:07
mirabledictu
Besides the script you can have multiple options besides having an HTML tag for getting some body part bold with it‘s font properties to run effectively for website essay writer IE. Y may run with some limitation working with HTML but you would have plenty pf variations and options how you do this.
1
Answered Jul 07 '22 at 07:07
Albert Silva
Read next
- js-ipfs Running OrbitDB tests in js-ipfs CI - JavaScript
- tdesktop [BUG] OSD cause the app to freeze - Cplusplus
- No image output of any notation when used in google colabaratory - pm4py-core
- ActiveRecord 5.2.3 breaks 24:00:00 serialization - tod
- klipper Klippersreen sometimes does not display the current Print C
- Ryujinx crash on Linux trying to play any game C#
- Domain Picker: Integration testing - wp-calypso
- Docker Preview on Apple M1 Silicon - for-mac