canvas - Html 5画布的缩放问题

Question

我正在使用pdf.js在画布中显示 PDF。当用户双击画布时，我在画布上画一条线，前面有 X。只要我保持视口的比例= 1，这就会起作用。只要我将比例增加到2或更高，就不会在用户实际单击的位置绘制线条。它弄乱了Y坐标

在整页上运行演示

$(function() {
  var $canvas = $("#myCanvas");
  var canvasEl = $canvas.get(0);
  var ctx = canvasEl.getContext("2d");
  var lines = [];

  var backupCanvas = document.createElement("canvas");

  var loadingTask = pdfjsLib.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf');
  loadingTask.promise.then(function(doc) {
    console.log("This file has " + doc._pdfInfo.numPages + " pages");
    doc.getPage(1).then(page => {
      
      // increase the scale to 2
      var scale = 2;
      
      var viewPort = page.getViewport(scale);
      canvasEl.width = viewPort.width;
      canvasEl.height = viewPort.height;
      canvasEl.style.width = "100%";
      canvasEl.style.height = "100%";

      var wrapper = document.getElementById("wrapperDiv");
      wrapper.style.width = Math.floor(viewPort.width / scale) + 'px';
      wrapper.style.height = Math.floor(viewPort.height / scale) + 'px';
      page.render({
        canvasContext: ctx,
        viewport: viewPort
      }).then( () => {
				storeCanvas();
      });
    });
  });


  function storeCanvas() {
    backupCanvas.width = canvasEl.width;
    backupCanvas.height = canvasEl.height;
    backupCanvas.ctx = backupCanvas.getContext("2d");
    backupCanvas.ctx.drawImage(canvasEl, 0, 0);
  }

  function restoreCanvas() {
    ctx.drawImage(backupCanvas, 0, 0);
  }

  $canvas.dblclick(function(e) {
    var mousePos = getMousePos(canvasEl, e);
    var line = {
      startX: 0,
      startY: mousePos.Y,
      endX: canvasEl.width,
      endY: mousePos.Y,
      pageY: e.pageY
    };
    lines.push(line);
    drawLine(line, lines.length - 1);
  });

  function drawLine(line, index) {

    // draw line        
    ctx.beginPath();
    ctx.strokeStyle = '#df4b26';
    ctx.moveTo(line.startX, line.startY);
    ctx.lineTo(line.endX, line.endY);
    ctx.closePath();
    ctx.stroke();

    // add remove mark
    var top = line.pageY;
    var left = canvasEl.width + 20;
    var $a = $("<a href='#' class='w-remove-line'>")
      .data("line-index", index)
      .attr("style", "line-height:0")
      .css({
        top: top,
        left: left,
        position: 'absolute'
      })
      .html("x")
      .click(function() {
        var index = $(this).data("line-index");
        $(".w-remove-line").remove();
        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
        // restore canvas
        restoreCanvas();
        lines.splice(index, 1);
        for (var i = 0; i < lines.length; i++) {
          drawLine(lines[i], i);
        }

      });

    $("body").append($a);

  }

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      X: Math.floor(evt.clientX - rect.left),
      Y: Math.floor(evt.clientY - rect.top),
    };
  }
});

 canvas {
   border: 1px solid red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b> Double Click on PDF to draw line and then click on X to remove lines</b><br/>
<b> You can set the scale in javascript to 1 and it works fine</b>
<div id="wrapperDiv">
  <canvas id="myCanvas"></canvas>
</div>

标签： canvashtml5-canvaspdf.js

Answer 1

在双击的事件处理程序中，只需将 Y 位置乘以您的比例 (2)。

var line = {
  startX: 0,
  startY: mousePos.Y * 2,
  endX: canvasEl.width,
  endY: mousePos.Y * 2,
  pageY: e.pageY
};