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

Question

I have small html5 project that need to draw line on image using canvas. 我有一个小的html5项目，需要使用画布在图像上画线。 Below is a sample code that I found in forum. 以下是我在论坛中找到的示例代码。

<!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>

I have problem once draw line at bottom area of image. 我曾经在图像底部区域画线时遇到问题。 Line not draw for big image, Script work fine just for small image ,(example big image in above code) Any advise or guidance would be greatly appreciated, Thanks. 线条不适合大图，脚本仅适合小图，（上面代码中的大图示例）任何建议或指导将不胜感激，谢谢。

Answer 1

I've changed the getCursorPosition to use getBoundingClientRect() 我将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 个解决方案

解决方案1
0 已采纳 2019-04-23 13:58:20

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-04-23 13:58:20

解决方案1
0 已采纳 2019-04-23 13:58:20