From e2831ea3242c4532ea54678805a0c6e3b770fafa Mon Sep 17 00:00:00 2001 From: pablohess Date: Thu, 19 Jan 2012 20:23:40 +0100 Subject: [PATCH 1/4] Possible to change font --- examples/basic.htm | 54 +++++++++++++++++++++-- jspdf.js | 104 +++++++++++++++++++++++++++++++++++++++------ 2 files changed, 141 insertions(+), 17 deletions(-) diff --git a/examples/basic.htm b/examples/basic.htm index dea59adfb..e811cc949 100644 --- a/examples/basic.htm +++ b/examples/basic.htm @@ -67,6 +67,29 @@

Different font sizes

doc.output('datauri'); Run Code +

Different font types

+
var doc = new jsPDF();
+	
+doc.text(20, 20, 'This is the default font.');
+	
+doc.setFont("courier");
+doc.text(20, 30, 'This is courier normal.');
+	
+doc.setFont("times");
+doc.setFontType("italic");
+doc.text(20, 40, 'This is times italic.');
+	
+doc.setFont("helvetica");
+doc.setFontType("bold");
+doc.text(20, 50, 'This is helvetica bold.');
+	
+doc.setFont("courier");
+doc.setFontType("bolditalic");
+doc.text(20, 60, 'This is courier bolditalic.');
+	
+// Output as Data URI
+doc.output('datauri');
+Run Code

Adding metadata

var doc = new jsPDF();
@@ -83,7 +106,7 @@ 
Adding metadata

 
 // Output as Data URI
 doc.output('datauri');
-Run Code +Run Code

Example of user input

@@ -110,7 +133,7 @@

Example of user input

doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier)); } doc.output('datauri'); -Run Code +Run Code @@ -141,6 +164,31 @@

Example of user input

function demo3() { var doc = new jsPDF(); + + doc.text(20, 20, 'This is the default font.'); + + doc.setFont("courier"); + doc.setFontType("normal"); + doc.text(20, 30, 'This is courier normal.'); + + doc.setFont("times"); + doc.setFontType("italic"); + doc.text(20, 40, 'This is times italic.'); + + doc.setFont("helvetica"); + doc.setFontType("bold"); + doc.text(20, 50, 'This is helvetica bold.'); + + doc.setFont("courier"); + doc.setFontType("bolditalic"); + doc.text(20, 60, 'This is courier bolditalic.'); + + // Output as Data URI + doc.output('datauri'); +} + +function demo4() { + var doc = new jsPDF(); doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.'); // Optional - set properties on the document @@ -156,7 +204,7 @@

Example of user input

doc.output('datauri'); } -function demo4() { +function demo5() { var name = prompt('What is your name?'); var multiplier = prompt('Enter a number:'); multiplier = parseInt(multiplier); diff --git a/jspdf.js b/jspdf.js index 3ebf5ecc1..6e0f4c53c 100644 --- a/jspdf.js +++ b/jspdf.js @@ -7,6 +7,15 @@ var jsPDF = function(orientation, unit, format){ + var HELVETICA = "helvetica"; + var TIMES = "times"; + var COURIER = "courier"; + + var NORMAL = "normal"; + var BOLD = "bold"; + var ITALIC = "italic"; + var BOLD_ITALIC = "bolditalic"; + // Default parameter values if (typeof orientation === 'undefined') orientation = 'P'; if (typeof unit === 'undefined') unit = 'mm'; @@ -31,6 +40,7 @@ var jsPDF = function(orientation, unit, format){ var state = 0; // Current document state var pages = new Array(); var offsets = new Array(); // List of offsets + var fonts = new Array(); // List of fonts var lineWidth = 0.200025; // 2mm var pageHeight; var pageWidth; @@ -38,7 +48,11 @@ var jsPDF = function(orientation, unit, format){ var fontNumber; // @TODO: This is temp, replace with real font handling var documentProperties = {}; var fontSize = 16; // Default font size + var fontName = HELVETICA; // Default font + var fontType = NORMAL; // Default type var pageFontSize = 16; + var pageFontName = HELVETICA; + var pageFontType = NORMAL; // Initilisation if (unit == 'pt') { @@ -147,18 +161,38 @@ var jsPDF = function(orientation, unit, format){ } var putFonts = function() { - // @TODO: Only supports core font hardcoded to Helvetica + for (var i = 0; i < fonts.length; i++) { + putFont(fonts[i]); + } + } + + var putFont = function(font) { newObject(); - fontNumber = objectNumber; - name = 'Helvetica'; - out('<>'); + font.number = objectNumber; + out('<>'); out('endobj'); } + var addFonts = function() { + addFont('Helvetica', HELVETICA, NORMAL); + addFont('Helvetica-Bold', HELVETICA, BOLD); + addFont('Helvetica-Oblique', HELVETICA, ITALIC); + addFont('Helvetica-BoldOblique', HELVETICA, BOLD_ITALIC); + addFont('Courier', COURIER, NORMAL); + addFont('Courier-Bold', COURIER, BOLD); + addFont('Courier-Oblique', COURIER, ITALIC); + addFont('Courier-BoldOblique', COURIER, BOLD_ITALIC); + addFont('Times-Roman', TIMES, NORMAL); + addFont('Times-Bold', TIMES, BOLD); + addFont('Times-Italic', TIMES, ITALIC); + addFont('Times-BoldItalic', TIMES, BOLD_ITALIC); + } + + var addFont = function(name, fontName, fontType) { + fonts.push({key: 'F' + (fonts.length + 1), number: objectNumber, name: name, fontName: fontName, type: fontType}); + } + var putImages = function() { // @TODO: Implement image functionality } @@ -168,7 +202,10 @@ var jsPDF = function(orientation, unit, format){ out('/Font <<'); // Do this for each font, the '1' bit is the index of the font // fontNumber is currently the object number related to 'putFonts' - out('/F1 ' + fontNumber + ' 0 R'); + for (var i = 0; i < fonts.length; i++) { + out('/' + fonts[i].key + ' ' + fonts[i].number + ' 0 R'); + } + out('>>'); out('/XObject <<'); putXobjectDict(); @@ -282,13 +319,24 @@ var jsPDF = function(orientation, unit, format){ // Set draw color out(drawColor); - // Set font - TODO - // 16 is the font size + // Set font pageFontSize = fontSize; - out('BT /F1 ' + parseInt(fontSize) + '.00 Tf ET'); + pageFontName = fontName; + pageFontType = fontType; + out('BT /' + getFont() + ' ' + parseInt(fontSize) + '.00 Tf ET'); + } + + var getFont = function() { + for (var i = 0; i < fonts.length; i++) { + if (fonts[i].fontName == fontName && fonts[i].type == fontType) { + return fonts[i].key; + } + } + return 'F1'; // shouldn't happen } // Add the first page automatically + addFonts(); _addPage(); // Escape text @@ -303,10 +351,11 @@ var jsPDF = function(orientation, unit, format){ }, text: function(x, y, text) { // need page height - if(pageFontSize != fontSize) { - out('BT /F1 ' + parseInt(fontSize) + '.00 Tf ET'); + if(pageFontSize != fontSize || pageFontName != fontName || pageFontType != fontType) { + out('BT /' + getFont() + ' ' + parseInt(pageFontSize) + '.00 Tf ET'); pageFontSize = fontSize; } + var str = sprintf('BT %.2f %.2f Td (%s) Tj ET', x * k, (pageHeight - y) * k, pdfEscape(text)); out(str); return _jsPDF; @@ -346,6 +395,33 @@ var jsPDF = function(orientation, unit, format){ fontSize = size; return _jsPDF; }, + setFont: function(name) { + switch(name.toLowerCase()) { + case HELVETICA: + case TIMES: + case COURIER: + fontName = name.toLowerCase(); + break; + default: + // do nothing + break; + } + return _jsPDF; + }, + setFontType: function(type) { + switch(type.toLowerCase()) { + case NORMAL: + case BOLD: + case ITALIC: + case BOLD_ITALIC: + fontType = type.toLowerCase(); + break; + default: + // do nothing + break; + } + return _jsPDF; + }, setLineWidth: function(width) { out(sprintf('%.2f w', (width * k))); return _jsPDF; From 48969471d9d4c8ab339d9d321ec30ed1221fe6e4 Mon Sep 17 00:00:00 2001 From: pablohess Date: Fri, 20 Jan 2012 08:26:56 +0100 Subject: [PATCH 2/4] Possible to change text color --- examples/basic.htm | 50 +++++++++++++++++++++++++++++++++++++++++++--- jspdf.js | 15 +++++++++++--- 2 files changed, 59 insertions(+), 6 deletions(-) diff --git a/examples/basic.htm b/examples/basic.htm index e811cc949..c93026b13 100644 --- a/examples/basic.htm +++ b/examples/basic.htm @@ -91,6 +91,28 @@

Different font types

doc.output('datauri'); Run Code +

Different text colors

+
var doc = new jsPDF();
+
+doc.setTextColor(100);
+doc.text(20, 20, 'This is gray.');
+	
+doc.setTextColor(150);
+doc.text(20, 30, 'This is light gray.');	
+	
+doc.setTextColor(255,0,0);
+doc.text(20, 40, 'This is red.');
+	
+doc.setTextColor(0,255,0);
+doc.text(20, 50, 'This is green.');
+	
+doc.setTextColor(0,0,255);
+doc.text(20, 60, 'This is blue.');
+	
+// Output as Data URI
+doc.output('datauri');
+Run Code +

Adding metadata

var doc = new jsPDF();
 doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
@@ -106,7 +128,7 @@ 
Adding metadata

 
 // Output as Data URI
 doc.output('datauri');
-Run Code +Run Code

Example of user input

@@ -133,7 +155,7 @@

Example of user input

doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier)); } doc.output('datauri'); -Run Code +Run Code @@ -189,6 +211,28 @@

Example of user input

function demo4() { var doc = new jsPDF(); + + doc.setTextColor(100); + doc.text(20, 20, 'This is gray.'); + + doc.setTextColor(150); + doc.text(20, 30, 'This is light gray.'); + + doc.setTextColor(255,0,0); + doc.text(20, 40, 'This is red.'); + + doc.setTextColor(0,255,0); + doc.text(20, 50, 'This is green.'); + + doc.setTextColor(0,0,255); + doc.text(20, 60, 'This is blue.'); + + // Output as Data URI + doc.output('datauri'); +} + +function demo5() { + var doc = new jsPDF(); doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.'); // Optional - set properties on the document @@ -204,7 +248,7 @@

Example of user input

doc.output('datauri'); } -function demo5() { +function demo6() { var name = prompt('What is your name?'); var multiplier = prompt('Enter a number:'); multiplier = parseInt(multiplier); diff --git a/jspdf.js b/jspdf.js index 6e0f4c53c..0cd75d286 100644 --- a/jspdf.js +++ b/jspdf.js @@ -50,6 +50,7 @@ var jsPDF = function(orientation, unit, format){ var fontSize = 16; // Default font size var fontName = HELVETICA; // Default font var fontType = NORMAL; // Default type + var textColor = "0 g"; var pageFontSize = 16; var pageFontName = HELVETICA; var pageFontType = NORMAL; @@ -356,7 +357,7 @@ var jsPDF = function(orientation, unit, format){ pageFontSize = fontSize; } - var str = sprintf('BT %.2f %.2f Td (%s) Tj ET', x * k, (pageHeight - y) * k, pdfEscape(text)); + var str = sprintf('BT ' + textColor + ' %.2f %.2f Td (%s) Tj ET', x * k, (pageHeight - y) * k, pdfEscape(text)); out(str); return _jsPDF; }, @@ -429,12 +430,20 @@ var jsPDF = function(orientation, unit, format){ setDrawColor: function(r,g,b) { var color; if ((r===0 && g===0 && b===0) || (typeof g === 'undefined')) { - color = sprintf('%.3f G', r/255); + color = sprintf('%.3f g', r/255); } else { - color = sprintf('%.3f %.3f %.3f RG', r/255, g/255, b/255); + color = sprintf('%.3f %.3f %.3f rg', r/255, g/255, b/255); } out(color); return _jsPDF; + }, + setTextColor: function(r,g,b) { + if ((r===0 && g===0 && b===0) || (typeof g === 'undefined')) { + textColor = sprintf('%.3f g', r/255); + } else { + textColor = sprintf('%.3f %.3f %.3f rg', r/255, g/255, b/255); + } + return _jsPDF; } }; return _jsPDF; From aed30440ec55caaf567d0b798f6bce30b12e64bc Mon Sep 17 00:00:00 2001 From: pablohess Date: Fri, 20 Jan 2012 08:54:26 +0100 Subject: [PATCH 3/4] Possible to add filled rectangles --- examples/basic.htm | 49 ++++++++++++++++++++++++++++++++++++++++++++++ jspdf.js | 10 ++++++++++ 2 files changed, 59 insertions(+) diff --git a/examples/basic.htm b/examples/basic.htm index c93026b13..2cb836b3e 100644 --- a/examples/basic.htm +++ b/examples/basic.htm @@ -157,6 +157,30 @@

Example of user input

doc.output('datauri'); Run Code +

Draw example: rectangles / squares

+
var doc = new jsPDF();
+
+doc.rect(20, 20, 10, 10); // empty square
+
+doc.rect(40, 20, 10, 10, 'F'); // filled square
+	
+doc.setDrawColor(255,0,0);
+doc.rect(60, 20, 10, 10); // empty red square
+	
+doc.setDrawColor(255,0,0);
+doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders
+	
+doc.setDrawColor(0);
+doc.setFillColor(255,0,0);
+doc.rect(100, 20, 10, 10, 'F'); // filled red square
+	
+doc.setDrawColor(0);
+doc.setFillColor(255,0,0);
+doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders
+	
+// Output as Data URI
+doc.output('datauri');
+Run Code diff --git a/jspdf.js b/jspdf.js index 0cd75d286..ad980e5b6 100644 --- a/jspdf.js +++ b/jspdf.js @@ -428,6 +428,16 @@ var jsPDF = function(orientation, unit, format){ return _jsPDF; }, setDrawColor: function(r,g,b) { + var color; + if ((r===0 && g===0 && b===0) || (typeof g === 'undefined')) { + color = sprintf('%.3f G', r/255); + } else { + color = sprintf('%.3f %.3f %.3f RG', r/255, g/255, b/255); + } + out(color); + return _jsPDF; + }, + setFillColor: function(r,g,b) { var color; if ((r===0 && g===0 && b===0) || (typeof g === 'undefined')) { color = sprintf('%.3f g', r/255); From 37016fb3e8a159ca80e3296d7603338951088667 Mon Sep 17 00:00:00 2001 From: pablohess Date: Fri, 20 Jan 2012 09:09:11 +0100 Subject: [PATCH 4/4] Added examples for lines and rectangles --- examples/basic.htm | 63 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/examples/basic.htm b/examples/basic.htm index 2cb836b3e..47a1590ab 100644 --- a/examples/basic.htm +++ b/examples/basic.htm @@ -182,6 +182,37 @@

Draw example: rectangles / squares

doc.output('datauri'); Run Code +

Draw example: lines

+
var doc = new jsPDF();
+
+doc.line(20, 20, 60, 20); // horizontal line
+	
+doc.setLineWidth(0.5);
+doc.line(20, 25, 60, 25);
+	
+doc.setLineWidth(1);
+doc.line(20, 30, 60, 30);
+	
+doc.setLineWidth(1.5);
+doc.line(20, 35, 60, 35);
+	
+doc.setDrawColor(255,0,0); // draw red lines
+	
+doc.setLineWidth(0.1);
+doc.line(100, 20, 100, 60); // vertical line
+	
+doc.setLineWidth(0.5);
+doc.line(105, 20, 105, 60);
+	
+doc.setLineWidth(1);
+doc.line(110, 20, 110, 60);
+	
+doc.setLineWidth(1.5);
+doc.line(115, 20, 115, 60);
+	
+// Output as Data URI
+doc.output('datauri');
+Run Code