svg-arc-to-cubic-bezier

WebJar for svg-arc-to-cubic-bezier

License

License

ISC
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

svg-arc-to-cubic-bezier
Last Version

Last Version

3.2.0
Release Date

Release Date

Type

Type

jar
Description

Description

svg-arc-to-cubic-bezier
WebJar for svg-arc-to-cubic-bezier
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/colinmeinke/svg-arc-to-cubic-bezier

Download svg-arc-to-cubic-bezier

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/svg-arc-to-cubic-bezier/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>svg-arc-to-cubic-bezier</artifactId>
    <version>3.2.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/svg-arc-to-cubic-bezier/
implementation 'org.webjars.npm:svg-arc-to-cubic-bezier:3.2.0'
// https://jarcasting.com/artifacts/org.webjars.npm/svg-arc-to-cubic-bezier/
implementation ("org.webjars.npm:svg-arc-to-cubic-bezier:3.2.0")
'org.webjars.npm:svg-arc-to-cubic-bezier:jar:3.2.0'
<dependency org="org.webjars.npm" name="svg-arc-to-cubic-bezier" rev="3.2.0">
  <artifact name="svg-arc-to-cubic-bezier" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='svg-arc-to-cubic-bezier', version='3.2.0')
)
libraryDependencies += "org.webjars.npm" % "svg-arc-to-cubic-bezier" % "3.2.0"
[org.webjars.npm/svg-arc-to-cubic-bezier "3.2.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

SVG arc to cubic bezier

A function that takes an SVG arc curve as input, and maps it to one or more cubic bezier curves.

I extracted the a2c function from SVG path, as I wanted to use it on its own.

All credit, thanks and respect goes to:

It blew my mind. Thank you!

Installation

npm install svg-arc-to-cubic-bezier

Usage

import arcToBezier from 'svg-arc-to-cubic-bezier';

const previousPoint = { x: 100, y: 100 }

const currentPoint = {
  x: 700,
  y: 100,
  curve: {
    type: 'arc',
    rx: 300,
    ry: 200,
    largeArcFlag: 30,
    sweepFlag: 0,
    xAxisRotation: 0,
  },
};

const curves = arcToBezier({
  px: previousPoint.x,
  py: previousPoint.y,
  cx: currentPoint.x,
  cy: currentPoint.y,
  rx: currentPoint.curve.rx,
  ry: currentPoint.curve.ry,
  xAxisRotation: currentPoint.curve.xAxisRotation,
  largeArcFlag: currentPoint.curve.largeArcFlag,
  sweepFlag: currentPoint.curve.sweepFlag,
});

curves.forEach( c => console.log( c ));

// [
//   {
//     x1: 159.7865795437111,
//     y1: 244.97474575043722,
//     x2: 342.5677510865157,
//     y2: 362.49999701503634,
//     x: 508.253174689854,
//     y: 362.4999967447917,
//   },
//   {
//     x1: 673.9385982931924,
//     y1: 362.49999647454695,
//     x2: 759.7865756485664,
//     y2: 244.97474477179443,
//     x: 699.9999995964145,
//     y: 99.99999902135724,
//   },
// ]

Versions

Version
3.2.0
3.1.3
3.1.2
3.0.0