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


Posted in Javascript onJuly 05, 2017

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 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";
}

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
vue鼠标悬停事件实例详解
Apr 01 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 #Javascript
Angular2 自定义validators的实现方法
Jul 05 #Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 #Javascript
使用angular帮你实现拖拽的示例
Jul 05 #Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 #Javascript
jquery拖动改变div大小
Jul 04 #jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 #Javascript
You might like
php使用GeoIP库实例
2014/06/27 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
美国网上书店:Barnes & Noble
2018/08/15 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
人事专员职责
2014/02/22 职场文书
2015年纪委工作总结
2015/05/13 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2016新年致辞
2015/08/01 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL