How to draw a rectangle on canvas like we do on paint?

后端 未结 3 686
失恋的感觉
失恋的感觉 2021-01-25 00:03

Say i want to draw a rectangle on canvas. I want to be able to get the co-ordinates from user\'s mouse. Ideal scenario is user clicks at a point and drags down to another end li

相关标签:
3条回答
  • 2021-01-25 00:44

    Using this function you can get the mousecoordinates

      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
    

    this function takes in the canvas object and the event. Now you just have to add an eventHandler on mousedown and mouseup and you can get both the locations.

    var canvas = document.getElementById('canvasId');
    var ctx = canvas.getContext('2d');
    
    var locA, locB;
    
    document.addEventListener('mousedown', function(e) {
         e.preventDefault();
         locA = getMousePos(canvas, e);
    });
    
    document.addEventListener('mouseup', function(e) {
         e.preventDefault();
         locB = getMousePos(canvas, e);
    
         ctx.fillStyle = '#000000';
         ctx.fillRect(locA.x, locA.y, (locB.x - locA.x), (locB.y - locA.y));
    });
    

    function source: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

    There are still some problems surrounding canvas coordinates vs document coordinates, but I'm sure you'll be able to fix that.

    0 讨论(0)
  • 2021-01-25 00:59

    See this, move you mouse over the square, and witness the awesomeness of Process.js

    http://processingjs.org/learning/topic/pattern/

    0 讨论(0)
  • 2021-01-25 01:00

    Here's a outline of how to drag-draw a rectangle on canvas:

    In mousedown:

    • save the starting mouse position
    • set a flag indicating the drag has begun

    In mousemove:

    • clear the canvas of the previous rectangle
    • calculate the rectangle width/height based on the starting vs current mouse position
    • draw a rectangle from the starting XY to the current mouse position

    In mouseup:

    • clear the dragging flag because the drag is over

    Here's example code and a Demo: http://jsfiddle.net/m1erickson/6E2yd/

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    
    <style>
        body{ background-color: ivory; }
        #canvas{border:1px solid red;}
    </style>
    
    <script>
    $(function(){
    
        // get references to the canvas and context
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
    
        // style the context
        ctx.strokeStyle = "blue";
        ctx.lineWidth=3;
    
        // calculate where the canvas is on the window
        // (used to help calculate mouseX/mouseY)
        var $canvas=$("#canvas");
        var canvasOffset=$canvas.offset();
        var offsetX=canvasOffset.left;
        var offsetY=canvasOffset.top;
        var scrollX=$canvas.scrollLeft();
        var scrollY=$canvas.scrollTop();
    
        // this flage is true when the user is dragging the mouse
        var isDown=false;
    
        // these vars will hold the starting mouse position
        var startX;
        var startY;
    
    
        function handleMouseDown(e){
          e.preventDefault();
          e.stopPropagation();
    
          // save the starting x/y of the rectangle
          startX=parseInt(e.clientX-offsetX);
          startY=parseInt(e.clientY-offsetY);
    
          // set a flag indicating the drag has begun
          isDown=true;
        }
    
        function handleMouseUp(e){
          e.preventDefault();
          e.stopPropagation();
    
          // the drag is over, clear the dragging flag
          isDown=false;
        }
    
        function handleMouseOut(e){
          e.preventDefault();
          e.stopPropagation();
    
          // the drag is over, clear the dragging flag
          isDown=false;
        }
    
        function handleMouseMove(e){
          e.preventDefault();
          e.stopPropagation();
    
          // if we're not dragging, just return
          if(!isDown){return;}
    
          // get the current mouse position
          mouseX=parseInt(e.clientX-offsetX);
          mouseY=parseInt(e.clientY-offsetY);
    
          // Put your mousemove stuff here
    
          // clear the canvas
          ctx.clearRect(0,0,canvas.width,canvas.height);
    
          // calculate the rectangle width/height based
          // on starting vs current mouse position
          var width=mouseX-startX;
          var height=mouseY-startY;
    
          // draw a new rect from the start position 
          // to the current mouse position
          ctx.strokeRect(startX,startY,width,height);
    
        }
    
        // listen for mouse events
        $("#canvas").mousedown(function(e){handleMouseDown(e);});
        $("#canvas").mousemove(function(e){handleMouseMove(e);});
        $("#canvas").mouseup(function(e){handleMouseUp(e);});
        $("#canvas").mouseout(function(e){handleMouseOut(e);});
    
    }); // end $(function(){});
    </script>
    </head>
    <body>
        <h4>Drag the mouse to create a rectangle</h4>
        <canvas id="canvas" width=300 height=300></canvas>
    </body>
    </html>
    
    • clear the
    0 讨论(0)
提交回复
热议问题