Draw on Image Nativescript


#1

hello guys,
I’m working health care project. And now i have 2 issues :

  • how to draw on image ? i found the plugin nativescript-drawingpad for sloving.
  • But another issue is how to detect position when using this plugin ?
    anyone can help me


#2

DrawingPad is just extended from View. So if you attach gesture events you can find the position where user is touching, hope that helps.


#3

@manojdcoder I means. You can look at upon image.
The body include many part. So i wanna detect what part is drew


#4

If you take a look at the native code of the plugin, the drawing is formed by nothing but just recognizing where user touches. My point was same, add listeners and you will know where exactly he is touching and drawing is made.


#5

@manojdcoder when i attach gesture to DrawingPad by this code :
XML :

<GridLayout id="drawArea"  >
                <Image  src="~/background.png" height = "600"> </Image> 
            <DrawingPad:DrawingPad id="drawingPad" margin="10" 
            height="280" Width="10" penColor="{{ penColor }}"
             penWidth="{{ penWidth }}"  touch="{{ onTouch }}"/>
            
            </GridLayout>

Typescript :

onTouch(args: TouchGestureEventData) {
    console.log(
        "Touch point: [" + args.getX() + ", " + args.getY());
  }

It still work. i can detect the position when user touch but an other issue is that i can’t draw. i only draw in the 1st time. like this:


#6

anyone can help me ?