Question

我已经设置了一个画布，我在图像顶部画了一条线（在它下面的第二个画布）。帆布安装在容器中。我的问题是，当我画一条线（需要两次点击）时，它不会在正确的位置绘制。

目标是能够在我单击的位置精确绘制线条，即使在调整画布大小以适应容器的大小之后也是如此。

我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script src="/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<style>
    .container {
        position: relative;
        width: 50%;
    }

    canvas {
        max-width: 100%;
        height: auto;
    }

    .container > canvas {
        position: absolute;
        top: 100px;
        left: 100px;
    }

    .container .buttons {
        position: absolute;
        top: 0;
        left: 0;
    }

    #canvas-bg {
        z-index: 0;
    }

    #canvas-draw {
        z-index: 1;
    }
</style>
<div class="container">
    <canvas id="canvas-draw" width="300" height="150" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <canvas id="canvas-bg" width="300" height="150" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

<script>
         var needFirstPoint = true;

           function drawNextLine(ctx, x, y) {
               if (needFirstPoint) {
                   ctx.lineWidth = 5;
                   ctx.beginPath();
                   ctx.moveTo(x, y);
                   needFirstPoint = false;
               }
               else {
                   ctx.lineTo(x, y);
                   ctx.stroke();
               }
           }

           var canvasDrawing = null;
           var canvasImage = null;
           var ctxDrawing = null;
           var ctxImage = null;

           $(document).ready(function () {
               canvasDrawing = $('#canvas-draw').get(0);
               canvasImage = $("#canvas-bg").get(0);

               if (!canvasDrawing.getContext) { return; }
               ctxDrawing = canvasDrawing.getContext('2d');
               ctxImage = canvasImage.getContext('2d');


               function isCanvasBlank(canvas) {
                   var blank = document.createElement('canvas');
                   blank.width = canvas.width;
                   blank.height = canvas.height;

                   return canvas.toDataURL() == blank.toDataURL();
               }


               $('#canvas-draw').on('click', function (e) {


                   if (needFirstPoint == false && isCanvasBlank(canvasDrawing) == false) {
                       ctxDrawing.clearRect(0, 0, canvasDrawing.width, canvasDrawing.height);
                       needFirstPoint = true;
                       return false;
                   }
                   var offset = $(this).offset();
                   var x = e.pageX - offset.left;
                   var y = e.pageY - offset.top;
                   drawNextLine(ctxDrawing, x, y);
               });

               ////////////

               var imageLoader = document.getElementById('imageLoader');
               imageLoader.addEventListener('change', handleImage, false);

               function handleImage(e) {
                   var reader = new FileReader();
                   reader.onload = function (event) {
                       var img = new Image();
                       img.onload = function () {
                           canvasImage.width = img.width;
                           canvasImage.height = img.height;
                           ctxImage.drawImage(img, 0, 0);


                           // refresh drawing canvas
                           $('#canvas-draw').width(img.width);
                           $("#canvas-draw").height(img.height);
                           canvasDrawing = $('#canvas-draw').get(0);


                           ctxDrawing = canvasDrawing.getContext('2d');
                           canvasDrawing.width = img.width;
                           canvasDrawing.height = img.height;
                           ctxDrawing.clearRect(0, 0, canvasDrawing.width, canvasDrawing.height);

                       }
                       img.src = event.target.result;


                   }
                   reader.readAsDataURL(e.target.files[0]);
               }

           });
</script>
               <div class="buttons">

    <a href="#" onclick="  ctx.clearRect(0, 0, canvas.width, canvas.height);">Clear canvas</a>
    <input type="file" id="imageLoader" name="imageLoader" />
</div>

Answer 1

要准确轮询画布上的指针位置，您必须考虑它相对于屏幕左上角的偏移 - 因为.clientX (.pageX)和.clientY (.pageY)事件返回指针位置相对于浏览器窗口不是Canvas本身。

在普通的JavaScript中经常使用以下内容......

/* click event handler */
function canvasClicked(e) {
    var cnvBox = document.getElementById('canvas').getBoundingClientRect();

    /* canvas-relative values */
    var X = e.clientX - cnvBox.left,
        Y = e.clientY - cnvBox.top;
}

...而JQuery方式就是这样......

$("#canvas").click(function(e){
    var cnvOffset = $(this).offset(); 

    /* canvas-relative values */
    var X = e.pageX - cnvOffset.left,
        Y = e.pageY - cnvOffset.top;
});

希望帮助：）

线未在画布上的正确位置绘制

1 个答案: