locked
Problem with events

    Question

  • Hello! I'm developing an app that makes cross words and I'm having a problem with the events. I want to when the user click in the canvas It draw a line from click coordinates to the current coordinates of the mouse, but my code has a problem that I can't find. I made functions for the events:

    // Função executada quando o mouse é pressionado
        function mousedown (event, canvas, roamingSettings) {
            var rect = $("canvas").position();
            var x = WinJS.Application.sessionState.currentX;
            var y = WinJS.Application.sessionState.currentY;
    
            if (x >= 0 && y >= 0) {
                // Define a variável booleana como "true"
                WinJS.Application.sessionState.mouseState = true;
    
                // Salva as coordenadas do clique
                WinJS.Application.sessionState.startX = x;
                WinJS.Application.sessionState.startY = y;
            }
        }
    
        // Função executada quando o mouse deixa de ser pressionado
        function mouseup (event, canvas, roamingSettings, numwords){
            WinJS.Application.sessionState.mouseState = false;
            WinJS.Application.sessionState.endX = WinJS.Application.sessionState.currentX;
            WinJS.Application.sessionState.endY = WinJS.Application.sessionState.currentY;
    
            var x = WinJS.Application.sessionState.endX / 25;
            var y = WinJS.Application.sessionState.endY / 25;
    
            for (var i = 0; i < numwords; i++){
                var wordx = roamingSettings.values["word" + i + "x"] * 25;
                var wordy = roamingSettings.values["word" + i + "y"] * 25;
    
                // Checa alguma palavra foi encontrada
                if (x >= roamingSettings.values["word" + i + "x"] && x < roamingSettings.values["word" + i + "x"] + 1){
                    if (y >= roamingSettings.values["word" + i + "y"] && y < roamingSettings.values["word" + i + "y"] + 1){
                        
                        var x = WinJS.Application.sessionState.endX;
                        var y = WinJS.Application.sessionState.endY;
    
                        if (x >= 300 && y >= 0) {
                            // Define a variável booleana como "true"
                            roamingSettings.values["mouse"] = true;
    
                            // Salva as coordenadas do clique
                            roamingSettings.values["mousex"] = x;
                            roamingSettings.values["mousey"] = y;
    
                            canvas.fillText("mousex: " + x + " mousey: " + y, 30, 30);
                        }
                    }
                }
            }
        }
    
        // Função que redesenha o canvas 60 vezes por segundo
        function redraw(evt, canvas, cw, ch, numwords, xlength, ylength, matrizfill, matriz, roamingSettings, mouse) {
    
            if (WinJS.Application.sessionState.mouseState) {
                // Reseta o canvas
                canvas.clearRect(0, 0, cw, ch);           
    
            // Desenha a grade
            canvas.beginPath();
            for (var x = 324.5; x < cw; x += 25) {
                canvas.moveTo(x, 0);
                canvas.lineTo(x, ch);
            }
            for (var y = 24.5; y < ch; y += 25) {
                canvas.moveTo(300, y);
                canvas.lineTo(cw, y);
            }
            canvas.moveTo(300, 0);
            canvas.lineTo(300, ch);
            canvas.strokeStyle = "#666";
            canvas.stroke();
    
            canvas.beginPath();
    
            for (var wx = 1; wx <= xlength; wx++){
                for (var wy = 1; wy <= ylength; wy++){
                    if (matrizfill[wx + (wy-1) * xlength] == 1){
                        canvas.fillText(matriz[wx + (wy-1) * xlength], 305 + wx * 25, wy * 25 - 5);
                    }
                }
            }
    
            // Escreve "Palavra" do lado esquerdo da tela
            canvas.font = "30px Segoe UI";
            canvas.fillText("PALAVRAS", 20, 50);
    
            for (var w = 0; w < numwords; w++){
                canvas.fillRect(30, 90 + 25 * w, 3, 3);
                canvas.font = "16px Segoe UI";
                canvas.fillText(roamingSettings.values["word" + w], 40, 98 + 25 * w);
            }
            
            // Se o mouse estiver sendo pressionado, desenha a linha
                        if (WinJS.Application.sessionState.mouseState){
            
                            canvas.beginPath(); 
                            canvas.moveTo(WinJS.Application.sessionState.startX, WinJS.Application.sessionState.startY);
                            canvas.lineTo(WinJS.Application.sessionState.currentX, WinJS.Application.sessionState.currentY);
                            canvas.lineWidth = 20;
                            canvas.strokeStyle = "#F00";
                            canvas.lineCap = 'round';
                            canvas.stroke();
                        }
             }
        }

    And these are the event listeners:

    c.addEventListener("MSPointerDown", mousedown(event, canvas, roamingSettings), false);
    c.addEventListener("MSPointerUp", mouseup(event, canvas, roamingSettings, numwords), false);
    c.addEventListener("MSPointerMove", redraw(event, canvas, cw, ch, numwords, xlength, ylength, matrizfill, matriz, roamingSettings), false);

    I made a function that saves every 1ms the mouse coordinates, but the problem isn't there. As you see, when the mouse is clicked the function saves the coordinates as "startX" and "startY", and the function "redraw" is supposed to redraw the whole and and draw a line from the coordinates of the click to the current coordinates, but it's not working. I read many topics and I found no solution. I'd be very glad if anyone could help me.

    Tuesday, June 04, 2013 5:12 PM