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

HTML perfect-freehand

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>
  )
}

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.

Answered Jul 07 '22 at 07:07

Albert Silva

How to draw continuous lines? - perfect-freehand HTML

2 Answer:

Read next

Meta

Recently posts