mercredi 19 octobre 2016

Ember Component Functions

Trying to call one of my ember components functions, however I am getting the error: e-signature.js:28 Uncaught TypeError: this.testFunc is not a function

I have clearly declared the function, however. I am calling testFunc() when the user presses their mouse (which is when the error is thrown). What is the issue?

Component.js

import Ember from 'ember';

export default Ember.Component.extend({
    mousePressed: false,
    lastX: 0,
    lastY: 0,
    ctx: null,

    Draw(x, y, isDown) {
        if (isDown) {
            this.ctx.beginPath();
            this.ctx.strokeStyle = $('#selColor').val();
            this.ctx.lineWidth = $('#selWidth').val();
            this.ctx.lineJoin = "round";
            this.ctx.moveTo(this.lastX, this.lastY);
            this.ctx.lineTo(x, y);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        this.lastX = x; this.lastY = y;
    },

    InitThis() {
        this.ctx = document.getElementById('myCanvas').getContext("2d");
        console.log(this.ctx)

        $('#myCanvas').mousedown(function (e) {
            this.mousePressed = true;
            this.testFunc();
            this.Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
        });

        $('#myCanvas').mousemove(function (e) {
            if (this.mousePressed) {
                this.Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
            }
        });

        $('#myCanvas').mouseup(function (e) {
            this.mousePressed = false;
        });
            $('#myCanvas').mouseleave(function (e) {
            this.mousePressed = false;
        });
    },

    testFunc: function() {
        console.log('testFunc');
    },

    didRender() {
        console.log('eSignature didRender()');
        this.InitThis();
    },

    actions: {
        clearArea() {
        // Use the identity matrix while clearing the canvas
        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
        }
    }
});




Aucun commentaire:

Enregistrer un commentaire