enhanced android svg to have viewBox for correct scaling

nativescript-community · May 25, 2017 · eab9cca · eab9cca
1 parent aeb855c
commit eab9cca
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -6,12 +6,12 @@
         <StackLayout>
             <DrawingPad:DrawingPad backgroundColor="#222" id="drawingPad" margin="10" height="280" penColor="{{ penColor }}" penWidth="{{ penWidth }}" />
             <StackLayout orientation="horizontal">
-                <Button text="Get Drawing (Image)" tap="{{ getMyDrawing }}" />
-                <Button text="Get Drawing (SVG)" tap="{{ getMyDrawingSvg }}" marginLeft="5" />
+                <Button text="Get Image" tap="{{ getMyDrawing }}" />
+                <Button text="Get SVG" tap="{{ getMyDrawingSvg }}" />
             </StackLayout>
             <StackLayout orientation="horizontal">
                 <Button text="Clear" tap="{{ clearMyDrawing }}" />
-                <Button text="Pick Color" tap="{{ openColorPicker }}" marginLeft="5" />                
+                <Button text="Pick Color" tap="{{ openColorPicker }}" />                
             </StackLayout>
             <GridLayout padding="10" rows="*, *" columns="*, *">
                 <Label text="Pen Width:" class="message" textWrap="true" row="0" col="0" />

diff --git a/drawingpad.android.ts b/drawingpad.android.ts
@@ -75,8 +75,11 @@ export class DrawingPad extends DrawingPadBase {
         return new Promise((resolve, reject) => {
             try {
                 if (!this.nativeView.isEmpty()) {
-                    let data = this.nativeView.getSignatureSvg();
-                    resolve(data);
+                    let data: string = this.nativeView.getSignatureSvg();
+
+                    // Append viewbox to the svg for correct scaling
+                    const svgHeaderRegEx = /<svg (.*) height="(\d+)" width="(\d+)"(.*)>/i
+                    resolve(data.replace(svgHeaderRegEx, `<svg $1 viewBox="0, 0, $3, $2" height="$2" width="$3"$4>`));
                 } else {
                     reject("DrawingPad is empty.");
                 }