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 相关文章推荐
jquery为页面增加快捷键示例
Jan 31 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
通过循环优化 JavaScript 程序
Jun 24 Javascript
uni-app实现点赞评论功能
Nov 25 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
一个ftp类(ini.php)
2006/10/09 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python Xpath语法的使用
2020/11/26 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
SQL注入攻击的种类有哪些
2013/12/30 面试题
一年级数学教学反思
2014/02/01 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
地球上的星星观后感
2015/06/02 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技