git.iko.soy/elk
on master help sign in
Add opacity to the collage API
d2a0a03evancz
libraries/Graphics/Collage.elm+7−1
compare with master
unifiedsplit
@@ -14,6 +14,7 @@ type Form = {
14 scale : Float,
14 scale : Float,
15 x : Float,
15 x : Float,
16 y : Float,
16 y : Float,
17+ alpha : Float,
17 form : BasicForm
18 form : BasicForm
18 }
19 }
19
20
@@ -75,7 +76,8 @@ data BasicForm
75 | FElement Element
76 | FElement Element
76 | FGroup Matrix2D [Form]
77 | FGroup Matrix2D [Form]
77
78
79+form : BasicForm -> Form
78−form f = { theta = 0, scale = 1, x = 0, y = 0, form = f }
80+form f = { theta=0, scale=1, x=0, y=0, alpha=1, form=f }
79
81
80fill style shape = form (FShape (Either.Right style) shape)
82fill style shape = form (FShape (Either.Right style) shape)
81
83
@@ -147,6 +149,10 @@ moveX x f = { f | x <- f.x + x }
147moveY : Float -> Form -> Form
149moveY : Float -> Form -> Form
148moveY y f = { f | y <- f.y + y }
150moveY y f = { f | y <- f.y + y }
149
151
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+
150-- A collage is a collection of 2D forms. There are no strict positioning
156-- A collage is a collection of 2D forms. There are no strict positioning
151-- relationships between forms, so you are free to do all kinds of 2D graphics.
157-- relationships between forms, so you are free to do all kinds of 2D graphics.
152collage : Int -> Int -> [Form] -> Element
158collage : Int -> Int -> [Form] -> Element
runtime/Render/Collage.js+2
@@ -140,6 +140,7 @@ function renderForm(redo, ctx, form) {
140 if (scale !== 1) ctx.scale(scale,scale);
140 if (scale !== 1) ctx.scale(scale,scale);
141 ctx.beginPath();
141 ctx.beginPath();
142 var f = form.form;
142 var f = form.form;
143+ if (f.alpha !== 1) ctx.globalAlpha = f.alpha;
143 switch(f.ctor) {
144 switch(f.ctor) {
144 case 'FPath' : drawLine(ctx, f._0, f._1); break;
145 case 'FPath' : drawLine(ctx, f._0, f._1); break;
145 case 'FImage': drawImage(redo, ctx, f); break;
146 case 'FImage': drawImage(redo, ctx, f); break;
@@ -291,6 +292,7 @@ function updateTracker(w,h,div) {
291
292
292 container.style.width = w + 'px';
293 container.style.width = w + 'px';
293 container.style.height = h + 'px';
294 container.style.height = h + 'px';
295+ if (form.alpha !== 1) container.style.opacity = form.alpha;
294
296
295 var elem = form.form._0;
297 var elem = form.form._0;
296 var node = container.firstChild;
298 var node = container.firstChild;