Skip to content

Commit 5b510fa

Browse files
FlamencoFlamenco
committed
context2d support for bezier and quadratic curves
1 parent bfc8a23 commit 5b510fa

2 files changed

Lines changed: 97 additions & 8 deletions

File tree

‎jspdf.plugin.context2d.js‎

Lines changed: 62 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -330,28 +330,37 @@
330330
},
331331

332332
bezierCurveTo : function(x1, y1, x2, y2, x, y) {
333-
console.log('bezierCurveTo not implemented');
333+
x1 = this._wrapX(x1);
334+
y1 = this._wrapY(y1);
335+
x2 = this._wrapX(x2);
336+
y2 = this._wrapY(y2);
334337
x = this._wrapX(x);
335338
y = this._wrapY(y);
336339
var obj = {
337-
type : 'lt',
340+
type : 'bct',
341+
x1 : x1,
342+
y1 : y1,
343+
x2 : x2,
344+
y2 : y2,
338345
x : x,
339346
y : y
340347
};
341348
this.path.push(obj);
342349
},
343350

344-
quadradicCurveTo : function(x1, y1, x, y) {
345-
console.log('quadradicCurveTo not implemented');
351+
quadraticCurveTo : function(x1, y1, x, y) {
352+
x1 = this._wrapX(x1);
353+
y1 = this._wrapY(y1);
346354
x = this._wrapX(x);
347355
y = this._wrapY(y);
348356
var obj = {
349-
type : 'lt',
357+
type : 'qct',
358+
x1 : x1,
359+
y1 : y1,
350360
x : x,
351361
y : y
352362
};
353-
this.path.push(obj);
354-
},
363+
this.path.push(obj); },
355364

356365
arc : function(x,y,radius,startAngle,endAngle,anticlockwise) {
357366
x = this._wrapX(x);
@@ -412,6 +421,29 @@
412421
];
413422
deltas.push(delta);
414423
break;
424+
case 'bct':
425+
var delta = [
426+
pt.x1 - this.path[i - 1].x, pt.y1 - this.path[i - 1].y,
427+
pt.x2 - this.path[i - 1].x, pt.y2 - this.path[i - 1].y,
428+
pt.x - this.path[i - 1].x, pt.y - this.path[i - 1].y
429+
];
430+
deltas.push(delta);
431+
break;
432+
case 'qct':
433+
// convert to bezier
434+
var x1 = this.path[i - 1].x + 2.0/3.0 * (pt.x1 - this.path[i - 1].x);
435+
var y1 = this.path[i - 1].y + 2.0/3.0 * (pt.y1 - this.path[i - 1].y);
436+
var x2 = pt.x + 2.0/3.0 * (pt.x1 - pt.x);
437+
var y2 = pt.y + 2.0/3.0 * (pt.y1 - pt.y);
438+
var x3 = pt.x;
439+
var y3 = pt.y;
440+
var delta = [
441+
x1 - this.path[i - 1].x, y1 - this.path[i - 1].y,
442+
x2 - this.path[i - 1].x, y2 - this.path[i - 1].y,
443+
x3 - this.path[i - 1].x, y3 - this.path[i - 1].y
444+
];
445+
deltas.push(delta);
446+
break;
415447
case 'close':
416448
closed = true;
417449
break;
@@ -456,6 +488,29 @@
456488
];
457489
deltas.push(delta);
458490
break;
491+
case 'bct':
492+
var delta = [
493+
pt.x1 - this.path[i - 1].x, pt.y1 - this.path[i - 1].y,
494+
pt.x2 - this.path[i - 1].x, pt.y2 - this.path[i - 1].y,
495+
pt.x - this.path[i - 1].x, pt.y - this.path[i - 1].y
496+
];
497+
deltas.push(delta);
498+
break;
499+
case 'qct':
500+
// convert to bezier
501+
var x1 = this.path[i - 1].x + 2.0/3.0 * (pt.x1 - this.path[i - 1].x);
502+
var y1 = this.path[i - 1].y + 2.0/3.0 * (pt.y1 - this.path[i - 1].y);
503+
var x2 = pt.x + 2.0/3.0 * (pt.x1 - pt.x);
504+
var y2 = pt.y + 2.0/3.0 * (pt.y1 - pt.y);
505+
var x3 = pt.x;
506+
var y3 = pt.y;
507+
var delta = [
508+
x1 - this.path[i - 1].x, y1 - this.path[i - 1].y,
509+
x2 - this.path[i - 1].x, y2 - this.path[i - 1].y,
510+
x3 - this.path[i - 1].x, y3 - this.path[i - 1].y
511+
];
512+
deltas.push(delta);
513+
break;
459514
}
460515
}
461516

‎test/test_context2d.html‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,8 @@
343343

344344
//
345345

346+
pdf.addPage();
347+
y = pad;
346348
ctx.fillText("Testing bezierCurveTo", 20, y + textHeight);
347349
y += textHeight + pad;
348350

@@ -351,9 +353,41 @@
351353
ctx.strokeStyle = "#333";
352354
ctx.beginPath();
353355
ctx.moveTo(100, y);
354-
ctx.bezierCurveTo(150, 100, 350, 100, 400, y);
356+
ctx.bezierCurveTo(150, y+100, 350, y+100, 400, y);
355357
ctx.stroke();
356358
ctx.restore();
359+
360+
y += 100 + pad;
361+
ctx.save();
362+
ctx.lineWidth = 6;
363+
ctx.strokeStyle = "#333";
364+
ctx.beginPath();
365+
ctx.moveTo(100, y);
366+
ctx.bezierCurveTo(150, y+100, 350, y+100, 400, y);
367+
ctx.fill();
368+
ctx.restore();
369+
370+
y += 100 + pad;
371+
ctx.fillText("Testing quadraticCurveTo", 20, y + textHeight);
372+
y += textHeight + pad;
373+
ctx.save();
374+
ctx.lineWidth = 6;
375+
ctx.strokeStyle = "#333";
376+
ctx.beginPath();
377+
ctx.moveTo(100, y);
378+
ctx.quadraticCurveTo(250, y+100, 400, y);
379+
ctx.stroke();
380+
ctx.restore();
381+
382+
y += 100 + pad;
383+
ctx.save();
384+
ctx.lineWidth = 6;
385+
ctx.strokeStyle = "#333";
386+
ctx.beginPath();
387+
ctx.moveTo(100, y);
388+
ctx.quadraticCurveTo(250, y+100, 400, y);
389+
ctx.fill();
390+
ctx.restore();
357391

358392

359393
pdf.addPage();

0 commit comments

Comments
 (0)