ERROR TypeError: Cannot read property 'getXCoordinate' of undefined

Ionic Framework ionic-v3
1

Hello,
I have made a modal page. With paper.js I paint on a canvas in the modal page. Mouse and touch have different event handler. For touch input I have 2 functions called getXCoordinates and getYCoordinates, that calculate new coordinates as number (mouse input don’t call this functions). Both works fine in the modal page.

If I create a provider, init paper.js with a canvaselement it works only for mouse input. For touch input I call getXCoordinate and getYCoordinate, then I get this failure:

ERROR TypeError: Cannot read property ‘getXCoordinate’ of undefined

If I integrate the code of the both function inside the event handlers, it works as expected.

Can some body advice me, why this happens, and how to prevent it?

Thanks in advance, anna-liebt

2

Seeing some code would probably be useful to anybody trying to help.

3

Hello rapropos,

here is the part of the code using touch events. I removed the mouse events, because this code is working. At the ende you see 2 outcommended functions. I want use this functions, because I need the same code in more events, here you see the same code in touchstart and touchmove.

If I use this function to calculate the position, then I get ERROR: TypeError: Cannot read property ‘getXCoordinate’ of undefined. Same for getYCoordinate. It seems it can ‘not see’ the functions.

The code with both functions (used instead of the same code) in touchstart is working in a modalpage.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

import * as paper from 'paper';


 let path: any; //* Der Pfad der gezeichnet wird
 let drag = false; //* Wenn drag aufgehoben wird = false
 let papercanvas: HTMLCanvasElement; //* Das Canvaselement auf das gezeichnet wird
 let inputtype: string = 'touch'; //*mouse oder touch Eingabe


@Injectable()
export class PaintoncanvasProvider {

 

  constructor(public http: Http) {
    console.log('Hello PaintoncanvasProvider Provider');
  }


  /**
   * Hier wird das Canvas per id gesucht und für das zeichen durch paper.js vorbereitet
   * 
   * @param {string} canvasId Die Id des Canvaselements
   * @memberof PaintoncanvasProvider
   */
  public initPaper(canvasId: string) {
    papercanvas = <HTMLCanvasElement>document.getElementById(canvasId);

    paper.setup(papercanvas);
    console.log("initPaper sucess");

    this.addEvents();
  }


  /**
   * Je nach Inputtype werden die entsprechenden Events verbunden
   * 
   * @memberof PaintoncanvasProvider
   */
  addEvents() {

    switch (inputtype) {
      case 'mouse':
        papercanvas.addEventListener('mousedown', this.mousedownEvent);
        papercanvas.addEventListener('mousemove', this.mousedragEvent);
        papercanvas.addEventListener('mouseup', this.mouseupEvent);
        papercanvas.addEventListener('mouseout', this.mouseoutEvent);
        break;
      case 'touch':
        papercanvas.addEventListener('touchstart', this.touchstartEvent);
        papercanvas.addEventListener('touchmove', this.touchmoveEvent);
        papercanvas.addEventListener('touchend', this.touchendEvent);
        break;
      default:
        throw 'Inputtype nicht bekannt'
    }

  }
  
  //Beginn: Das funktioniert mit dem Finger

  //wenn touchstart, dann
  touchstartEvent(event: TouchEvent) {
   
    console.log("touchstartEvent")
    //Set  flag to detect  drag
    drag = true;
    path = new paper.Path();
    // path.strokeColor = 'black';
    path.style = {
      //fillColor: 'blue',
      strokeColor: 'red',
      strokeWidth: 10,
      strokecap: 'round'
    };

    var x: number;
    var b = papercanvas.getBoundingClientRect();

    x = event.changedTouches[0].pageX - b.left;

var y: number;
    var b = papercanvas.getBoundingClientRect();

    y = event.changedTouches[0].pageY - b.top;


path.add(new paper.Point(x, y));

console.log("touchmoveEvent:" + "pageX" + event.changedTouches[0].pageX + "getXCoordinate " + x + "; pageY" + event.changedTouches[0].pageY + "getYCoordinate " +y);

  }

  //wenn touchmove bewegt wird
  touchmoveEvent(event: TouchEvent) {
    console.log("touchmoveEvent");

var x: number;
    var b = papercanvas.getBoundingClientRect();

    x = event.changedTouches[0].pageX - b.left;

var y: number;
    var b = papercanvas.getBoundingClientRect();

    y = event.changedTouches[0].pageY - b.top;


if (drag) {
                    path.add(new paper.Point(x, y));
                    path.smooth();
                }

console.log("touchmoveEvent:" + "pageX" + event.changedTouches[0].pageX + "getXCoordinate " + x + "; pageY" + event.changedTouches[0].pageY + "getYCoordinate " +y);
    
  }

  //wenn touchend, dann
  touchendEvent(event: TouchEvent) {
    console.log("touchendEvent");
    //Clear Mouse Drag Flag
    drag = false;

console.log("touchendEvent: " + "pageX: " + event.changedTouches[0].pageX  + "; pageY" + event.changedTouches[0].pageY );
  }

  //! todo Das geht noch nicht
  focusoutEvent(event) {
    console.log("focusoutEvent")
    document.getElementById('message').innerHTML = "focusoutEvent";
    drag = false;
  }

  //Ende Das funktioniert mit dem Finger



  //alles, bis auf view, löschen
  clearPapercanvas(event) {
    paper.project.activeLayer.removeChildren();
    //neu zeichnen
    paper.view.draw();
  }
  // Ende Haupteil PaperJs 

// // Das berechnet die x Koordinate, da touch kein layerY kennt
//   private getXCoordinate(pagex: number): number {
//     var x: number;
//     var b = papercanvas.getBoundingClientRect();

//     x = pagex - b.left;
//     console.log("pagex: " + pagex + "; b.left: " + b.left + "; x: " + x);
//     return x;
//   }

//   // Das berechnet die y Koordinate, da touch kein layerY kennt
//   private getYCoordinate(pagey: number) {
//     var y: number;
//     var b = papercanvas.getBoundingClientRect();

//     y = pagey - b.top;
//     console.log("pagey: " + pagey + "; b.top: " + b.top + "; y: " + y);
//     return y;
//   }



}