Skip to content

Added Bézier curves. #25

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

Merged
merged 1 commit into from
Sep 13, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions docs/Graphics/Canvas.md
Original file line number Diff line number Diff line change
Expand Up @@ -727,4 +727,41 @@ setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :

Set the Context2D fillstyle to the CanvasGradient.

#### `QuadraticCurve`

``` purescript
type QuadraticCurve = { cpx :: Number, cpy :: Number, x :: Number, y :: Number }
```

A type representing a quadratic Bézier curve.
- Bézier control point: (`cpx`, `cpy`)
- Ending point coordinates: (`x`, `y`)

#### `quadraticCurveTo`

``` purescript
quadraticCurveTo :: forall eff. QuadraticCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
```

Draw a quadratic Bézier curve.

#### `BezierCurve`

``` purescript
type BezierCurve = { cp1x :: Number, cp1y :: Number, cp2x :: Number, cp2y :: Number, x :: Number, y :: Number }
```

A type representing a cubic Bézier curve.
- First Bézier control point: (`cp1x`, `cp1y`)
- Second Bézier control point: (`cp2x`, `cp2y`)
- Ending point: (`x`, `y`)

#### `bezierCurveTo`

``` purescript
bezierCurveTo :: forall eff. BezierCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
```

Draw a cubic Bézier curve.


17 changes: 16 additions & 1 deletion src/Graphics/Canvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -540,7 +540,22 @@ exports.setGradientFillStyle = function(gradient) {
};
};
};


exports.quadraticCurveTo = function(qCurve) {
return function(ctx) {
return function() {
ctx.quadraticCurveTo(qCurve.cpx, qCurve.cpy, qCurve.x, qCurve.y);
return ctx;
};
};
};

exports.bezierCurveTo = function(bCurve) {
return function(ctx) {
return function() {
ctx.bezierCurveTo(bCurve.cp1x, bCurve.cp1y, bCurve.cp2x, bCurve.cp2y, bCurve.x, bCurve.y);
return ctx;
};
};
};

36 changes: 36 additions & 0 deletions src/Graphics/Canvas.purs
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ module Graphics.Canvas
, CanvasGradient()
, LinearGradient()
, RadialGradient()
, QuadraticCurve()
, BezierCurve()

, getCanvasElementById
, getContext2D
Expand Down Expand Up @@ -96,6 +98,9 @@ module Graphics.Canvas
, createRadialGradient
, addColorStop
, setGradientFillStyle

, quadraticCurveTo
, bezierCurveTo
) where

import Prelude
Expand Down Expand Up @@ -511,3 +516,34 @@ foreign import addColorStop :: forall eff. Number -> String -> CanvasGradient ->

-- | Set the Context2D fillstyle to the CanvasGradient.
foreign import setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D

-- | A type representing a quadratic Bézier curve.
-- | - Bézier control point: (`cpx`, `cpy`)
-- | - Ending point coordinates: (`x`, `y`)

type QuadraticCurve =
{ cpx :: Number
, cpy :: Number
, x :: Number
, y :: Number
}

-- | Draw a quadratic Bézier curve.
foreign import quadraticCurveTo :: forall eff. QuadraticCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D

-- | A type representing a cubic Bézier curve.
-- | - First Bézier control point: (`cp1x`, `cp1y`)
-- | - Second Bézier control point: (`cp2x`, `cp2y`)
-- | - Ending point: (`x`, `y`)

type BezierCurve =
{ cp1x :: Number
, cp1y :: Number
, cp2x :: Number
, cp2y :: Number
, x :: Number
, y :: Number
}

-- | Draw a cubic Bézier curve.
foreign import bezierCurveTo :: forall eff. BezierCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D