想用html5 canvas来实现地图功能
主要是想把地图功能集合在系统中，而不是使用类似geoserver等发布，相当于两套系统了。地图是室内地图，所以高德百度什么的没用。我的理想情况是丢一副矢量图当做地图，上面有几个监控点放置摄像头等等。目前还在设计中……
后面发现canvas似乎可以试试，就找了个easelJs.js的js库，但这玩意不知道怎么回事，对click事件的反应很不好，对mousemove根本没反应，可能我用的不对，于是自己写吧……目前的功能是图片可以缩放，拖拽，上面可以放icon，icon不会随底图的大小发生变化，但会随底图的拖拽发生位置的变化，icon可以实现事件，目前测试通过的有click和mousemove事件，本来是希望鼠标移动到icon上时，在icon旁出现div，但没成功，js动态编写div加进去有点问题
图片缩放拖拽功能基本参考了/airbreak/p/4595494.html这里的代码
先放html5的代码，很简单，div1是用来显示事件的一些信息的
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>图片加载平移放大缩小示例</title>
<style>
html,body{
margin:0px;
padding:0px;
}
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="testid">
<div id="div1" style="width:100px; height:20px;"></div>
<canvas id="canvas" width="500" height="500" style="margin-left:20px; margin-top:20px;" onMouseMove="cnvs_getCoordinates(event);"></canvas>
<script type="text/javascript" src="main.js"></script>
</div>
</body>
</html>
js代码
var canvas,context;
var img,//图片对象
icon,
imgIsLoaded,//图片是否加载完成;
iconIsLoaded,//图片是否加载完成;
imgX=0,
imgY=0,
imgScale=1;
initX = 50;
initY=50;
iconX=initX;
iconY=initY;
//var iconarr = new Array(1);
(function int(){
canvas=document.getElementById('canvas');
context=canvas.getContext('2d');
loadImg();
})();
function loadImg(){
img=new Image();
img.οnlοad=function(){
imgIsLoaded=true;
drawImage();
}
img.src="ABCDE.svg"; //矢量图
icon=new Image();
icon.οnlοad=function(){
iconIsLoaded=true;
drawImage();
}
icon.src="icon_6.png"; // 地图上的图标
}
function drawImage(){
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
context.drawImage(icon,iconX,iconY);
}
canvas.οnmοusedοwn=function(event){
var pos=windowToCanvas(canvas,event.clientX,event.clientY);
canvas.οnmοusemοve=function(event){
canvas.style.cursor="move";
var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
var x=pos1.x-pos.x;
var y=pos1.y-pos.y;
pos=pos1;
imgX+=x;
imgY+=y;
iconX=imgX+initX;
iconY=imgY+initY;
drawImage();
}
canvas.οnmοuseup=function(){
canvas.οnmοusemοve=cnvs_getCoordinates;
canvas.οnmοuseup=null;
canvas.style.cursor="default";
}
}
canvas.onmousewheel=canvas.οnwheel=function(event){
var pos=windowToCanvas(canvas,event.clientX,event.clientY);
event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
if(event.wheelDelta>0){
imgScale*=2;
imgX=imgX*2-pos.x;
imgY=imgY*2-pos.y;
initX = initX*2;
initY = initY*2;
iconX=imgX+initX;
iconY=imgY+initY;
}else{
imgScale/=2;
imgX=imgX*0.5+pos.x*0.5;
imgY=imgY*0.5+pos.y*0.5;
initX = initX/2;
initY = initY/2;
iconX=imgX+initX;
iconY=imgY+initY;
}
drawImage();
}
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 cnvs_getCoordinates(event)
{
var pos=windowToCanvas(canvas,event.clientX,event.clientY);
var w = iconX + icon.width;
var h = iconY + icon.height;
var mydiv=document.getElementById("div1");
mydiv.innerHTML = 'eventX='+pos.x +'eventY='+pos.y +'iconX='+iconX +'iconY='+iconY ;
if (pos.x >= iconX && pos.x <= w && pos.y >= iconY && pos.y <= h){
// 当鼠标移动到icon上时，显示abc
mydiv.innerHTML = 'abc';
} else {
}
}
如果觉得《html5 canvas图片缩放 拖拽》对你有帮助，请点赞、收藏，并留下你的观点哦！
