canvas实现点击，拖拽和缩放的效果

目标：实现红点的点击，拖拽，和缩放效果。

思路：1.缩放通过scale，通过计算鼠标滚轮的滚动实现放大和缩小。

2.拖拽和点击通过定时器区分点击和长按，长按拖拽，点击alert一句话。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
    (function(){
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        var ax,ay,r = 30,num=1;//绘制图形的参数
        var timeOutEvent = 0;//区分拖拽和点击的参数
        //创建图形
        function createBlock(a,b,r){
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.arc(a,b,r,0,Math.PI*2);
            ctx.fill();
        }
        createBlock(200,200,30);
        c.onmousedown = function(ev){
            var e = ev||event;
            var x = e.clientX;
            var y = e.clientY;
            timeOutEvent = setTimeout("longPress()",500);
            e.preventDefault();
            drag(x,y,r);
        };
        //缩放
        c.onmousewheel = function(ev){
            var e = ev||event;
            num += e.wheelDelta/1200;
            r = 30*num;
            ctx.clearRect(0,0,c.width,c.height);
            if(ax == null || ay == null){
                createBlock(200,200,r);
            }else{
                if(r>0){
                    createBlock(ax,ay,r);
                }
            }
        };
        //拖拽函数
        function drag(x,y,r){
            // 按下鼠标判断鼠标位置是否在圆上，当画布上有多个路径时，isPointInPath只能判断最后那一个绘制的路径
            if(ctx.isPointInPath(x,y)){
                //路径正确，鼠标移动事件
                c.onmousemove = function(ev){
                    var e = ev||event;
                    ax = e.clientX;
                    ay = e.clientY;
                    clearTimeout(timeOutEvent);
                    timeOutEvent = 0;
                    //鼠标移动每一帧都清楚画布内容，然后重新画圆
                    ctx.clearRect(0,0,c.width,c.height);
                    createBlock(ax,ay,r);
                };
                //鼠标移开事件
                c.onmouseup = function(){
                    c.onmousemove = null;
                    c.onmouseup = null;
                    clearTimeout(timeOutEvent);
                    if(timeOutEvent!=0){
                        alert("你这是点击，不是拖拽");
                    }
                }
            }
        }
        function longPress(){
            timeOutEvent = 0;
        }
    })()
</script>

</body>
</html>

没有做兼容性处理（鼠标滚轮计算），建议在谷歌浏览器下预览效果。

canvas实现点击，拖拽和缩放的效果

猜你喜欢