Skip to content

Commit 9d65cb8

Browse files
FlamencoFlamenco
committed
c2d uses radians for arcs
suggested changes
1 parent 25eed3a commit 9d65cb8

File tree

2 files changed

+87
-43
lines changed

2 files changed

+87
-43
lines changed

‎jspdf.plugin.context2d.js‎

Lines changed: 66 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,6 @@
1212
* The goal is to provide a way for current canvas implementations to print directly to a PDF.
1313
*/
1414

15-
function context() {
16-
this.fillStyle = '#000000';
17-
this.strokeStyle = '#000000';
18-
this.font = "12pt Times";
19-
this.textBaseline = 'alphabetic'; //top,bottom,middle,ideographic,alphabetic,hanging
20-
this.lineWidth = 1;
21-
this.lineJoin = 'miter'; //round, bevel, miter
22-
this.lineCap = 'butt'; //butt, round, square
23-
//TODO miter limit //default 10
24-
25-
this.copy = function(ctx) {
26-
this.fillStyle = ctx.fillStyle;
27-
this.strokeStyle = ctx.strokeStyle;
28-
this.font = ctx.font;
29-
this.lineWidth = ctx.lineWidth;
30-
this.lineJoin = ctx.lineJoin;
31-
this.lineCap = ctx.lineCap;
32-
this.textBaseline = ctx.textBaseline;
33-
};
34-
}
35-
3615
(function(jsPDFAPI) {
3716
'use strict';
3817

@@ -46,7 +25,7 @@ function context() {
4625
}
4726
]);
4827

49-
jsPDF.API.context2d = {
28+
jsPDFAPI.context2d = {
5029

5130
f2 : function(number) {
5231
return number.toFixed(2);
@@ -68,6 +47,7 @@ function context() {
6847
},
6948

7049
save : function() {
50+
this.ctx._fontSize = this.pdf.internal.getFontSize();
7151
var ctx = new context();
7252
ctx.copy(this.ctx);
7353
this.ctxStack.push(this.ctx);
@@ -79,17 +59,20 @@ function context() {
7959
this.setFillStyle(this.ctx.fillStyle);
8060
this.setStrokeStyle(this.ctx.strokeStyle);
8161
this.setFont(this.ctx.font);
62+
this.pdf.setFontSize(this.ctx._fontSize);
8263
this.setLineCap(this.ctx.lineCap);
8364
this.setLineWidth(this.ctx.lineWidth);
8465
this.setLineJoin(this.ctx.lineJoin);
8566
},
8667

8768
beginPath : function() {
88-
path = [];
69+
this.path = [];
8970
},
9071

91-
endPath : function() {
92-
//TODO implement
72+
closePath : function() {
73+
this.path.push({
74+
type : 'close'
75+
});
9376
},
9477

9578
setFillStyle : function(style) {
@@ -191,10 +174,12 @@ function context() {
191174

192175
drawImage : function(img,x,y,w,h) {
193176
var format;
194-
if (/data:image\/png.*/i.test(img)) {
195-
format = 'png';
177+
var rx = /data:image\/(\w+).*/i;
178+
var m = rx.exec(img);
179+
if (m != null) {
180+
format = m[1]
196181
} else {
197-
format = 'jpeg';
182+
format = "jpeg";
198183
}
199184
this.pdf.addImage(img, format, x, y, w, h);
200185
},
@@ -208,6 +193,10 @@ function context() {
208193
switch (pt.type) {
209194
case 'mt':
210195
start = pt;
196+
if (typeof start != 'undefined') {
197+
this.pdf.lines(deltas, start.x, start.y, null, 's');
198+
deltas = [];
199+
}
211200
break;
212201
case 'lt':
213202
var delta = [
@@ -226,7 +215,9 @@ function context() {
226215
var pt = this.path[i];
227216
switch (pt.type) {
228217
case 'arc':
229-
this.internal.arc(pt.x, pt.y, pt.radius, pt.startAngle, pt.endAngle, pt.anticlockwise, 's');
218+
var start = pt.startAngle * 360 / (2 * Math.PI);
219+
var end = pt.endAngle * 360 / (2 * Math.PI);
220+
this.internal.arc(pt.x, pt.y, pt.radius, start, end, pt.anticlockwise, 's');
230221
break;
231222
}
232223
}
@@ -243,6 +234,10 @@ function context() {
243234
switch (pt.type) {
244235
case 'mt':
245236
start = pt;
237+
if (typeof start != 'undefined') {
238+
this.pdf.lines(deltas, start.x, start.y, null, 'f');
239+
deltas = [];
240+
}
246241
break;
247242
case 'lt':
248243
var delta = [
@@ -261,7 +256,12 @@ function context() {
261256
var pt = this.path[i];
262257
switch (pt.type) {
263258
case 'arc':
264-
this.internal.arc(pt.x, pt.y, pt.radius, pt.startAngle, pt.endAngle, pt.anticlockwise, 'f');
259+
var start = pt.startAngle * 360 / (2 * Math.PI);
260+
var end = pt.endAngle * 360 / (2 * Math.PI);
261+
this.internal.arc(pt.x, pt.y, pt.radius, start, end, pt.anticlockwise, 'f');
262+
break;
263+
case 'close':
264+
this.pdf.internal.out('h');
265265
break;
266266
}
267267
}
@@ -291,7 +291,7 @@ function context() {
291291
}
292292
};
293293

294-
var c2d = jsPDF.API.context2d;
294+
var c2d = jsPDFAPI.context2d;
295295

296296
c2d.internal = {};
297297

@@ -309,13 +309,21 @@ function context() {
309309

310310
for (var i = 0; i < curves.length; i++) {
311311
var curve = curves[i];
312-
this.pdf.internal.out([
313-
f2((curve.x1 + xc) * k), f2((pageHeight - (curve.y1 + yc)) * k), 'm', f2((curve.x2 + xc) * k), f2((pageHeight - (curve.y2 + yc)) * k), f2((curve.x3 + xc) * k), f2((pageHeight - (curve.y3 + yc)) * k), f2((curve.x4 + xc) * k), f2((pageHeight - (curve.y4 + yc)) * k), 'c'
314-
].join(' '));
312+
if (i == 0) {
313+
this.pdf.internal.out([
314+
f2((curve.x1 + xc) * k), f2((pageHeight - (curve.y1 + yc)) * k), 'm', f2((curve.x2 + xc) * k), f2((pageHeight - (curve.y2 + yc)) * k), f2((curve.x3 + xc) * k), f2((pageHeight - (curve.y3 + yc)) * k), f2((curve.x4 + xc) * k), f2((pageHeight - (curve.y4 + yc)) * k), 'c'
315+
].join(' '));
315316

316-
if (style !== null) {
317-
this.pdf.internal.out(this.pdf.internal.getStyle(style));
317+
} else {
318+
this.pdf.internal.out([
319+
f2((curve.x2 + xc) * k), f2((pageHeight - (curve.y2 + yc)) * k), f2((curve.x3 + xc) * k), f2((pageHeight - (curve.y3 + yc)) * k), f2((curve.x4 + xc) * k), f2((pageHeight - (curve.y4 + yc)) * k), 'c'
320+
].join(' '));
318321
}
322+
//f2((curve.x1 + xc) * k), f2((pageHeight - (curve.y1 + yc)) * k), 'm', f2((curve.x2 + xc) * k), f2((pageHeight - (curve.y2 + yc)) * k), f2((curve.x3 + xc) * k), f2((pageHeight - (curve.y3 + yc)) * k), f2((curve.x4 + xc) * k), f2((pageHeight - (curve.y4 + yc)) * k), 'c'
323+
}
324+
325+
if (style !== null) {
326+
this.pdf.internal.out(this.pdf.internal.getStyle(style));
319327
}
320328
}
321329

@@ -415,3 +423,25 @@ function context() {
415423

416424
return this;
417425
})(jsPDF.API);
426+
427+
function context() {
428+
this.fillStyle = '#000000';
429+
this.strokeStyle = '#000000';
430+
this.font = "12pt times";
431+
this.textBaseline = 'alphabetic'; //top,bottom,middle,ideographic,alphabetic,hanging
432+
this.lineWidth = 1;
433+
this.lineJoin = 'miter'; //round, bevel, miter
434+
this.lineCap = 'butt'; //butt, round, square
435+
//TODO miter limit //default 10
436+
437+
this.copy = function(ctx) {
438+
this.fillStyle = ctx.fillStyle;
439+
this.strokeStyle = ctx.strokeStyle;
440+
this.font = ctx.font;
441+
this.lineWidth = ctx.lineWidth;
442+
this.lineJoin = ctx.lineJoin;
443+
this.lineCap = ctx.lineCap;
444+
this.textBaseline = ctx.textBaseline;
445+
this._fontSize = ctx._fontSize;
446+
};
447+
}

‎test/test_context2d.html‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -122,14 +122,20 @@
122122
//
123123
// rectangles
124124
//
125+
ctx.save();
125126
ctx.fillText("Testing fillRect and strokeRect", 20, y + textHeight);
126127
y += textHeight + pad;
127128

128129
ctx.fillRect(20, y, 20, h);
129130
y += h + pad;
130131

132+
ctx.setFillStyle('#f5f5f5');
133+
ctx.fillRect(20, y, 20, h);
134+
y += h + pad;
135+
131136
ctx.strokeRect(20, y, 20, h);
132137
y += h + pad;
138+
ctx.restore();
133139

134140
//
135141
// lines
@@ -201,12 +207,16 @@
201207
ctx.lineTo(30, y + 40);
202208
ctx.lineTo(10, y + 20);
203209
ctx.lineTo(30, y);
210+
ctx.closePath();
204211
ctx.fill();
205212
y += 50;
206213

207-
// arc
208-
pdf.addPage();
209-
y=0;
214+
215+
//
216+
// arcs
217+
//
218+
pdf.addPage();
219+
y=0;
210220
ctx.fillText("Testing arc, stroke, and fill", 20, y + textHeight);
211221
y += textHeight + pad + 20;
212222

@@ -218,19 +228,23 @@
218228
ctx.stroke();
219229
y += pad + 40;
220230

221-
ctx.arc(50, y, 20, 0, 180, false);
231+
ctx.arc(50, y, 20, 0, Math.PI, false);
222232
ctx.stroke();
223233
y += pad + 40;
224234

225-
ctx.arc(50, y, 20, 0, 180, true);
235+
ctx.arc(50, y, 20, 0, Math.PI, true);
226236
ctx.stroke();
227237
y += pad + 40;
228238

229-
ctx.arc(50, y, 20, 0, 360, false);
239+
ctx.arc(50, y, 20, 0, 2*Math.PI, false);
230240
ctx.stroke();
231241
y += pad + 40;
232242

233-
ctx.arc(50, y, 20, 0, 180, false);
243+
ctx.arc(50, y, 20, 0, 2*Math.PI, false);
244+
ctx.fill();
245+
y += pad + 40;
246+
247+
ctx.arc(50, y, 20, 0, Math.PI, false);
234248
ctx.fill();
235249
y += pad + 40;
236250

0 commit comments

Comments
 (0)