none
draw line on canvas

    Question

  • Starting from the drawingcanvas sample on the rxjs example, Im trying to do something like in the following page:

    <!DOCTYPE html>
    <html>
    <head>
    <title>draw line</title>
    </head>
    <style type="text/css">

    canvas {
    border:1px solid steelblue;
    background-color: whitesmoke;
    }

    </style>
    <body>
    <canvas id="canvas" width=300 height=300></canvas>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var canvasOffset = $("#canvas").offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;

    var drawing = false;
    var mouseX = 0;
    var mouseY = 0;


    function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    drawing= true;

    // Put your mousedown stuff here

    }

    function handleMouseUp(e) {
    drawing = false;
    }
    function handleMouseMove(e) {
    if(drawing){
     mouseeX = parseInt(e.clientX - offsetX);
     mouseeY = parseInt(e.clientY - offsetY);
     $("#movelog").html("Move: " + mouseX + " / " + mouseY);

              var ctx =  canvas.getContext("2d");
              // some cleanup code
              ctx.save();
              ctx.setTransform(1, 0, 0, 1, 0, 0);
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              ctx.restore();

               // Restore the transform          
              ctx.beginPath();
              ctx.moveTo(mouseX,mouseY);
              ctx.lineTo(mouseeX,mouseeY);
              ctx.stroke();
           }
    // Put your mousemove stuff here

    }

    $("#canvas").mousedown(function(e) {
    handleMouseDown(e);
    });
    $("#canvas").mousemove(function(e) {
    handleMouseMove(e);
    });
    $("#canvas").mouseup(function(e) {
    handleMouseUp(e);
    });

    });
    </script> 
    </body>
    </html>

    Here I'm drawing a line on the canvas guarding the mouse down (start to draw) mousemove (redraw line) and mouseup (end of draw phase).

    How can I obtain the same offect using RXJS? In the example I found the draw phase happens on pace while the mouse is moving. Here I need to trigger the draw on the "mousedown", then save somehow the state of where I was starting drawing the line and moving, and go on with the update phase until I raise the button up.

    I'm stuck on it. Thanks a lot.

    Wednesday, March 05, 2014 4:00 PM