0

我在页面上有一个特定大小的 HTML5 画布

<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;">

现在，当鼠标拖到画布上时画布被绘制（即你先点击（不一定在画布内）然后开始将鼠标拖到它上面而不释放）下面的脚本；

  $(function () {
  var c = document.getElementById("canvas");
  var context = c.getContext("2d");
  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;
  var $canvas=$("#canvas");

  $(this).mousedown(function (e) {         

      paint = true;
      addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop);
      redraw();
  });


  $(this).mousemove(function (e) {
      if (paint) {
          addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop, true);
          redraw();
      }
  });

  $(this).mouseup(function (e) {
      paint = false;
  });

  $(this).mouseleave(function (e) {
      paint = false;
  });

  function addClick(x, y, dragging) {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
  }

  function redraw() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

      context.strokeStyle = "#000000";
      context.lineJoin = "round";
      context.lineWidth = 2;

      for (var i = 0; i < clickX.length; i++) {
          context.beginPath();
          if (clickDrag[i] && i) {
              context.moveTo(clickX[i - 1], clickY[i - 1]);
          } else {
              context.moveTo(clickX[i] - 1, clickY[i]);
          }
          context.lineTo(clickX[i], clickY[i]);
          context.closePath();
          context.stroke();
      }
  }

});

我现在需要的是一种在文档的鼠标事件期间将文档上的所有鼠标坐标缩放到画布内的相对坐标的方法。

这样无论您在文档上拖动鼠标的任何位置，它都会在画布内绘制（当然尺寸相对较小）。任何想法如何实现这一目标？

http://jsfiddle.net/umwc5/3/

为什么我需要这个？

它适用于签名应用程序，当用户使用平板电脑在页面上书写签名时（没有看到页面！），整个签名将被注册在一个小画布中。

更新

最后的工作小提琴

4

1 回答 1

1

您在这里缺少的最重要的事情是乘以画布/屏幕比率。

首先计算比率：

  var docToCanv = Math.min($canvas[0].width / $('body').width(), $canvas[0].height/$('body').height());

然后像这样使用它：

addClick(e.pageX*docToCanv, e.pageY*docToCanv);

根据您想要的其他行为，您可能需要稍微调整位置，但这应该会让您摆脱当前遇到的问题。

演示

于 2013-08-26T16:28:19.803 回答