584782f · elk · git.iko.soy

git.iko.soy/elk

on master help sign in

Get dashed lines working again for shapes and paths.

584782fevancz14 years ago

runtime/Render/Collage.js+20−22

compare with master

unifiedsplit

@@ -10,7 +10,6 @@ var newElement = Utils.newElement, addTo = Utils.addTo,

11function trace(ctx, path) {

12 var points = fromList(path);

13− console.log(points);

14 var i = points.length - 1;

13 var i = points.length - 1;

15 if (i <= 0) return;

14 if (i <= 0) return;

16 ctx.moveTo(points[i]._0, points[i]._1);

15 ctx.moveTo(points[i]._0, points[i]._1);

@@ -22,21 +21,23 @@ function trace(ctx, path) {

22}

21}

24function line(ctx,style,path) {

23function line(ctx,style,path) {

25− var isSolid = style.dashing.ctor === 'Nil';

26− isSolid ? trace(ctx, path) : customLineHelp(ctx, style, path);

24+ style.dashing.ctor === 'Nil' ? trace(ctx, path) : customLineHelp(ctx, style, path);

27 ctx.stroke();

25 ctx.stroke();

28}

26}

30−function customLineHelp(ctx, pattern, points) {

28+function customLineHelp(ctx, style, path) {

29+ var points = fromList(path);

30+ if (path.closed) points.push(points[0]);

31+ var pattern = fromList(style.dashing);

31 var i = points.length - 1;

32 var i = points.length - 1;

32 if (i <= 0) return;

33 if (i <= 0) return;

33− var x0 = points[i][1], y0 = points[i][2];

34+ var x0 = points[i]._0, y0 = points[i]._1;

34 var x1=0, y1=0, dx=0, dy=0, remaining=0, nx=0, ny=0;

35 var x1=0, y1=0, dx=0, dy=0, remaining=0, nx=0, ny=0;

35 var pindex = 0, plen = pattern.length;

36 var pindex = 0, plen = pattern.length;

36 var draw = true, segmentLength = pattern[0];

37 var draw = true, segmentLength = pattern[0];

37 ctx.moveTo(x0,y0);

38 ctx.moveTo(x0,y0);

38 while (i--) {

39 while (i--) {

39− x1 = points[i][1]; y1 = points[i][2];

40+ x1 = points[i]._0; y1 = points[i]._1;

40 dx = x1 - x0; dy = y1 - y0;

41 dx = x1 - x0; dy = y1 - y0;

41 remaining = Math.sqrt(dx * dx + dy * dy);

42 remaining = Math.sqrt(dx * dx + dy * dy);

42 while (segmentLength <= remaining) {

43 while (segmentLength <= remaining) {

@@ -93,7 +94,6 @@ function gradient(ctx, grad) {

93}

94}

95function drawShape(redo, ctx, style, path) {

96function drawShape(redo, ctx, style, path) {

96− console.log(style, path);

97 trace(ctx, path);

98 var sty = style.ctor;

99 ctx.fillStyle =

@@ -107,7 +107,6 @@ function drawImage(redo, ctx, form) {

107 img.onload = redo;

108 img.src = fromString(form._3);

109 var w = form._0, h = form._1, pos = form._2;

110− console.log(w,h,pos);

111 ctx.drawImage(img, pos._0, pos._1, w, h, -w/2, -h/2, w, h);

110 ctx.drawImage(img, pos._0, pos._1, w, h, -w/2, -h/2, w, h);

112}

111}

113

112

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

118 if (form.scale !== 1) ctx.scale(form.scale, form.scale);

117 if (form.scale !== 1) ctx.scale(form.scale, form.scale);

119 ctx.beginPath();

118 ctx.beginPath();

120 var f = form.form;

119 var f = form.form;

121− console.log(f);

122 switch(f.ctor) {

120 switch(f.ctor) {

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

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

124 case 'FShape':

122 case 'FShape':

@@ -137,16 +135,13 @@ function renderForm(redo,ctx,form) {

137

135

138function renderForms(redo, ctx, forms) {

136function renderForms(redo, ctx, forms) {

139 var fs = fromList(forms);

137 var fs = fromList(forms);

140− console.log(fs);

141 for (var i = 0, len = fs.length; i < len; ++i) {

138 for (var i = 0, len = fs.length; i < len; ++i) {

142− renderForm(redo,ctx,fs[i]);

139+ renderForm(redo, ctx, fs[i]);

143 }

140 }

144}

141}

145

142

146function collageForms(w,h,forms) {

143function collageForms(w,h,forms) {

147 var canvas = newElement('canvas');

144 var canvas = newElement('canvas');

148− w = w|0;

149− h = h|0;

150 canvas.style.width = w + 'px';

145 canvas.style.width = w + 'px';

151 canvas.style.height = h + 'px';

146 canvas.style.height = h + 'px';

152 canvas.style.display = "block";

147 canvas.style.display = "block";

@@ -155,7 +150,6 @@ function collageForms(w,h,forms) {

155 function redo() { renderForms(this,ctx,forms); }

150 function redo() { renderForms(this,ctx,forms); }

156 if (canvas.getContext) {

151 if (canvas.getContext) {

157 var ctx = canvas.getContext('2d');

152 var ctx = canvas.getContext('2d');

158− console.log(forms);

159 renderForms(redo,ctx,forms);

153 renderForms(redo,ctx,forms);

160 return canvas;

154 return canvas;

161 }

155 }

@@ -163,21 +157,25 @@ function collageForms(w,h,forms) {

163 return canvas;

157 return canvas;

164}

158}

165

159

166−function collageElement(w, h, m, elem) {

160+function collageElement(width, height, x, y, theta, scale, elem) {

167 var e = Render.render(elem);

161 var e = Render.render(elem);

168− var matrix = 'matrix(' + m[0] + ',' + m[3] + ',' + m[1] + ',' +

162+ var w = elem.props.width,

169− m[4] + ',' + m[2] + ',' + m[5] + ')';

163+ h = elem.props.height,

164+ t = 'translate(' + (width + f.x - w/2) + 'px,'+ (height - f.y - h/2) + 'px)',

165+ r = theta === 0 ? '' : 'rotate(' + theta + 'rad)',

166+ s = scale === 1 ? '' : 'scale(' + scale + ',' + scale + ')';

167+ // var m = 'matrix(' + mtrx[0] + ',' + mtrx[3] + ',' + mtrx[1] + ',' +

168+ // mtrx[4] + ',' + mtrx[2] + ',' + mtrx[5] + ')';

170− addTransform(e.style, matrix);

169+ addTransform(e.style, t + ' ' + s + ' ' + r);

171 var div = newElement('div');

170 var div = newElement('div');

172 addTo(div,e);

171 addTo(div,e);

173− div.style.width = (w|0) + "px";

172+ div.style.width = width + 'px';

174− div.style.height = (h|0) + "px";

173+ div.style.height = height + 'px';

175− div.style.overflow = "hidden";

174+ div.style.overflow = 'hidden';

176 return div;

175 return div;

177}

176}

178

177

179function render(model) {

178function render(model) {

180− console.log(model);

181 return collageForms(model.w, model.h, model.forms);

179 return collageForms(model.w, model.h, model.forms);

182}

180}

183

181