Question

我有一个小的html5项目，需要使用画布在图像上画线。以下是我在论坛中找到的示例代码。

<!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(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var imageOpacity=1;
    var canvasPos = canvas.getBoundingClientRect();
    var dragging = false;
    var img=new Image();
    img.onload=start;
    img.src="http://res.publicdomainfiles.com/pdf_view/84/13939501819528.png";

    function start(){
        canvas.width=canvas.width=img.width;
        canvas.height=img.height;
        ctx.strokeStyle="green";
        ctx.lineWidth=3;

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

        // redraw the image
        drawTheImage(img,imageOpacity);
    }

    function drawTheImage(img,opacity){
        ctx.globalAlpha=opacity;
        ctx.drawImage(img,0,0);
        ctx.globalAlpha=1.00;
    }

    function handleMouseDown(e){
      var pos = getCursorPosition(e);           
      dragging = true;
      ctx.strokeStyle = 'green';
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.moveTo(pos.x, pos.y);
    }

    function handleMouseUp(e){
       dragging = false;
    }

    function handleMouseMove(e){
      var pos, i;
      if (!dragging) {
          return;
      }
      pos = getCursorPosition(e);
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    }

    function getCursorPosition(e) {
      return {
          x: e.clientX - canvasPos.left,
          y: e.clientY - canvasPos.top
      };
    }

}); 
</script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

一旦在图像底部绘制线，我就会遇到问题。线条不能画大图，脚本只适合小图，（上面代码中的大图示例）任何建议或指导都将不胜感激，谢谢。

Answer 1

我已将getCursorPosition更改为使用getBoundingClientRect()

$(function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var imageOpacity = 1;
  var canvasPos = canvas.getBoundingClientRect();
  var dragging = false;
  var img = new Image();
  img.onload = start;
  img.src = "http://res.publicdomainfiles.com/pdf_view/84/13939501819528.png";

  function start() {
    canvas.width = canvas.width = img.width;
    canvas.height = img.height;
    ctx.strokeStyle = "green";
    ctx.lineWidth = 3;

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

    // redraw the image
    drawTheImage(img, imageOpacity);
  }

  function drawTheImage(img, opacity) {
    ctx.globalAlpha = opacity;
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 1.0;
  }

  function handleMouseDown(e) {
    var pos = getCursorPosition(e);
    dragging = true;
    ctx.strokeStyle = "green";
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
  }

  function handleMouseUp(e) {
    dragging = false;
  }

  function handleMouseMove(e) {
    var pos, i;
    if (!dragging) {
      return;
    }
    pos = getCursorPosition(e);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
  }

  function getCursorPosition(evt) {
  var ClientRect = canvas.getBoundingClientRect();
    return {
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
  }
});

body{ background-color: ivory; }
    #canvas{
        border:1px solid red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>

使用Javascript在图像上绘制画布线不会影响整个区域

1 个答案: