How to access signature coordinates (x,y) and velocity

[mznr]

I need to access signature coordinates (x,y) and velocity in my app because I want to send them to a server. How is it possible to get them from "Signature"?

[YanYuanFE]

Do you want to get the coordinates and speed of each point in the process of drawing the signature？

[mznr]

Yes, concurrent with drawing I need the coordinations.

[mznr]

And if it is possible to get the coordinates after signature completion, please let me know. thank you.

[jalinegm]

I have the same interest. I needed to get the points of each stroke, like the undo feature from signature_pad.js.
I was trying to edit app.js, but I can't get the return from signaturePad.toData() from the original js to React Native code using ref.

[jalinegm]

Check my last pull request: https://github.com/YanYuanFE/react-native-signature-canvas/pull/146 I got the strokes.

Example App.js using new files from pull:

import React, { useRef, useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import SignatureScreen from "react-native-signature-canvas";

export default function App() {
  const ref = useRef();

  const handleSignature = (signature) => {
    console.log(signature);
  };

  const getData = (data) => {
    data = JSON.parse(data);
    console.log(data);
    //each stroke have color and a points array
    data.forEach((stroke) => {
      console.log("\n ** stroke: **")
      stroke.points.forEach((p) =>
        console.log("time:" + p.time + "\npoints: " + p.x + "," + p.y)
      );
    });
  };

  return (
    <View style={styles.container}>
      <SignatureScreen ref={ref} onOK={handleSignature} onGetData={getData} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

[mznr]

@jalinegm thank you very much for your sample

[mznr]

@jalinegm Thank you for your sample. That's appreciated.