html5 canvas图片缩放,拖拽

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/shijieming/article/details/78686930

想用html5 canvas来实现地图功能

主要是想把地图功能集合在系统中,而不是使用类似geoserver等发布,相当于两套系统了。地图是室内地图,所以高德百度什么的没用。我的理想情况是丢一副矢量图当做地图,上面有几个监控点放置摄像头等等。目前还在设计中……

后面发现canvas似乎可以试试,就找了个easelJs.js的js库,但这玩意不知道怎么回事,对click事件的反应很不好,对mousemove根本没反应,可能我用的不对,于是自己写吧……目前的功能是图片可以缩放,拖拽,上面可以放icon,icon不会随底图的大小发生变化,但会随底图的拖拽发生位置的变化,icon可以实现事件,目前测试通过的有click和mousemove事件,本来是希望鼠标移动到icon上时,在icon旁出现div,但没成功,js动态编写div加进去有点问题

图片缩放拖拽功能基本参考了https://www.cnblogs.com/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 {
        
    }
}



展开阅读全文

没有更多推荐了,返回首页