git.iko.soy/elk
on master help sign in
More work getting Collage in shape.
0b0c37cevancz
libraries/Graphics/Collage.elm+1−2
compare with master
unifiedsplit
@@ -9,8 +9,7 @@ import Native.Graphics.Matrix as Matrix
9type Form = { transform : Matrix, form : BasicForm }
9type Form = { transform : Matrix, form : BasicForm }
10
10
11data FillStyle
11data FillStyle
12− = NoFill
13− | Solid Color
12+ = Solid Color
14 | Texture String
13 | Texture String
15 | Gradient Gradient
14 | Gradient Gradient
16
15
libraries/Graphics/Geometry.elm+3−3
@@ -4,10 +4,10 @@
4
4
5module Geometry where
5module Geometry where
6
6
7−data Path = Path [(Float,Float)]
7+type Path = [(Float,Float)]
8
8
9−path = Path
9+path ps = ps
10−segment p1 p2 = Path [p1,p2]
10+segment p1 p2 = [p1,p2]
11
11
12type Shape = [(Float,Float)]
12type Shape = [(Float,Float)]
13
13
libraries/Graphics/LineStyle.elm+1−1
@@ -4,7 +4,7 @@ module Graphics.LineStyle where
4import Graphics.Color as Color
4import Graphics.Color as Color
5
5
6data LineCap = Butt | Round | Square
6data LineCap = Butt | Round | Square
7−data LineJoin = Soft | Sharp | Clip
7+data LineJoin = Smooth | Sharp | Clipped
8
8
9type LineStyle = {
9type LineStyle = {
10 color : Color,
10 color : Color,
runtime/Render/Collage.js+45−30
@@ -3,9 +3,12 @@ ElmRuntime.Render.Collage = function() {
3'use strict';
3'use strict';
4
4
5var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
5var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
6−var newElement = Utils.newElement, addTo = Utils.addTo, extract = Utils.extract;
6+var newElement = Utils.newElement, addTo = Utils.addTo,
7+ extract = Utils.extract, fromList = Utils.fromList,
8+ fromString = Utils.fromString;
7
9
8function trace(ctx, path) {
10function trace(ctx, path) {
11+ var points = fromList(path);
9 var i = points.length - 1;
12 var i = points.length - 1;
10 if (i <= 0) return;
13 if (i <= 0) return;
11 ctx.moveTo(points[i]._0, points[i]._1);
14 ctx.moveTo(points[i]._0, points[i]._1);
@@ -57,39 +60,47 @@ function drawLine(ctx, style, path) {
57 ctx.miterLimit = style.miterLimit;
60 ctx.miterLimit = style.miterLimit;
58 ctx.strokeStyle = extract(style.color);
61 ctx.strokeStyle = extract(style.color);
59 return line(ctx, style, path);
62 return line(ctx, style, path);
60−}
61−
62−function filled(ctx,color,points) {
63− tracePoints(ctx,points);
64− ctx.fillStyle = extract(color);
65− ctx.fill();
66}
63}
67
64
68−function textured(redo,ctx,src,points) {
65+function texture(redo, ctx, src) {
69 var img = new Image();
66 var img = new Image();
70− img.src = JS.castStringToJSString(src);
67+ img.src = fromString(src);
71 img.onload = redo;
68 img.onload = redo;
72−
73− tracePoints(ctx,points);
74− ctx.fillStyle = ctx.createPattern(img,'repeat');
69+ return ctx.createPattern(img, 'repeat');
75− ctx.fill();
76}
70}
77
71
78−function drawShape(redo,ctx,shapeStyle,color,points) {
72+function gradient(ctx, grad) {
79− switch(shapeStyle[0]) {
73+ var g;
80− case "Filled": return filled(ctx,color,points);
74+ if (grad.ctor === 'Linear') {
81− case "Outlined": return solid(ctx,color,points);
75+ var p1 = grad._1, p2 = grad._2;
82− case "Textured": return textured(redo,ctx,shapeStyle[1],points);
76+ g = ctx.createLinearGradient(p1._0, p1._1, p2._0, p2._1);
83− case "CustomOutline":
77+ } else {
84− return customLine(shapeStyle[1],ctx,color,points);
78+ var p1 = grad._1, p2 = grad._3;
79+ g = ctx.createRadialGradient(p1._0, p1._1, grad._2, p2._0, p2._1, grad._4);
85 }
80 }
81+ var stops = fromList(grad._0);
82+ for (var i = stops.length; i--; ) {
83+ var stop = stops[i];
84+ g.addColorStop(stop._0, extract(stop._1));
86−};
85+ }
86+ return g;
87+}
87
88
89+function drawShape(redo, ctx, style, path) {
90+ trace(ctx, path);
91+ var sty = style.ctor;
92+ ctx.fillStyle =
93+ sty === 'Solid' ? extract(style._0) :
94+ sty === 'Texture' ? texture(redo, ctx, style._0) : gradient(ctx, style._0);
95+ ctx.fill();
96+}
97+
88−function drawImage(redo,ctx,w,h,src) {
98+function drawImage(redo, ctx, form) {
89 var img = new Image();
99 var img = new Image();
90 img.onload = redo;
100 img.onload = redo;
91− img.src = JS.castStringToJSString(src);
101+ img.src = fromString(form._3);
102+ var w = form._0, h = form._1, pos = form._2;
92− ctx.drawImage(img,-w/2,-h/2,w,h);
103+ ctx.drawImage(img, pos._0, pos._1, w, h, -w/2, -h/2, w, h);
93}
104}
94
105
95function renderForm(redo,ctx,form) {
106function renderForm(redo,ctx,form) {
@@ -97,17 +108,21 @@ function renderForm(redo,ctx,form) {
97 var m = form.transform;
108 var m = form.transform;
98 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
109 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
99 ctx.beginPath();
110 ctx.beginPath();
111+ var f = form.form;
100− switch(form.form.ctor) {
112+ switch(f.ctor) {
101− case 'FPath' : drawLine(ctx, form._0, form._1); break;
113+ case 'FPath' : drawLine(ctx, f._0, f._1); break;
114+ case 'FShape':
115+ if (form.form._0.ctor === 'Left') drawLine(ctx, f._0._0, f._1);
102− case 'FShape': drawShape(redo, ctx, form._0, form._1); break;
116+ else drawShape(redo, ctx, f._0._0, f._1);
117+ break;
103− case 'FImage': drawImage(redo, ctx, form._0, form._1, form._2, form._3); break;
118+ case 'FImage': drawImage(redo, ctx, f); break;
104− case 'FGroup': renderForms(redo, ctx, form.form._0); break;
119+ case 'FGroup': renderForms(redo, ctx, f._0); break;
105 }
120 }
106 ctx.restore();
121 ctx.restore();
107}
122}
108
123
109function renderForms(redo, ctx, forms) {
124function renderForms(redo, ctx, forms) {
110− forms = toArray(forms);
125+ forms = fromList(forms);
111 for (var i = forms.length; i--; ) {
126 for (var i = forms.length; i--; ) {
112 renderForm(redo,ctx,forms[i]);
127 renderForm(redo,ctx,forms[i]);
113 }
128 }
runtime/Render/Utils.js+5−5
@@ -18,13 +18,13 @@ function extract(c) {
18 return 'rgba(' + c._0 + ',' + c._1 + ',' + c._2 + ',' + c._3 + ')';
18 return 'rgba(' + c._0 + ',' + c._1 + ',' + c._2 + ',' + c._3 + ')';
19}
19}
20
20
21−var fromList = Elm.JavaScript({}).fromList;
21+var JS = Elm.JavaScript({});
22−var eq = Elm.Native.Utils({}).eq;
23
22
24return {addTo:addTo,
23return {addTo:addTo,
25 newElement:newElement,
24 newElement:newElement,
26− extract:extract,
25+ extract : extract,
27− fromList:fromList,
26+ fromList: JS.fromList,
28− eq:eq
27+ fromString: JS.fromString,
28+ eq: Elm.Native.Utils({}).eq
29 };
29 };
30};
30};