Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom paths #143

Open
bitttttten opened this issue Nov 17, 2023 · 0 comments · May be fixed by #168
Open

Custom paths #143

bitttttten opened this issue Nov 17, 2023 · 0 comments · May be fixed by #168

Comments

@bitttttten
Copy link

Is your feature request related to a problem? Please describe.
I would love to be able to give my own path generator script to react-sketch-canvas. For example on https://www.tldraw.com/ they have a few different brush types that use a custom generator to produce the SVG. It would be great to be able to drop in our own pens to react-sketch-canvas.

Describe the solution you'd like
Perhaps a way to pass a callback that receives the current path as an array and takes back an SVG path?

Thinking out loud here although I can imagine a callback something like the below:

<ReactSketchCanvas
      style={styles}
      width="600"
      height="400"
      strokeWidth={4}
      strokeColor="red"
      getSvgPathFromPoints={(points: Vec2d[]) => `M${points.map(getPoint)}`}
    />
vinothpandian added a commit that referenced this issue Aug 17, 2024
Fixes #143

Add support for custom path generator in `ReactSketchCanvas`.

* Add `getSvgPathFromPoints` prop to `ReactSketchCanvas` component to accept a callback function for custom path generation.
* Pass `getSvgPathFromPoints` prop to `Canvas` component.
* Add `getSvgPathFromPoints` prop to `Canvas` component to accept a callback function for custom path generation.
* Pass `getSvgPathFromPoints` prop to `SvgPath` component.
* Modify `SvgPath` component to use the custom path generator if provided.
* Update documentation in `README.md` to include the new `getSvgPathFromPoints` prop and its usage.
* Add tests in `export.spec.tsx` to verify the functionality of the custom path generator.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/vinothpandian/react-sketch-canvas/issues/143?shareId=XXXX-XXXX-XXXX-XXXX).
@vinothpandian vinothpandian linked a pull request Aug 17, 2024 that will close this issue
vinothpandian added a commit that referenced this issue Aug 18, 2024
Fixes #143

Add support for custom path generator in `ReactSketchCanvas`.

* Add `getSvgPathFromPoints` prop to `ReactSketchCanvas` component to accept a callback function for custom path generation.
* Pass `getSvgPathFromPoints` prop to `Canvas` component.
* Add `getSvgPathFromPoints` prop to `Canvas` component to accept a callback function for custom path generation.
* Pass `getSvgPathFromPoints` prop to `SvgPath` component.
* Modify `SvgPath` component to use the custom path generator if provided.
* Update documentation in `README.md` to include the new `getSvgPathFromPoints` prop and its usage.
* Add tests in `export.spec.tsx` to verify the functionality of the custom path generator.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/vinothpandian/react-sketch-canvas/issues/143?shareId=XXXX-XXXX-XXXX-XXXX).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant