git.iko.soy/elk
on bbbd6ee help sign in
elk/runtime/Render/Collage.js
185 lines 5.5 kB history raw
2ElmRuntime.Render.Collage = function() {
3'use strict';
5var Render = ElmRuntime.use(ElmRuntime.Render.Element);
6var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
7var newElement = Utils.newElement, addTo = Utils.addTo,
8 extract = Utils.extract, fromList = Utils.fromList,
9 fromString = Utils.fromString, addTransform = Utils.addTransform;
11function trace(ctx, path) {
12 var points = fromList(path);
13 var i = points.length - 1;
14 if (i <= 0) return;
15 ctx.moveTo(points[i]._0, points[i]._1);
16 while (i--) { ctx.lineTo(points[i]._0, points[i]._1); }
17 if (path.closed) {
18 i = points.length - 1;
19 ctx.lineTo(points[i]._0, points[i]._1);
20 }
23function line(ctx,style,path) {
24 style.dashing.ctor === 'Nil' ? trace(ctx, path) : customLineHelp(ctx, style, path);
25 ctx.stroke();
28function customLineHelp(ctx, style, path) {
29 var points = fromList(path);
30 if (path.closed) points.push(points[0]);
31 var pattern = fromList(style.dashing);
32 var i = points.length - 1;
33 if (i <= 0) return;
34 var x0 = points[i]._0, y0 = points[i]._1;
35 var x1=0, y1=0, dx=0, dy=0, remaining=0, nx=0, ny=0;
36 var pindex = 0, plen = pattern.length;
37 var draw = true, segmentLength = pattern[0];
38 ctx.moveTo(x0,y0);
39 while (i--) {
40 x1 = points[i]._0; y1 = points[i]._1;
41 dx = x1 - x0; dy = y1 - y0;
42 remaining = Math.sqrt(dx * dx + dy * dy);
43 while (segmentLength <= remaining) {
44 x0 += dx * segmentLength / remaining;
45 y0 += dy * segmentLength / remaining;
46 ctx[draw ? 'lineTo' : 'moveTo'](x0, y0);
47 // update starting position
48 dx = x1 - x0; dy = y1 - y0;
49 remaining = Math.sqrt(dx * dx + dy * dy);
50 // update pattern
51 draw = !draw;
52 pindex = (pindex + 1) % plen;
53 segmentLength = pattern[pindex];
54 }
55 if (remaining > 0) {
56 ctx[draw ? 'lineTo' : 'moveTo'](x1, y1);
57 segmentLength -= remaining;
58 }
59 x0 = x1; y0 = y1;
60 }
63function drawLine(ctx, style, path) {
64 ctx.lineWidth = style.width;
65 ctx.lineCap = style.cap.ctor.toLowerCase();
66 ctx.lineJoin = style.join.ctor.toLowerCase();
67 ctx.miterLimit = style.miterLimit;
68 ctx.strokeStyle = extract(style.color);
69 return line(ctx, style, path);
72function texture(redo, ctx, src) {
73 var img = new Image();
74 img.src = fromString(src);
75 img.onload = redo;
76 return ctx.createPattern(img, 'repeat');
79function gradient(ctx, grad) {
80 var g;
81 if (grad.ctor === 'Linear') {
82 var p1 = grad._1, p2 = grad._2;
83 g = ctx.createLinearGradient(p1._0, p1._1, p2._0, p2._1);
84 } else {
85 var p1 = grad._1, p2 = grad._3;
86 g = ctx.createRadialGradient(p1._0, p1._1, grad._2, p2._0, p2._1, grad._4);
87 }
88 var stops = fromList(grad._0);
89 for (var i = stops.length; i--; ) {
90 var stop = stops[i];
91 g.addColorStop(stop._0, extract(stop._1));
92 }
93 return g;
96function drawShape(redo, ctx, style, path) {
97 trace(ctx, path);
98 var sty = style.ctor;
99 ctx.fillStyle =
100 sty === 'Solid' ? extract(style._0) :
101 sty === 'Texture' ? texture(redo, ctx, style._0) : gradient(ctx, style._0);
102 ctx.fill();
105function drawImage(redo, ctx, form) {
106 var img = new Image();
107 img.onload = redo;
108 img.src = fromString(form._3);
109 var w = form._0, h = form._1, pos = form._2;
110 ctx.drawImage(img, pos._0, pos._1, w, h, -w/2, -h/2, w, h);
113function renderForm(redo,ctx,form) {
114 ctx.save();
115 if (form.x !== 0 || form.y !== 0) ctx.translate(form.x, form.y);
116 if (form.theta !== 0) ctx.rotate(form.theta);
117 if (form.scale !== 1) ctx.scale(form.scale, form.scale);
118 ctx.beginPath();
119 var f = form.form;
120 switch(f.ctor) {
121 case 'FPath' : drawLine(ctx, f._0, f._1); break;
122 case 'FShape':
123 if (f._0.ctor === 'Left') {
124 f._1.closed = true;
125 drawLine(ctx, f._0._0, f._1);
126 } else {
127 drawShape(redo, ctx, f._0._0, f._1);
128 }
129 break;
130 case 'FImage': drawImage(redo, ctx, f); break;
131 case 'FGroup': renderForms(redo, ctx, f._0); break;
132 }
133 ctx.restore();
136function renderForms(redo, ctx, forms) {
137 var fs = fromList(forms);
138 for (var i = 0, len = fs.length; i < len; ++i) {
139 renderForm(redo, ctx, fs[i]);
140 }
143function collageForms(w,h,forms) {
144 var canvas = newElement('canvas');
145 canvas.style.width = w + 'px';
146 canvas.style.height = h + 'px';
147 canvas.style.display = "block";
148 canvas.width = w;
149 canvas.height = h;
150 function redo() { renderForms(this,ctx,forms); }
151 if (canvas.getContext) {
152 var ctx = canvas.getContext('2d');
153 ctx.translate(w/2, h/2);
154 renderForms(redo,ctx,forms);
155 return canvas;
156 }
157 canvas.innerHTML = "Your browser does not support canvas.";
158 return canvas;
161function collageElement(width, height, x, y, theta, scale, elem) {
162 var e = Render.render(elem);
163 var w = elem.props.width,
164 h = elem.props.height,
165 t = 'translate(' + (width + f.x - w/2) + 'px,'+ (height - f.y - h/2) + 'px)',
166 r = theta === 0 ? '' : 'rotate(' + theta + 'rad)',
167 s = scale === 1 ? '' : 'scale(' + scale + ',' + scale + ')';
168 // var m = 'matrix(' + mtrx[0] + ',' + mtrx[3] + ',' + mtrx[1] + ',' +
169 // mtrx[4] + ',' + mtrx[2] + ',' + mtrx[5] + ')';
170 addTransform(e.style, t + ' ' + s + ' ' + r);
171 var div = newElement('div');
172 addTo(div,e);
173 div.style.width = width + 'px';
174 div.style.height = height + 'px';
175 div.style.overflow = 'hidden';
176 return div;
179function render(model) {
180 return collageForms(model.w, model.h, model.forms);
183return { render:render };
185};