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

Export to SVG with correct pen colors #260

Merged
merged 1 commit into from
Jun 11, 2017
Merged

Export to SVG with correct pen colors #260

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 6 additions & 4 deletions src/signature_pad.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ SignaturePad.prototype._strokeUpdate = function (event) {
x: point.x,
y: point.y,
time: point.time,
color: this.penColor,
});
};

Expand Down Expand Up @@ -349,6 +350,7 @@ SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
for (let j = 0; j < group.length; j += 1) {
const rawPoint = group[j];
const point = new Point(rawPoint.x, rawPoint.y, rawPoint.time);
const color = rawPoint.color;

if (j === 0) {
// First point in a group. Nothing to draw yet.
Expand All @@ -358,7 +360,7 @@ SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
// Middle point in a group.
const { curve, widths } = this._addPoint(point);
if (curve && widths) {
drawCurve(curve, widths);
drawCurve(curve, widths, color);
}
} else {
// Last point in a group. Do nothing.
Expand Down Expand Up @@ -387,7 +389,7 @@ SignaturePad.prototype._toSVG = function () {

this._fromData(
pointGroups,
(curve, widths) => {
(curve, widths, color) => {
const path = document.createElement('path');

// Need to check curve for NaN values, these pop up when drawing
Expand All @@ -404,7 +406,7 @@ SignaturePad.prototype._toSVG = function () {

path.setAttribute('d', attr);
path.setAttribute('stroke-width', (widths.end * 2.25).toFixed(3));
path.setAttribute('stroke', this.penColor);
path.setAttribute('stroke', color);
Copy link
Owner

Choose a reason for hiding this comment

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

If there's no default value for color here (and for drawing dots as well), will it work with the existing exported SVG strings? Won't it set color to undefined?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let's test and see...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So this works:

  1. Create a design with multiple colors.
  2. Export to SVG saves design with correct color combinations.
  3. Import from the same SVG shows color combinations correctly.

What doesn't work:

At that point you cannot export to SVG again using 2.1.1 even without the proposed change since the SVG export feature relies on recording the strokes to the this._data array.

The only solution I see would be to repopulate the this._data array by reinterpreting the imported SVG data instead of relying on the canvas itself to draw the imported data.

Copy link
Owner

Choose a reason for hiding this comment

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

Thanks! I've added a note in the README that calling #toData won't really work if signature was loaded using #fromDataURL.

path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');

Expand All @@ -417,7 +419,7 @@ SignaturePad.prototype._toSVG = function () {
circle.setAttribute('r', dotSize);
circle.setAttribute('cx', rawPoint.x);
circle.setAttribute('cy', rawPoint.y);
circle.setAttribute('fill', this.penColor);
circle.setAttribute('fill', rawPoint.color);

svg.appendChild(circle);
},
Expand Down