Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat transform svg #1370

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Feat transform svg #1370

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dd35cd9
add vector (and especially svg) transformations rotate,translate and …
May 13, 2018
9be01a5
Revert "add vector (and especially svg) transformations rotate,transl…
May 13, 2018
ca5da4d
add vector (and especially svg) transformations rotate, translate
May 13, 2018
eddb542
´try to repair travis build
May 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,931 changes: 1,423 additions & 1,508 deletions build/pdfmake.js
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 15 additions & 2 deletions build/pdfmake.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/pdfmake.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion build/vfs_fonts.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dev-playground/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@ <h1>Playground does not make too much sense when horizontal resolution is below

var editor = ace.edit('editor');
setupEditor(editor);
var names = ['basics', 'styles1', 'styles2', 'styles3', 'columns', 'tables', 'lists', 'margin', 'images' ];
var names = ['basics', 'styles1', 'styles2', 'styles3', 'columns', 'tables', 'lists', 'margin', 'images', 'vectors' ];

var i = 0;
['basics', 'named-styles', 'inline-styling', 'style-overrides', 'columns', 'tables', 'lists', 'margins', 'images'].forEach(function(example) {
['basics', 'named-styles', 'inline-styling', 'style-overrides', 'columns', 'tables', 'lists', 'margins', 'images', 'vectors'].forEach(function(example) {
$scope.examples.push({
name: names[i++],
activate: function() {
Expand Down
144 changes: 144 additions & 0 deletions dev-playground/public/samples/vectors
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
content: [
{
text: [
'This ',
{text: 'is', color: 'green'},
' the first ',
{text: 'paragraph', color: 'red'}
]
},
{
canvas: [
{
type: 'rect',
x: 0,
y: 0,
w: 310,
h: 260,
r: 5,
dash: {length: 5},
// lineWidth: 10,
lineColor: 'blue',
},
{
type: 'rect',
x: 1,
y: 1,
w: 308,
h: 258,
r: 4,
lineColor: 'red',
color: '#ffffe0',
},
{
type: 'polyline',
lineWidth: 3,
closePath: true,
points: [{x: 10, y: 10}, {x: 35, y: 40}, {x: 100, y: 40}, {x: 125, y: 10}]
},
{
type: 'polyline',
lineWidth: 2,
color: 'blue',
lineColor: 'red',
points: [{x: 10, y: 110}, {x: 35, y: 140}, {x: 100, y: 140}, {x: 125, y: 110}, {x: 10, y: 110}]
},
{
type: 'line',
x1: 40, y1: 60,
x2: 260, y2: 60,
lineWidth: 3
},
{
type: 'line',
x1: 40, y1: 80,
x2: 260, y2: 80,
lineWidth: 10,
lineCap: 'round'
},
{
type: 'line',
x1: 40, y1: 100,
x2: 260, y2: 100,
lineWidth: 10,
lineCap: 'square'
},
{
type: 'ellipse',
x: 150, y: 140,
color: 'red',
fillOpacity: 0.5,
r1: 80, r2: 60
},
{
type: 'rect',
x: 150,
y: 200,
w: 150,
h: 50,
},
{
type: 'rect',
x: 10, y: 200, w: 100, h: 10,
linearGradient: ['red', 'blue']
},
{
type: 'rect',
x: 10, y: 215, w: 100, h: 10,
linearGradient: ['red', 'green', 'blue']
},
{
type: 'rect',
x: 10, y: 230, w: 100, h: 10,
linearGradient: ['red', 'yellow', 'green', 'blue']
},
//svg example:
//first: transformations
{
function: 'translate',
x: 250,
y: 400
},
{
function: 'scale',
x: 0.5,
y: 0.5
},
{
function: 'rotate',
angle: 45
},
//draw the svg
{
type: 'path',
lineWidth: 1,
color: 'blue',
lineColor: 'yellow',
d: 'M150 0 L75 200 L225 200 Z',
},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi ! I was wondering if there was svg support for pdfMake then I saw you pull request. Thanks for doing it !

Now that I'm here, I find the API not declarative enough comparing to the pdfMake API, and too far from the svg one.
A better alternative would be to contain those transformations on the element being transformed instead of separate instructions :

As requested in #807

{ type: 'rect', x: 150, y: 200, w: 150, h: 50, rotate:45, translate: {x: 10, y: 1}, scale: 1 }

However order of transforms do matters so maybe something like that would do the job:

{ 
  type: 'rect', 
  x: 150,
  y: 200,
  w: 150,
  h: 50,
  transform(s): [
    {translate: {x: 10, y: 1}},
    {rotate: 45},
    {scale: 1},
  ],
}

Which is close to the svg API transform="translate(10, 1) scale(-1, 1)"

And if it is needed to apply the same operations to multiple elements maybe introduce a node of type 'group' like the <g> node in svg ?

Last point, I we want a better svg support maybe introduce 2 other transforms : skew (and skewX and skewY) and matrix. Skew is not implemented by pdfkit but there is a generic transform method that can take any matrix, and the matrices for skew are available here : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

//re-transformation
{
function: 'reRotate',
angle: 45
},
{
function: 'reScale',
x: 0.5,
y: 0.5
},
{
function: 'reTranslate',
x: 250,
y: 400
}
]
},
'This text should be rendered under canvas',
{
color: 'black',

text: [
'This should be black ',
]
}
]
Binary file modified examples/pdfs/vectors.pdf
View file
Open in desktop
Binary file not shown.
39 changes: 39 additions & 0 deletions examples/vectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,45 @@ var docDefinition = {
type: 'rect',
x: 10, y: 230, w: 100, h: 10,
linearGradient: ['red', 'yellow', 'green', 'blue']
},
//svg example:
//first: transformations
{
function: 'translate',
x: 250,
y: 400
},
{
function: 'scale',
x: 0.5,
y: 0.5
},
{
function: 'rotate',
angle: 45
},
//draw the svg
{
type: 'path',
lineWidth: 1,
color: 'blue',
lineColor: 'yellow',
d: 'M150 0 L75 200 L225 200 Z',
},
//re-transformation
{
function: 'reRotate',
angle: 45
},
{
function: 'reScale',
x: 0.5,
y: 0.5
},
{
function: 'reTranslate',
x: 250,
y: 400
}
]
},
Expand Down
27 changes: 27 additions & 0 deletions src/printer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,6 +499,33 @@ function renderVector(vector, pdfKitDoc) {
break;
}

switch (vector.function){
case 'translate':
pdfKitDoc.translate(vector.x, vector.y);
break;

case 'retranslate':
case 'reTranslate':
pdfKitDoc.translate((-1) * vector.x, (-1) * vector.y);
break;

case 'scale':
pdfKitDoc.scale(vector.x, vector.y, vector.options);
break;

case 'rescale':
case 'reScale':
pdfKitDoc.scale( 1/(vector.x), 1/(vector.y), vector.options);
break;
case 'rotate':
pdfKitDoc.rotate(vector.angle);
break;
case 'rerotate':
case 'reRotate':
pdfKitDoc.rotate((-1) * vector.angle);
break;
}

if (vector.color && vector.lineColor) {
pdfKitDoc.fillColor(vector.color, vector.fillOpacity || 1);
pdfKitDoc.strokeColor(vector.lineColor, vector.strokeOpacity || 1);
Expand Down