From e86e49b55f82584fa3a59280e75a53a8902b3b9a Mon Sep 17 00:00:00 2001 From: Ingmar Gagen Date: Wed, 9 Mar 2016 20:37:30 -0800 Subject: [PATCH] Add createPattern, setPatternFillStyle to Graphics.Canvas --- docs/Graphics/Canvas.md | 36 ++++++++++++++++++++++++++++++++++++ src/Graphics/Canvas.js | 19 +++++++++++++++++++ src/Graphics/Canvas.purs | 23 +++++++++++++++++++++++ 3 files changed, 78 insertions(+) diff --git a/docs/Graphics/Canvas.md b/docs/Graphics/Canvas.md index 7f217a6..831ad92 100644 --- a/docs/Graphics/Canvas.md +++ b/docs/Graphics/Canvas.md @@ -43,6 +43,14 @@ data CanvasImageSource :: * Opaque object for drawing elements and things to the canvas. +#### `CanvasPattern` + +``` purescript +data CanvasPattern :: * +``` + +Opaque object describing a pattern. + #### `CanvasGradient` ``` purescript @@ -649,6 +657,34 @@ drawImageScale :: forall eff. Context2D -> CanvasImageSource -> Number -> Number drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D ``` +#### `PatternRepeat` + +``` purescript +data PatternRepeat + = Repeat + | RepeatX + | RepeatY + | NoRepeat +``` + +Enumerates the different types of pattern repetitions. + +#### `createPattern` + +``` purescript +createPattern :: forall eff. CanvasImageSource -> PatternRepeat -> Context2D -> Eff (canvas :: Canvas | eff) CanvasPattern +``` + +Create a new canvas pattern (repeatable image). + +#### `setPatternFillStyle` + +``` purescript +setPatternFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D +``` + +Set the Context2D fillstyle to the CanvasPattern. + #### `LinearGradient` ``` purescript diff --git a/src/Graphics/Canvas.js b/src/Graphics/Canvas.js index 3be6dcc..160104b 100644 --- a/src/Graphics/Canvas.js +++ b/src/Graphics/Canvas.js @@ -501,6 +501,25 @@ exports.drawImageFull = function(ctx) { }; }; +exports.createPatternImpl = function(img) { + return function(repeat) { + return function(ctx) { + return function() { + return ctx.createPattern(img, repeat); + }; + }; + }; +}; + +exports.setPatternFillStyle = function(pattern) { + return function(ctx) { + return function() { + ctx.fillStyle = pattern; + return ctx; + }; + }; +}; + exports.createLinearGradient = function(linearGradient) { return function(ctx) { return function() { diff --git a/src/Graphics/Canvas.purs b/src/Graphics/Canvas.purs index a45a29a..b7d4a01 100644 --- a/src/Graphics/Canvas.purs +++ b/src/Graphics/Canvas.purs @@ -17,6 +17,8 @@ module Graphics.Canvas , Transform() , TranslateTransform() , TextAlign(..) + , CanvasPattern() + , PatternRepeat(..) , CanvasGradient() , LinearGradient() , RadialGradient() @@ -91,6 +93,9 @@ module Graphics.Canvas , drawImageScale , drawImageFull + , createPattern + , setPatternFillStyle + , createLinearGradient , createRadialGradient , addColorStop @@ -123,6 +128,9 @@ type ImageData = { width :: Int, height :: Int, data :: Uint8ClampedArray } -- | Opaque object for drawing elements and things to the canvas. foreign import data CanvasImageSource :: * +-- | Opaque object describing a pattern. +foreign import data CanvasPattern :: * + -- | Opaque object describing a gradient. foreign import data CanvasGradient :: * @@ -471,6 +479,21 @@ foreign import drawImageScale :: forall eff. Context2D -> CanvasImageSource -> N foreign import drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D +-- | Enumerates the different types of pattern repetitions. +data PatternRepeat = Repeat | RepeatX | RepeatY | NoRepeat + +foreign import createPatternImpl :: forall eff. CanvasImageSource -> String -> Context2D -> Eff (canvas :: Canvas | eff) CanvasPattern + +-- | Create a new canvas pattern (repeatable image). +createPattern :: forall eff. CanvasImageSource -> PatternRepeat -> Context2D -> Eff (canvas :: Canvas | eff) CanvasPattern +createPattern img Repeat = createPatternImpl img "repeat" +createPattern img RepeatX = createPatternImpl img "repeat-x" +createPattern img RepeatY = createPatternImpl img "repeat-y" +createPattern img NoRepeat = createPatternImpl img "no-repeat" + +-- | Set the Context2D fillstyle to the CanvasPattern. +foreign import setPatternFillStyle :: forall eff. CanvasPattern -> Context2D -> Eff (canvas :: Canvas | eff) Context2D + -- | A type representing a linear gradient. -- | - Starting point coordinates: (`x0`, `y0`) -- | - Ending point coordinates: (`x1`, `y1`)