首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

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

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

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

- Author -

是盼盼好

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
js实现图片放大展示效果
Aug 30 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
React事件处理的机制及原理
Dec 03 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
IOC(3) 自动化(1) find(1) metaclass(1) enumerate(1) list(1) XML(1) zip(1) Bean(3) 数据类型(8)
You might like
php实现加减法验证码代码
2014/02/14 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python读写配置文件的方法
2015/06/03 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
CSS3 rgb and rgba（透明色）的使用详解
2020/09/25 HTML / CSS
Avène雅漾美国官方网站：敏感肌肤护理专家
2016/10/24 全球购物
澳大利亚一站式数码相机商店：CameraPro
2020/03/09 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
python re模块和正则表达式
2021/03/24 Python
公司业务主管岗位职责
2013/12/07 职场文书
班主任工作年限证明
2014/01/12 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
售房委托书
2014/08/30 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL