Skip to content

Commit 157e3e4

Browse files
pablohesspablohess
committed
Possible to add circles and ellipses
1 parent c8a787e commit 157e3e4

2 files changed

Lines changed: 84 additions & 18 deletions

File tree

‎examples/basic.htm‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242

4343
<h1>jsPDF Demos</h1>
4444

45-
<p>Examples for using jsPDF with Data URIs below. Go <a href="http://jspdf.googlecode.com/">back to project homepage</a>.</p>
45+
<p>Examples for using jsPDF with Data URIs below. Go <a href="https://github.com/MrRio/jsPDF">back to project homepage</a>.</p>
4646

4747
<h2>Simple Two-page Text Document</h2>
4848
<pre>var doc = new jsPDF();
@@ -53,7 +53,7 @@ <h2>Simple Two-page Text Document</h2>
5353

5454
// Output as Data URI
5555
doc.output('datauri');</pre>
56-
<a href="javascript:demo1()">Run Code</a>
56+
<a href="javascript:demoTwoPageDocument()">Run Code</a>
5757

5858
<h2>Different font sizes</h2>
5959
<pre>var doc = new jsPDF();
@@ -65,7 +65,7 @@ <h2>Different font sizes</h2>
6565

6666
// Output as Data URI
6767
doc.output('datauri');</pre>
68-
<a href="javascript:demo2()">Run Code</a>
68+
<a href="javascript:demoFontSizes()">Run Code</a>
6969

7070
<h2>Different font types</h2>
7171
<pre>var doc = new jsPDF();
@@ -89,7 +89,7 @@ <h2>Different font types</h2>
8989

9090
// Output as Data URI
9191
doc.output('datauri');</pre>
92-
<a href="javascript:demo3()">Run Code</a>
92+
<a href="javascript:demoFontTypes()">Run Code</a>
9393

9494
<h2>Different text colors</h2>
9595
<pre>var doc = new jsPDF();
@@ -111,7 +111,7 @@ <h2>Different text colors</h2>
111111

112112
// Output as Data URI
113113
doc.output('datauri');</pre>
114-
<a href="javascript:demo4()">Run Code</a>
114+
<a href="javascript:demoTextColors()">Run Code</a>
115115

116116
<h2>Adding metadata</h2>
117117
<pre>var doc = new jsPDF();
@@ -128,7 +128,7 @@ <h2>Adding metadata</h2>
128128

129129
// Output as Data URI
130130
doc.output('datauri');</pre>
131-
<a href="javascript:demo5()">Run Code</a>
131+
<a href="javascript:demoMetadata()">Run Code</a>
132132

133133

134134
<h2>Example of user input</h2>
@@ -155,7 +155,7 @@ <h2>Example of user input</h2>
155155
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
156156
}
157157
doc.output('datauri');</pre>
158-
<a href="javascript:demo6()">Run Code</a>
158+
<a href="javascript:demoUserInput()">Run Code</a>
159159

160160
<h2>Draw example: rectangles / squares</h2>
161161
<pre>var doc = new jsPDF();
@@ -180,7 +180,7 @@ <h2>Draw example: rectangles / squares</h2>
180180

181181
// Output as Data URI
182182
doc.output('datauri');</pre>
183-
<a href="javascript:demo7()">Run Code</a>
183+
<a href="javascript:demoRectangles()">Run Code</a>
184184

185185
<h2>Draw example: lines</h2>
186186
<pre>var doc = new jsPDF();
@@ -212,11 +212,28 @@ <h2>Draw example: lines</h2>
212212

213213
// Output as Data URI
214214
doc.output('datauri');</pre>
215-
<a href="javascript:demo8()">Run Code</a>
215+
<a href="javascript:demoLines()">Run Code</a>
216+
217+
<h2>Draw circles and ellipses: lines</h2>
218+
<pre>var doc = new jsPDF();
219+
220+
doc.ellipse(40, 20, 10, 5);
221+
222+
doc.setFillColor(0,0,255);
223+
doc.ellipse(80, 20, 10, 5, 'F');
224+
225+
doc.setLineWidth(1);
226+
doc.setDrawColor(0);
227+
doc.setFillColor(255,0,0);
228+
doc.circle(120, 20, 5, 'FD');
229+
230+
// Output as Data URI
231+
doc.output('datauri');</pre>
232+
<a href="javascript:demoCircles()">Run Code</a>
216233

217234
<script type="text/javascript">
218235

219-
function demo1() {
236+
function demoTwoPageDocument() {
220237
var doc = new jsPDF();
221238
doc.text(20, 20, 'Hello world!');
222239
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
@@ -227,7 +244,7 @@ <h2>Draw example: lines</h2>
227244
doc.output('datauri');
228245
}
229246

230-
function demo2() {
247+
function demoFontSizes() {
231248
var doc = new jsPDF();
232249
doc.setFontSize(22);
233250
doc.text(20, 20, 'This is a title');
@@ -239,7 +256,7 @@ <h2>Draw example: lines</h2>
239256
doc.output('datauri');
240257
}
241258

242-
function demo3() {
259+
function demoFontTypes() {
243260
var doc = new jsPDF();
244261

245262
doc.text(20, 20, 'This is the default font.');
@@ -264,7 +281,7 @@ <h2>Draw example: lines</h2>
264281
doc.output('datauri');
265282
}
266283

267-
function demo4() {
284+
function demoTextColors() {
268285
var doc = new jsPDF();
269286

270287
doc.setTextColor(100);
@@ -286,7 +303,7 @@ <h2>Draw example: lines</h2>
286303
doc.output('datauri');
287304
}
288305

289-
function demo5() {
306+
function demoMetadata() {
290307
var doc = new jsPDF();
291308
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
292309

@@ -303,7 +320,7 @@ <h2>Draw example: lines</h2>
303320
doc.output('datauri');
304321
}
305322

306-
function demo6() {
323+
function demoUserInput() {
307324
var name = prompt('What is your name?');
308325
var multiplier = prompt('Enter a number:');
309326
multiplier = parseInt(multiplier);
@@ -330,7 +347,7 @@ <h2>Draw example: lines</h2>
330347

331348
}
332349

333-
function demo7() {
350+
function demoRectangles() {
334351
var doc = new jsPDF();
335352

336353
doc.rect(20, 20, 10, 10); // empty square
@@ -355,7 +372,7 @@ <h2>Draw example: lines</h2>
355372
doc.output('datauri');
356373
}
357374

358-
function demo8() {
375+
function demoLines() {
359376
var doc = new jsPDF();
360377

361378
doc.line(20, 20, 60, 20); // horizontal line
@@ -387,6 +404,22 @@ <h2>Draw example: lines</h2>
387404
doc.output('datauri');
388405
}
389406

407+
function demoCircles() {
408+
var doc = new jsPDF();
409+
410+
doc.ellipse(40, 20, 10, 5);
411+
412+
doc.setFillColor(0,0,255);
413+
doc.ellipse(80, 20, 10, 5, 'F');
414+
415+
doc.setLineWidth(1);
416+
doc.setDrawColor(0);
417+
doc.setFillColor(255,0,0);
418+
doc.circle(120, 20, 5, 'FD');
419+
420+
// Output as Data URI
421+
doc.output('datauri');
422+
}
390423
</script>
391424

392425

‎jspdf.js‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ var jsPDF = function(orientation, unit, format){
3838
if (typeof format === 'undefined') format = 'a4';
3939

4040
// Private properties
41-
var version = '20100328';
41+
var version = '20120127';
4242
var buffer = '';
4343

4444
var pdfVersion = '1.3'; // PDF Version
@@ -390,6 +390,39 @@ var jsPDF = function(orientation, unit, format){
390390
op = 'B';
391391
}
392392
out(sprintf('%.2f %.2f %.2f %.2f re %s', x * k, (pageHeight - y) * k, w * k, -h * k, op));
393+
return _jsPDF;
394+
},
395+
ellipse: function(x, y, rx, ry, style) {
396+
var op = 'S';
397+
if (style === 'F') {
398+
op = 'f';
399+
} else if (style === 'FD' || style === 'DF') {
400+
op = 'B';
401+
}
402+
var lx = 4/3*(Math.SQRT2-1)*rx;
403+
var ly = 4/3*(Math.SQRT2-1)*ry;
404+
out(sprintf('%.2f %.2f m %.2f %.2f %.2f %.2f %.2f %.2f c',
405+
(x+rx)*k, (pageHeight-y)*k,
406+
(x+rx)*k, (pageHeight-(y-ly))*k,
407+
(x+lx)*k, (pageHeight-(y-ry))*k,
408+
x*k, (pageHeight-(y-ry))*k));
409+
out(sprintf('%.2f %.2f %.2f %.2f %.2f %.2f c',
410+
(x-lx)*k, (pageHeight-(y-ry))*k,
411+
(x-rx)*k, (pageHeight-(y-ly))*k,
412+
(x-rx)*k, (pageHeight-y)*k));
413+
out(sprintf('%.2f %.2f %.2f %.2f %.2f %.2f c',
414+
(x-rx)*k, (pageHeight-(y+ly))*k,
415+
(x-lx)*k, (pageHeight-(y+ry))*k,
416+
x*k, (pageHeight-(y+ry))*k));
417+
out(sprintf('%.2f %.2f %.2f %.2f %.2f %.2f c %s',
418+
(x+lx)*k, (pageHeight-(y+ry))*k,
419+
(x+rx)*k, (pageHeight-(y+ly))*k,
420+
(x+rx)*k, (pageHeight-y)*k,
421+
op));
422+
return _jsPDF;
423+
},
424+
circle: function(x, y, r, style) {
425+
return this.ellipse(x, y, r, r, style);
393426
},
394427
setProperties: function(properties) {
395428
documentProperties = properties;

0 commit comments

Comments
 (0)