当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现图片旋转 js滚动鼠标中间对图片放大缩小

js实现图片旋转 js滚动鼠标中间对图片放大缩小

2017年12月12日  | 移动技术网IT编程  | 我要评论

从开通博客园到今天，有两个多月了。我发现之前没有开通博客记录自己所做的东西，真是后悔啊。

现在一点一点把自己所做的功能以博客的形式记录下来，一方面可以给大家分享，大家一起学习，同时自己也从新回顾一下。

这个图片放大，缩小和旋转，我采用canvas画布这个来做的，核心点就在js中去控制鼠标状态及事件。

我先给大家展示一下效果图。

鼠标移到画布范围内就会出现下方的操作栏，每次以90度选择。

1.在引入js的时候一定要注意了，由于在使用画布canvas时，需要等图片加载完成后才可以执行画布里的内容。js要在最后引入。

2.js中要在图片加载完成之后在方法

主要的地方就是这个啦，其它就是js方法了，我就不一一解释了，有js功底的能看懂，如果有地方不懂，或者需要改进的就在下面评论出来，大家一起学习。

下面我就贴出代码了，需要演示项目源码的小伙伴也评论出来，我把演示项目发出来。

这是目录结构，也不需要什么jar包。image下面就是图片啦。

 html页面代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/picturecss.css" rel="external nofollow" />
<link >
</head>
<body>
<div id="pandiv">
    <img src="../image/3.png" style="display: none;">
    <canvas id="canvas" width="700" height="500" style="cursor: default;"> </canvas>
    <div id="control" style="display: none;">
    <img id="left" src="../image/left1.png" onclick="rateimage(270)">
    <img id="right" src="../image/right1.png" onclick="rateimage(90)">
  </div>
  </div>
  <script type="text/javascript" src="../js/picturejs.js"></script>
</body>
</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";
}　　

这就是实现这个图片旋转，放大，缩小的演示代码。

由于这几天在做一个切换图片的功能，点击上一页，下一页实现图片切换，这个功能以及快全部实现了，到时候我搭建一个框架的演示项目，来给大家展示图片切换上一张，下一张，也包括旋转，放大缩小功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网