关于javascript:canvas-drawImage设置图片居中拖动缩放

7次阅读

共计 2179 个字符，预计需要花费 6 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body,#app {
      width:100%;
      height:100%;
      border:0;
      margin:0;
      padding:0;
    }
    #canvas{
      width:100%;
      height:100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var canvas, context;
var imageWidth, imageHeight;
var img,
  imgX = 0,
  imgY = 0,
  imgScale = 1;
function loadImg() {img = new Image();
  img.onload = function () {imgX = (canvas.width - img.width) / 2;
    imgY = (canvas.height - img.height) / 2
    drawImage();}
  img.src = 'http://127.0.0.1:56398/%E4%B8%89%E5%93%A5%E5%B0%8F%E8%88%9E.jpeg';
}
function drawImage() {context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(
    img, // 规定要应用的图像、画布或视频。0, 0, // 开始剪切的 x 坐标地位。img.width, img.height,  // 被剪切图像的高度。imgX, imgY,// 在画布上搁置图像的 x、y 坐标地位。img.width * imgScale, img.height * imgScale  // 要应用的图像的宽度、高度
  );
  canvasEventsInit()}
function canvasEventsInit() {canvas.onmousedown = function (event) {var pos = windowToCanvas(event.clientX, event.clientY);

    canvas.onmousemove = function (evt) {
      canvas.style.cursor = 'move';
      var posl = windowToCanvas(evt.clientX, evt.clientY);
      var x = posl.x - pos.x;
      var y = posl.y - pos.y;
      pos = posl;
      imgX += x;
      imgY += y;
      drawImage();};
    canvas.onmouseup = function () {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
      canvas.style.cursor = 'default';
    };
    document.onmouseup = function() {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
      canvas.style.cursor = 'default';
      document.onmouseup = null;
    }
  };

  canvas.onmousewheel = canvas.onwheel = function (event) {var pos = windowToCanvas(event.clientX, event.clientY);
    var n = 1.1;
    var n2 = (1/1.1).toFixed(2);
    event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));
    if (event.wheelDelta > 0) {
      imgScale *= n;
      imgX = imgX * n - pos.x * (n-1);
      imgY = imgY * n - pos.y * (n-1);
    } else {

      imgScale *= n2;
      imgX = imgX *n2+ pos.x *(1-n2);
      imgY = imgY *n2 + pos.y *(1-n2);
    }
    drawImage();};
}


/* 坐标转换 */
function windowToCanvas(x, y) {var box = canvas.getBoundingClientRect();
  return {x: x - box.left - (box.width - canvas.width) / 2,
    y: y - box.top - (box.height - canvas.height) / 2
  };
}
(function int() {canvas = document.getElementById('canvas');
  canvas.width = canvas.getBoundingClientRect().width;
  canvas.height = canvas.getBoundingClientRect().height;
  context = canvas.getContext('2d');
  loadImg();})();
      
  </script>
</body>

</html>

正文完