如何放大缩小地图 和 移动拖动 地图 （一张的那种）
这里是html 部分 h1标签是显示地图缩放倍数 myText是显示画布相对于图片起始坐标
<h1></h1>
<input type="button" id="but" class="off" value="点我画图" style="width: 100px;height: 100px;background-color: #00a0e9;"/>
<input type="button" id="but1" "but1()" class="off" style="width: 100px;height: 100px;background-color: #00a0e9;" value="点我复位"/>
<div id="myText"></div>
<!--这里是图片识别-->
<div style="height: 200px; width: 100%; padding-top: 20px;text-align:center;display:block;line-height:400px">
<div id="mydiv" >
<canvas id="mycanvas" width="300" height="300" style="border: 1px #000000 solid"></canvas>
</div>
</div>
首先，创建画布，如果你是用引用的话，放在canvas标签下面，否者获取不到画布
var canvas = document.getElementById('mycanvas'); // 得到画布
var ctx = canvas.getContext('2d'); // 得到画布的上下文对象
canvas.width=300;
canvas.height =200;
这些事一些公共变量，为了接受一些值，因为这个是动态传来的值，所以设置一些变量
//判断鼠标是否点击地图,截取图片时的坐标（画布从图片那个点开始显示） 和 鼠标滚路滑过的距离 缩放率
var flag=false, x=0, y= 0,add= 0,add1= 0,scale=1;
//鼠标每次抬起的坐标
var x_end=0;y_end=0;
var img = new Image();
img.src = '../images/control/pics01.png';
//线路 对象数组
var jObj=[{x:0,y:0},{x:200,y:100},{x:300,y:300},{x:500,y:500},{x:1000,y:800}];
//机器人坐标
var aMAN=200,bMAN=110;
把方法放在img.onload中，否者在图片未加载之前执行，会获取不到图片的一些信息
这个方法是绑定画布到鼠标滚动事件
一个是ie 的 一个通用的
if(canvas.addEventListener){
canvas.addEventListener("mousewheel",MouseWheelHandler,false);
canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
下面的是鼠标滚动时间发生后，做出的改变
ctx.save();保存一下画布的状态
ctx.drawImage(img,x,y);读取显示图片
var delta = (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))))5;
获取鼠标滚动次数 5
add += img.widthdelta/50;
获取累计的值 为什么取图片的百分比呢？
因为要按百分比来改变图片大小
add1 += img.heightdelta/50;
这个是图片增加的高度
ctx.drawImage(img, x - moveX, y - moveY, img.width, img.height, 0, 0, img.width - add, img.height - add1);
这个是画布方法，参数依次是
图片对象，从x,y( x - moveX, y - moveY)处截取图片（相对于图片的坐标系），截取的矩形长宽（img.width, img.height） ，从画布的（0, 0,） 坐标显示，缩放到（ img.width - add, img.height - add1）长宽这么大
也就是说，其实我是用这个函数来实现了图片的放大缩小
img.onload = function () {
ctx.save();
ctx.drawImage(img,x,y);
if(canvas.addEventListener){
canvas.addEventListener("mousewheel",MouseWheelHandler,false);
canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else{
Limg.attachEvent("onmousewheel", MouseWheelHandler);
}
console.count("执行次数，windos");
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))))*5;
add += img.width*delta/50;
add1 += img.height*delta/50;
canvas.height = canvas.height;
ctx.beginPath();
var moveX = addx;
var moveY = addY;
ctx.drawImage(img, x - moveX, y - moveY, img.width, img.height, 0, 0, img.width - add, img.height - add1);
//保留2位小数
scale = ((img.height-add1)/img.height).toFixed(2);
//画路线
//ctx.save();
//ctx.beginPath();
//for(var i=0;i<jObj.length;i++){
// if(i==0)
// {
// ctx.moveTo(parseInt(jObj[i].x-(x-moveX))*scale,parseInt(jObj[i].y-(x-moveY))*scale);
// }
// ctx.lineTo(parseInt(jObj[i].x-(x-moveX))*scale,parseInt(jObj[i].y-(x-moveY))*scale);
//}
ctx.closePath();//闭合路径
//ctx.lineWidth=2*scale;
//ctx.strokeStyle="#ff0000";
//ctx.globalAlpha=0.8;
//ctx.stroke();
//ctx.translate(moveX,moveY);
//ctx.restore();
//画路线结束
myCanvas(moveX, moveY);
$("h1").html("缩放率"+scale);
return false;
}
}
下面是实现 地图点击拖动功能
其中 addx，addY是累计拖拽像素 movex,movey是单次拖拽距离
$(function () {
//开关是关闭 可以拖拽地图
$('canvas').mousedown(function (e) {
flag = true;
nowX = e.offsetX; // 鼠标落下时的X
nowY = e.offsetY; // 鼠标落下时的Y
}).mouseup(function (e) {
flag = false;
if (!flag && $("#but").hasClass("off")) {
console.count("执行次数");
addx += moveX;
addY += moveY;
myCanvas(addx, addY);
console.log(addx + '' + addY + "," + moveX + "," + moveY);
}
x_end = e.offsetX;
y_end = e.offsetY;
console.log(nowX, nowY, x_end, y_end);
saveZuoBiao();
}).mousemove(function (e) {
if(flag&& $("#but").hasClass("off")){
//坐标差
moveX = (e.offsetX - nowX)/scale/5;
moveY = (e.offsetY - nowY)/scale/5;
//画图方法
myCanvas((moveX + addx), (moveY + addY));
}else if(flag&& $("#but").hasClass("on")){
drawRect(e);
}
});
});
下面是划机器人行走线路
因为要在拖拽地图时显示地图，路线等，所以加入了上面的参数，好让线路也跟着地图
移动
画了 移动过的线路
function myCanvas(moveX, moveY) {
if (x - moveX < 0) {
x = addx = 0.1;
} if (y - moveY < 0) {
y = addY = 0.1;
}
if (x - moveX >= 0 && y - moveY >= 0) {
//从新绘制
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.drawImage(img, x - moveX, y - moveY, img.width, img.height, 0, 0, img.width - add, img.height - add1);
//显示观看数据
$("#myText").html("图片起始位置：" + (x - moveX) + '图片的宽：' + (img.width - add) +
"图片起始位置y" + (y - moveY) + '图片的高' + (img.height - add1));
//画线路
ctx.save();
ctx.beginPath();
for (var i = 0; i < jObj.length; i++) {
if (i == 0) {
ctx.moveTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
}
ctx.lineTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
}
//ctx.closePath();//闭合路径
//线路宽
ctx.lineWidth = 2 * scale;
//颜色
ctx.strokeStyle = "#ff0000";
//透明度
ctx.globalAlpha = 0.8;
ctx.stroke();
ctx.translate(moveX, moveY);
ctx.restore();
//200 100 代表机器人的实际位置
transX = (moveX + aMAN) * scale, transY = (moveY + bMAN) * scale;
drawRobot();
//画行走过的路线
ctx.save();
ctx.beginPath();
for (var i = 0; i < jObj.length; i++) {
if (i == 0) {
ctx.moveTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
}
ctx.lineTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
if (i < jObj.length - 1) {
var x1 = jObj[i].x;
var y1 = jObj[i].y;
var x2 = jObj[i + 1].x;
var y2 = jObj[i + 1].y;
if (aMAN <= x2 && aMAN >= x1 && bMAN <= y2 && bMAN >= y1) {
ctx.lineTo(parseInt(aMAN - (x - moveX)) * scale, parseInt(bMAN - (x - moveY)) * scale);
break;
}
}
}
//ctx.closePath();//闭合路径
ctx.lineWidth = 5 * scale;
ctx.strokeStyle = "#000000";
ctx.globalAlpha = 0.8;
ctx.stroke();
ctx.translate(moveX, moveY);
ctx.restore();
//画路线结束
}
}
这是画机器人 ，也可以用图片代替
//画机器人
drawRobot();
var transX=0,transY=0;
function drawRobot(){
var color = '#a4ca39';
ctx.save(); //锁画布(为了保存之前的画布状态)
ctx.translate(transX,transY);//距离原位置起点的偏移
ctx.scale(scale,scale);//缩放图形
ctx.fillStyle = color;
// 头部
drawHead(14,10,9.2);
function drawHead(startX,startY,radius){
ctx.beginPath();
ctx.arc(startX,startY,radius,0,Math.PI,true);
ctx.fill();
}
//眼睛
drawEye(9.5,6.0,0.8);
drawEye(17.4,6.0,0.8);
function drawEye(startX,startY,radius){
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(startX,startY,radius,0,2*Math.PI);
ctx.fill();
}
//触角
drawWireLeft(7.2,-0.5,0.5,2.0,2.4);
drawWireRight(20.0,-0.5,0.5,2.0,2.4);
function drawWireLeft(startX,startY,lineWidth,lineHeight,endY){
ctx.strokeStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(startX+lineHeight,endY);
ctx.lineWidth = lineWidth;
ctx.stroke();
}
function drawWireRight(startX,startY,lineWidth,lineHeight,endY){
ctx.strokeStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(startX-lineHeight,endY);
ctx.lineWidth = lineWidth;
ctx.stroke();
}
//身体
drawBody(4.8,10.7,23.2,25.5,2.0);
function drawBody(startX,startY,endX,endY,radius){
ctx.fillStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,startY);
ctx.lineTo(endX,endY-radius);
ctx.arcTo(endX,endY,endX-radius,endY,radius);
ctx.lineTo(startX+radius,endY);
ctx.arcTo(startX,endY,startX,endY-radius,radius);
ctx.lineTo(startX,startY);
ctx.fill();
ctx.closePath();
}
//腿
drawLeg(8.2,25.5,30.0,2.0);
drawLeg(15.2,25.5,30.0,2.0);
function drawLeg(startX,startY,endY,radius){
var endX = startX + radius*2;
ctx.fillStyle=color;
ctx.fillRect(startX,startY,radius*2,endY-startY);
ctx.beginPath();
ctx.arc(endX-radius,endY,radius,0,Math.PI);
ctx.fill();
}
//手臂
drawHand(2.0,11.0,21.0);
drawHand(26.0,11.0,21.0);
function drawHand(startX,startY,endY){
ctx.strokeStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(startX,endY);
ctx.lineCap = "round";
ctx.lineWidth = 4.0;
ctx.stroke();
}
ctx.restore();//把当前画布返回(调整)到上一个save()状态之前
}
循环执行画图
可以在这里接收数据
//循环
var interval = setInterval(function () {
if (!flag) {
huaXunHuanLuXian();
}
},1000);
function huaXunHuanLuXian() {
myCanvas(addx, addY);
}
基本上实现了，可拖拽地图加放大缩小的功能，并且，可以给出相对于原地图坐标，就可以在缩放的地图上显示，路线变粗变细等等
以下是完整js代码（jq混用）
var canvas = document.getElementById('mycanvas'); // 得到画布
var ctx = canvas.getContext('2d'); // 得到画布的上下文对象
canvas.width=300;
canvas.height =200;
//判断鼠标是否点击地图,截取图片时的坐标（画布从图片那个点开始显示） 和 鼠标滚路滑过的距离 缩放率
var flag=false, x=0, y= 0,add= 0,add1= 0,scale=1;
//鼠标每次抬起的坐标
var x_end=0;y_end=0;
var img = new Image();
img.src = '../images/control/pics01.png';
//线路 对象数组
var jObj=[{x:0,y:0},{x:200,y:100},{x:300,y:300},{x:500,y:500},{x:1000,y:800}];
//机器人坐标
var aMAN=200,bMAN=110;
img.onload = function () {
ctx.save();
ctx.drawImage(img,x,y);
if(canvas.addEventListener){
canvas.addEventListener("mousewheel",MouseWheelHandler,false);
canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else{
Limg.attachEvent("onmousewheel", MouseWheelHandler);
}
console.count("执行次数，windos");
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))))*5;
add += img.width*delta/50;
add1 += img.height*delta/50;
canvas.height = canvas.height;
ctx.beginPath();
var moveX = addx;
var moveY = addY;
ctx.drawImage(img, x - moveX, y - moveY, img.width, img.height, 0, 0, img.width - add, img.height - add1);
//保留2位小数
scale = ((img.height-add1)/img.height).toFixed(2);
//画路线
//ctx.save();
//ctx.beginPath();
//for(var i=0;i<jObj.length;i++){
// if(i==0)
// {
// ctx.moveTo(parseInt(jObj[i].x-(x-moveX))*scale,parseInt(jObj[i].y-(x-moveY))*scale);
// }
// ctx.lineTo(parseInt(jObj[i].x-(x-moveX))*scale,parseInt(jObj[i].y-(x-moveY))*scale);
//}
ctx.closePath();//闭合路径
//ctx.lineWidth=2*scale;
//ctx.strokeStyle="#ff0000";
//ctx.globalAlpha=0.8;
//ctx.stroke();
//ctx.translate(moveX,moveY);
//ctx.restore();
//画路线结束
myCanvas(moveX, moveY);
$("h1").html("缩放率"+scale);
return false;
}
}
$("#but").click(function () {
if($(this).hasClass("off")){
//点击画图
//class = on;
$(this).css("backgroundColor","red").addClass("on").removeClass("off");
//画图功能
}else{
//点击取消画图
//class = off;
$(this).css("backgroundColor","#00a0e9").addClass("off").removeClass("on");
}
});
//鼠标落下时的坐标 和 鼠标滑动的距离 鼠标累计距离 判断过界
var nowX,nowY,moveX=0,moveY=0,addx=0,addY= 0;
$(function () {
//开关是关闭 可以拖拽地图
$('canvas').mousedown(function (e) {
flag = true;
nowX = e.offsetX; // 鼠标落下时的X
nowY = e.offsetY; // 鼠标落下时的Y
}).mouseup(function (e) {
flag = false;
if (!flag && $("#but").hasClass("off")) {
console.count("执行次数");
addx += moveX;
addY += moveY;
myCanvas(addx, addY);
console.log(addx + '' + addY + "," + moveX + "," + moveY);
}
x_end = e.offsetX;
y_end = e.offsetY;
console.log(nowX, nowY, x_end, y_end);
saveZuoBiao();
}).mousemove(function (e) {
if(flag&& $("#but").hasClass("off")){
//坐标差
moveX = (e.offsetX - nowX)/scale/5;
moveY = (e.offsetY - nowY)/scale/5;
//画图方法
myCanvas((moveX + addx), (moveY + addY));
}else if(flag&& $("#but").hasClass("on")){
drawRect(e);
}
});
});
function myCanvas(moveX, moveY) {
if (x - moveX < 0) {
x = addx = 0.1;
} if (y - moveY < 0) {
y = addY = 0.1;
}
if (x - moveX >= 0 && y - moveY >= 0) {
//从新绘制
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.drawImage(img, x - moveX, y - moveY, img.width, img.height, 0, 0, img.width - add, img.height - add1);
//显示观看数据
$("#myText").html("图片起始位置：" + (x - moveX) + '图片的宽：' + (img.width - add) +
"图片起始位置y" + (y - moveY) + '图片的高' + (img.height - add1));
//画线路
ctx.save();
ctx.beginPath();
for (var i = 0; i < jObj.length; i++) {
if (i == 0) {
ctx.moveTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
}
ctx.lineTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
}
//ctx.closePath();//闭合路径
//线路宽
ctx.lineWidth = 2 * scale;
//颜色
ctx.strokeStyle = "#ff0000";
//透明度
ctx.globalAlpha = 0.8;
ctx.stroke();
ctx.translate(moveX, moveY);
ctx.restore();
//200 100 代表机器人的实际位置
transX = (moveX + aMAN) * scale, transY = (moveY + bMAN) * scale;
drawRobot();
//画行走过的路线
ctx.save();
ctx.beginPath();
for (var i = 0; i < jObj.length; i++) {
if (i == 0) {
ctx.moveTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
}
ctx.lineTo(parseInt(jObj[i].x - (x - moveX)) * scale, parseInt(jObj[i].y - (x - moveY)) * scale);
if (i < jObj.length - 1) {
var x1 = jObj[i].x;
var y1 = jObj[i].y;
var x2 = jObj[i + 1].x;
var y2 = jObj[i + 1].y;
if (aMAN <= x2 && aMAN >= x1 && bMAN <= y2 && bMAN >= y1) {
ctx.lineTo(parseInt(aMAN - (x - moveX)) * scale, parseInt(bMAN - (x - moveY)) * scale);
break;
}
}
}
//ctx.closePath();//闭合路径
ctx.lineWidth = 5 * scale;
ctx.strokeStyle = "#000000";
ctx.globalAlpha = 0.8;
ctx.stroke();
ctx.translate(moveX, moveY);
ctx.restore();
//画路线结束
}
}
//画矩形
function drawRect(e) {
//当鼠标按下时画图
if (flag) {
ctx.restore();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img,x-addx,y-addY,img.width,img.height,0,0,img.width-add,img.height-add1);
ctx.strokeStyle="#ffffff";
ctx.beginPath();
//画矩形方法
var a = canvas.width/(img.width-add);
var b = canvas.width/(canvas.height+canvas.width);
ctx.strokeRect(nowX, nowY, (e.offsetX - nowX), (e.offsetY - nowY));
}
}
function saveZuoBiao(){
//保存最后画上去的坐标
//把坐标还原到1:1的比例 当前比例画的的图除以缩放系数
var r1 = nowX/scale+x-addx;
var r2 = nowY/scale+y-addY;
var r3 = x_end/scale+x-addx;
var r4 = y_end/scale+y-addY;
}
function but1(){
ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width-add,img.height-add1);
x = moveX=addx=0;
y = moveY=addY=0;
}
//画机器人
drawRobot();
var transX=0,transY=0;
function drawRobot(){
var color = '#a4ca39';
ctx.save(); //锁画布(为了保存之前的画布状态)
ctx.translate(transX,transY);//距离原位置起点的偏移
ctx.scale(scale,scale);//缩放图形
ctx.fillStyle = color;
// 头部
drawHead(14,10,9.2);
function drawHead(startX,startY,radius){
ctx.beginPath();
ctx.arc(startX,startY,radius,0,Math.PI,true);
ctx.fill();
}
//眼睛
drawEye(9.5,6.0,0.8);
drawEye(17.4,6.0,0.8);
function drawEye(startX,startY,radius){
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(startX,startY,radius,0,2*Math.PI);
ctx.fill();
}
//触角
drawWireLeft(7.2,-0.5,0.5,2.0,2.4);
drawWireRight(20.0,-0.5,0.5,2.0,2.4);
function drawWireLeft(startX,startY,lineWidth,lineHeight,endY){
ctx.strokeStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(startX+lineHeight,endY);
ctx.lineWidth = lineWidth;
ctx.stroke();
}
function drawWireRight(startX,startY,lineWidth,lineHeight,endY){
ctx.strokeStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(startX-lineHeight,endY);
ctx.lineWidth = lineWidth;
ctx.stroke();
}
//身体
drawBody(4.8,10.7,23.2,25.5,2.0);
function drawBody(startX,startY,endX,endY,radius){
ctx.fillStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,startY);
ctx.lineTo(endX,endY-radius);
ctx.arcTo(endX,endY,endX-radius,endY,radius);
ctx.lineTo(startX+radius,endY);
ctx.arcTo(startX,endY,startX,endY-radius,radius);
ctx.lineTo(startX,startY);
ctx.fill();
ctx.closePath();
}
//腿
drawLeg(8.2,25.5,30.0,2.0);
drawLeg(15.2,25.5,30.0,2.0);
function drawLeg(startX,startY,endY,radius){
var endX = startX + radius*2;
ctx.fillStyle=color;
ctx.fillRect(startX,startY,radius*2,endY-startY);
ctx.beginPath();
ctx.arc(endX-radius,endY,radius,0,Math.PI);
ctx.fill();
}
//手臂
drawHand(2.0,11.0,21.0);
drawHand(26.0,11.0,21.0);
function drawHand(startX,startY,endY){
ctx.strokeStyle=color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(startX,endY);
ctx.lineCap = "round";
ctx.lineWidth = 4.0;
ctx.stroke();
}
ctx.restore();//把当前画布返回(调整)到上一个save()状态之前
}
//循环
var interval = setInterval(function () {
if (!flag) {
huaXunHuanLuXian();
}
},1000);
function huaXunHuanLuXian() {
myCanvas(addx, addY);
}
因为最近读了些书，稍微进步了一点，故把代码重构了一下，上面的代码虽然功能实现了，但是，就算我自己长时间不接触，修改起来也会很头疼，这就是写垃圾代码的后果，所以我会尽量约束自己，下面把自己重构的代码贴上来
/**
* Created by Thinkpad on 2019/4/13.
*/
$(window).ready(function(){
board.init();
});
var setting = {//设置类
past: [{x:10,y:10},{x:15,y:10},{x:20,y:10},{x:20,y:15},{x:20,y:20},{x:25,y:20},
{x:30,y:20},{x:35,y:20},{x:40,y:20},{x:40,y:25},{x:40,y:30},{x:40,y:35},{x:40,y:40}
],//已经行进过的线路 临时的测试坐标
next: [],//还未行进过的线路
map: 'timg.jpg',//地图的地址
autoMan: {},//机器人实时坐标
seed: 1000,//请求间隔/ms
spleed: 1.0,//地图缩放率
width: 350,//画布的宽高
height:400
};
var board = {//画布类
init: function () {
board.canvas = document.getElementById('mycanvas'); // 得到画布
board.txt = board.canvas.getContext('2d');
board.canvas.width = setting.width;
board.canvas.height = setting.height;
board.canvas1 = document.getElementById('mycanvas1'); // 得到线路画布
board.txt1 = board.canvas1.getContext('2d');
board.canvas1.width = setting.width;
board.canvas1.height = setting.height;
board.loadImage();
},
loadImage: function () {//地图加载类
board.img = new Image();
board.img.src = setting.map;
board.img.onload = function () {
if(board.canvas1.addEventListener){
board.canvas1.addEventListener("mousewheel",MouseWheelHandler,false);
board.canvas1.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else{
Limg.attachEvent("onmousewheel", MouseWheelHandler);
}
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));
if(delta>0){
setting.spleed += 0.1
}else{
setting.spleed -= 0.1
}
setting.spleed = Math.floor(setting.spleed*10)/10;
console.log('delta:'+delta);
console.log(setting.spleed);
if(setting.spleed<=1.0){
setting.spleed=1.0;
}else if(setting.spleed>=3.0){
setting.spleed=3.0;
}
board.draw();
}
board.canvas.height = board.canvas.height;
board.txt.drawImage(board.img, 0, 0);
mouse.init();
board.qingQiu()
}
},
qingQiu: function () {//请求获取数据
setTimeout(function () {
board.ajax();//循环请求
board.txt1.clearRect(0,0,board.canvas1.width,board.canvas1.height);
board.drawAutoMen();
setting.past.shift();
console.log('这是请求循环体');
board.qingQiu();
}, setting.seed);
},
drawAutoMen:function(){//绘制机器人的类和绘制地图
var p = setting.past;//走过的路线
var n = setting.next;//未走过的路线
var m = setting.autoMan;//机器人坐标
//board.txt1.save();
board.txt1.fillStyle = '#ffffff';
if(p.length>0){
x = p[0].x;
y = p[0].y;
board.txt1.fillRect(x-5-mouse.mouse_x,y-5-mouse.mouse_y,10,10);
}
//board.txt1.restore();
},
ajax:function(){
//请求获取数据
// $.ajax({
// type: "post",
// url: "../handler/Grid.ashx?sortName=id",
// data: {
// methodType: 'V'
// , view: 'vw_tb_device_bjSet'
// , deviceIdAjax: id
// , sortorder:'asc'
// },
// dataType: "json",
// success: function (dataJson) {
// if (dataJson) {
//
// //setting.keys.push(); 添加key，防止图片重复
// //setting.imageS.push(); 添加图片队列
// }
// },
// error: function () {
// alert('请求失败');
// }
//
// });
},
draw:function(){//重绘
board.canvas.height = board.canvas.height;
board.txt.save();
board.txt.beginPath();
board.txt.drawImage(board.img,
mouse.mouse_x - mouse.offsetX, mouse.mouse_y - mouse.offsetY, board.img.width, board.img.height,
0, 0, board.img.width * setting.spleed, board.img.height * setting.spleed);
board.txt.beginPath();
board.txt.fillStyle = 'red';
board.txt.font = '900 30px Arial';
board.txt.fillText('缩放系数'+setting.spleed,10,40);
board.txt.restore();
},
};
var mouse = {
x: 0,//鼠标相对于画布的坐标
y: 0,
mouse_x: 0, //地图偏移的坐标
mouse_y: 0,
offsetX: 0,
offsetY: 0,
endX:0,
endY:0,
//鼠标左键是否按下
buttonPressed: false,
//鼠标是否在canvas区域内
insideCanvas: false,
init: function () {
var $mouseCanvas = $("#mycanvas1");
$mouseCanvas.mousemove(function (ev) {
if (mouse.buttonPressed) {
mouse.offsetX = ev.offsetX - mouse.x;
mouse.offsetY = ev.offsetY - mouse.y;
mouse.mouse_x = mouse.endX-mouse.offsetX;
mouse.mouse_y = mouse.endY-mouse.offsetY;
if(mouse.mouse_x-mouse.offsetX<0){
mouse.mouse_x=mouse.offsetX=0;
}
if(mouse.mouse_y-mouse.offsetY<0){
mouse.mouse_y =mouse.offsetY= 0;
}
if(mouse.mouse_x-mouse.offsetX>board.img.width*setting.spleed-board.canvas.width){
mouse.offsetX = 0;
mouse.mouse_x =(board.img.width*setting.spleed-board.canvas.width);
}
if(mouse.mouse_y-mouse.offsetY>board.img.height*setting.spleed-board.canvas.height){
mouse.offsetY = 0;
mouse.mouse_y = (board.img.height*setting.spleed-board.canvas.height);
}
if(setting.past.length>0){
board.txt1.clearRect(0,0,board.canvas1.width,board.canvas1.height);
board.txt1.fillRect(setting.past[0].x-5-mouse.mouse_x,
setting.past[0].y-5-mouse.mouse_y,10,10);
}
board.draw();
}
});
$mouseCanvas.mousedown(function (ev) {
mouse.buttonPressed = true;
mouse.x = ev.offsetX;
mouse.y = ev.offsetY;
console.log(mouse.offsetX);
console.log('偏移坐标'+mouse.mouse_x);
});
$mouseCanvas.mouseup(function (ev) {//抬起
mouse.buttonPressed = false;
mouse.endX = mouse.mouse_x;
mouse.endY = mouse.mouse_y;
});
$mouseCanvas.mouseleave(function (ev) {//离开画布事件
mouse.insideCanvas = false;//判断鼠标不再画布内
});
$mouseCanvas.mouseenter(function (ev) {//鼠标进入画布
mouse.buttonPressed = false;// 关闭按下状态
mouse.insideCanvas = true;//判断鼠标在画布内
});
}
};
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
