d2a0a03 · elk · git.iko.soy

git.iko.soy/elk

Add opacity to the collage API

commitd2a0a0305a3275588941cd760f2efe66a4bb6820 authorevancz <info@elm-lang.org> dateThu 13 Jun 2013, 12:00 (13 years ago) parent6fc3032

2 files changed+9−1

compare with master

unifiedsplit

libraries/Graphics/Collage.elm+7−1 runtime/Render/Collage.js+2

libraries/Graphics/Collage.elm+7−1

@@ -14,6 +14,7 @@ type Form = {

1414 scale : Float,

1515 x : Float,

1616 y : Float,

17+ alpha : Float,

1718 form : BasicForm

1819 }

1920

@@ -75,7 +76,8 @@ data BasicForm

7576 | FElement Element

7677 | FGroup Matrix2D [Form]

7778

78−form f = { theta = 0, scale = 1, x = 0, y = 0, form = f }

79+form : BasicForm -> Form

80+form f = { theta=0, scale=1, x=0, y=0, alpha=1, form=f }

7981

8082fill style shape = form (FShape (Either.Right style) shape)

8183

@@ -147,6 +149,10 @@ moveX x f = { f | x <- f.x + x }

147149moveY : Float -> Form -> Form

148150moveY y f = { f | y <- f.y + y }

149151

152+-- Set the opacity of a `Form`. The default is 1, and 0 is totally transparent.

153+opacity : Float -> Form -> Form

154+opacity a f = { f | alpha <- a }

155+

150156-- A collage is a collection of 2D forms. There are no strict positioning

151157-- relationships between forms, so you are free to do all kinds of 2D graphics.

152158collage : Int -> Int -> [Form] -> Element

runtime/Render/Collage.js+2

@@ -140,6 +140,7 @@ function renderForm(redo, ctx, form) {

140140 if (scale !== 1) ctx.scale(scale,scale);

141141 ctx.beginPath();

142142 var f = form.form;

143+ if (f.alpha !== 1) ctx.globalAlpha = f.alpha;

143144 switch(f.ctor) {

144145 case 'FPath' : drawLine(ctx, f._0, f._1); break;

145146 case 'FImage': drawImage(redo, ctx, f); break;

@@ -291,6 +292,7 @@ function updateTracker(w,h,div) {

291292

292293 container.style.width = w + 'px';

293294 container.style.height = h + 'px';

295+ if (form.alpha !== 1) container.style.opacity = form.alpha;

294296

295297 var elem = form.form._0;

296298 var node = container.firstChild;