没有开通博客记录自己所做的东西，真是后悔啊

从博客花园的开放到今天，已经超过两个月了。我发现我没有打开博客来记录以前的工作。我真的很后悔。

现在，我将以博客的形式一点一点地记录我已经完成的功能。一方面，我可以与所有人共享它，一起学习并亲自对其进行回顾。

此图片被放大，缩小和旋转。我用帆布做的。核心是控制js中的鼠标状态和事件。

让我先给你看效果图。

将鼠标移到画布区域，将出现下面的操作栏，每次选择90度。

1.引入js时必须注意，因为使用画布时，需要等待图像加载后才能在画布中执行内容。 js应该在末尾引入。

2. js应该在图片加载后进入方法

这是主要地点。另一个是js方法。我不会一一解释。那些具有js知识的人可以理解它。如果您不了解或需要改进，请在下面发表评论。我们一起工作吧。学习。

我将在下面发布代码，需要演示项目源代码的朋友也将发表评论，然后我将发布演示项目。

这是目录结构，不需要jar包。下图是图片。

html页面代码

css样式代码

@CHARSET "UTF-8";
 
* {
  margin: 0px;
  padding: 0px;
}
 
#pandiv {
  width: 700px;
  height: 500px;
}
 
#control {
  background: #ccc;
  opacity: 0.7;
  width: 200px;
  height: 30px;
  display: none;
  padding-top: 5px;
  position: absolute;
  left: 250px;
  top: 450px;
}
 
#canvas {
  border: 1px solid black;
}
 
#left {
  float: left;
  display: block;
}
 
#right {
  float: right;
  display: block;
}

核心键js代码：

/**
 *
 */
 
var canvas = document.getElementById("canvas");
var pandiv = document.getElementById("pandiv");
var cxt = canvas.getContext("2d");
var control = document.getElementById("control");
var imgScale = 1;
var img;
var imgX = 0;
var imgY = 0;
var currentRate = 0;
/**当前的旋转角度*/
var mouseDownLocation;
var isMouseDown = false;
 
window.onload = function() {
  var bbox = canvas.getBoundingClientRect();
  var imageUrl = $("#pandiv>img").attr("src");
  img = new Image();
  img.src = imageUrl;
  img.id = "pic";
 
  loadImage();
  drawImage();
}
 
function reLoadImage() {
  loadImage();
}
function loadImage() {
  if (img.width <= canvas.width && img.height <= canvas.height) {
    imgX = (canvas.width - img.width * imgScale) / 2
    imgY = (canvas.height - img.height * imgScale) / 2;
  } else {
    var ratio = img.width / img.height;
    widthTime = img.width / canvas.width;
    heightTime = img.height / canvas.height;
 
    if (widthTime > heightTime) {
      img.width = canvas.width;
 
      img.height = canvas.width / ratio;
    } else {
      img.height = canvas.height;
      img.width = canvas.height * ratio;
 
    }
 
    imgX = (canvas.width - img.width * imgScale) / 2
    imgY = (canvas.height - img.height * imgScale) / 2
  }
}
 
//var backGroundColor = ['#223344', '#445566', '#667788', '#778899'];
//var backGroundColorIndex = 0;
function drawImage() {
 
  var bbox = canvas.getBoundingClientRect();
 
  //cxt.clearRect(0, 0, canvas.width, canvas.height);
  cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2);
 
  // cxt.fillStyle = backGroundColor[backGroundColorIndex++ % backGroundColor.length];
  //cxt.fillRect(0, 0, canvas.width, canvas.height);
 
  cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
}
 
// windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标
function windowToCanvas(canvas, x, y) {
  var bbox = canvas.getBoundingClientRect();
  return {
    x : x - bbox.left - (bbox.width - canvas.width) / 2,
    y : y - bbox.top - (bbox.height - canvas.height) / 2
  };
}
 
function isPointInImageArea(point) {
  return true;
  //return (point.x > imgX && point.x < imgX + img.width * imgScale &&
  //point.y > imgY && point.y < imgY + img.height * imgScale);
}
function isPointInCanvasArea(point) {
  return true;
  //var bbox = canvas.getBoundingClientRect();
  //return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
}
function isDivArea(point) {
  return true;
  //var bbox =pandiv.getBoundingClientRect();
  //return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
}
 
canvas.onmousewheel = canvas.onwheel = function(event) {
 
  var pos = windowToCanvas(canvas, event.clientX, event.clientY);
  event.wheelDelta = event.wheelDelta ? event.wheelDelta
      : (event.deltaY * (-40));
 
  if (event.wheelDelta > 0) {
    //alert("放大");
    if (isPointInImageArea(pos)) {
      imgScale *= 2;
      //imgX = imgX * 2 - pos.x;
      // imgY = imgY * 2 - pos.y;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    } else {
      imgScale *= 2;
      //imgX = (canvas.width - img.width * imgScale) / 2;
      //imgY = (canvas.height - img.height * imgScale) / 2;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    }
  } else {
    //alert("缩小");
    if (isPointInImageArea(pos)) {
      imgScale /= 2;
      //imgX = imgX * 0.5 + pos.x * 0.5;
      // imgY = imgY * 0.5 + pos.y * 0.5;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    } else {
      imgScale /= 2;
      // imgX = (canvas.width - img.width * imgScale) / 2;
      // imgY = (canvas.height - img.height * imgScale) / 2;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    }
  }
 
  drawImage();
 
  return false;
}
 
/**旋转angle度*/
function rateImage(angle) {
  currentRate = (currentRate + angle) % 360;
 
  cxt.clearRect(0, 0, canvas.width, canvas.height);
  //cxt.save();
  cxt.translate(canvas.width / 2, canvas.height / 2);
  cxt.save();
  cxt.rotate(angle * Math.PI / 180);
  cxt.translate(-canvas.width / 2, -canvas.height / 2);
  imgScale = 1;
  reLoadImage();
 
  drawImage();
  //cxt.restore();
}
 
/**鼠标按下*/
pandiv.onmousedown = function(event) {
  mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY);
  if (isPointInImageArea(mouseDownLocation)) {
    isMouseDown = true;
    document.title = 'mouse down';
  }
}
/**鼠标弹起*/
document.body.onmouseup = function() {
  isMouseDown = false;
  canvas.style.cursor = "default";
  document.title = 'mouse up';
}
/**鼠标移动*/
pandiv.onmousemove = function(event) {
  if (isMouseDown) {
    canvas.style.cursor = "move";
    var newMouseLocation = windowToCanvas(canvas, event.clientX,
        event.clientY);
    if (isDivArea({
      x : event.clientX,
      y : event.clientY
    })) {
      var x = newMouseLocation.x - mouseDownLocation.x;
      var y = newMouseLocation.y - mouseDownLocation.y;
      mouseDownLocation = newMouseLocation;
      /**根据角度，计算图片偏移*/
      if (0 == currentRate) {
        imgX += x;
        imgY += y;
      } else if (90 == currentRate) {
        imgX += y;
        imgY -= x;
      } else if (180 == currentRate) {
        imgX -= x;
        imgY -= y;
      } else if (270 == currentRate) {
        imgX -= y;
        imgY += x;
      }
    } else {
      /** 鼠标移动至画布范围外，置鼠标弹起 */
      isMouseDown = false;
      canvas.style.cursor = "default";
      document.title = 'mouse up';
    }
    drawImage();
  }
}
pandiv.onmouseover = function() {
  //alert("1");
  control.style.display = "block";
 
}
canvas.onmouseout = function() {
  //alert("1");
  control.style.display = "none";
}　　

这是用于实现图片旋转，放大和缩小的演示代码。

由于这些天我正在使用切换图片的功能，因此请单击上一页和下一页来切换图片。此功能和几乎所有功能都已实现。到那时，我将构建一个带框架的演示项目来向您展示图片。切换上一个，下一个，包括旋转，放大和缩小功能。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-369328-1.html