HLJ 发布于
2018-08-24 16:25:52

HTML5 Canvas画布滚动鼠标图片缩放

  • 显示如何在HTML5 Canvas上下文中使用转换方法来有选择地放大和缩小。拖动到平移。单击可放大该位置。按住Shift键并单击可缩小。鼠标滚轮在画布上向上/向下以放大/缩小该位置。 通过以不同比例重新绘制画布,笔划在缩放期间保持平滑。例如,放大额头上的耳环或圆圈以查看精细细节。
<!DOCTYPE HTML>
<html lang="en"><head>
<title>Zooming via HTML5 Canvas Context</title>
<style type="text/css" media="screen">
    body { background:#eee; margin:1em; text-align:center; }
    canvas { display:block; margin:1em auto; background:#fff; border:1px solid #ccc }
</style>
</head><body>
<canvas></canvas>
<script type="text/javascript" charset="utf-8">
    var canvas = document.getElementsByTagName('canvas')[0];
    canvas.width = 800; canvas.height = 600;
    var gkhead = new Image;
    var ball   = new Image;
    window.onload = function(){     
        var ctx = canvas.getContext('2d');
        trackTransforms(ctx);
        function redraw(){
            // Clear the entire canvas
            var p1 = ctx.transformedPoint(0,0);
            var p2 = ctx.transformedPoint(canvas.width,canvas.height);
            ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

            // Alternatively:
            // ctx.save();
            // ctx.setTransform(1,0,0,1,0,0);
            // ctx.clearRect(0,0,canvas.width,canvas.height);
            // ctx.restore();

            ctx.drawImage(gkhead,200,50);

            ctx.beginPath();
            ctx.lineWidth = 6;
            ctx.moveTo(399,250);
            ctx.lineTo(474,256);
            ctx.stroke();

            ctx.save();
            ctx.translate(4,2);
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.moveTo(436,253);
            ctx.lineTo(437.5,233);
            ctx.stroke();

            ctx.save();
            ctx.translate(438.5,223);
            ctx.strokeStyle = '#06c';
            ctx.beginPath();
            ctx.lineWidth = 0.05;
            for (var i=0;i<60;++i){
                ctx.rotate(6*i*Math.PI/180);
                ctx.moveTo(9,0);
                ctx.lineTo(10,0);
                ctx.rotate(-6*i*Math.PI/180);
            }
            ctx.stroke();
            ctx.restore();

            ctx.beginPath();
            ctx.lineWidth = 0.2;
            ctx.arc(438.5,223,10,0,Math.PI*2);
            ctx.stroke();
            ctx.restore();
            
            ctx.drawImage(ball,379,233,40,40);
            ctx.drawImage(ball,454,239,40,40);
            ctx.drawImage(ball,310,295,20,20);
            ctx.drawImage(ball,314.5,296.5,5,5);
            ctx.drawImage(ball,319,297.2,5,5);
        }
        redraw();
        
        var lastX=canvas.width/2, lastY=canvas.height/2;
        var dragStart,dragged;
        canvas.addEventListener('mousedown',function(evt){
            document.body.style.mozUserSelect = document.body.style.webkitUserSelect = 
            document.body.style.userSelect = 'none';
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragStart = ctx.transformedPoint(lastX,lastY);
            dragged = false;
        },false);
        canvas.addEventListener('mousemove',function(evt){
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragged = true;
            if (dragStart){
                var pt = ctx.transformedPoint(lastX,lastY);
                ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
                redraw();
            }
        },false);
        canvas.addEventListener('mouseup',function(evt){
            dragStart = null;
            if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
        },false);

        var scaleFactor = 1.1;
        var zoom = function(clicks){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x,pt.y);
            var factor = Math.pow(scaleFactor,clicks);
            ctx.scale(factor,factor);
            ctx.translate(-pt.x,-pt.y);
            redraw();
        }

        var handleScroll = function(evt){
            var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
            if (delta) zoom(delta);
            return evt.preventDefault() && false;
        };
        canvas.addEventListener('DOMMouseScroll',handleScroll,false);
        canvas.addEventListener('mousewheel',handleScroll,false);
    };
    gkhead.src = 'http://phrogz.net/tmp/gkhead.jpg';
    ball.src   = 'http://phrogz.net/tmp/alphaball.png';
    
    // Adds ctx.getTransform() - returns an SVGMatrix
    // Adds ctx.transformedPoint(x,y) - returns an SVGPoint
    function trackTransforms(ctx){
        var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
        var xform = svg.createSVGMatrix();
        ctx.getTransform = function(){ return xform; };
        
        var savedTransforms = [];
        var save = ctx.save;
        ctx.save = function(){
            savedTransforms.push(xform.translate(0,0));
            return save.call(ctx);
        };
        var restore = ctx.restore;
        ctx.restore = function(){
            xform = savedTransforms.pop();
            return restore.call(ctx);
        };

        var scale = ctx.scale;
        ctx.scale = function(sx,sy){
            xform = xform.scaleNonUniform(sx,sy);
            return scale.call(ctx,sx,sy);
        };
        var rotate = ctx.rotate;
        ctx.rotate = function(radians){
            xform = xform.rotate(radians*180/Math.PI);
            return rotate.call(ctx,radians);
        };
        var translate = ctx.translate;
        ctx.translate = function(dx,dy){
            xform = xform.translate(dx,dy);
            return translate.call(ctx,dx,dy);
        };
        var transform = ctx.transform;
        ctx.transform = function(a,b,c,d,e,f){
            var m2 = svg.createSVGMatrix();
            m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
            xform = xform.multiply(m2);
            return transform.call(ctx,a,b,c,d,e,f);
        };
        var setTransform = ctx.setTransform;
        ctx.setTransform = function(a,b,c,d,e,f){
            xform.a = a;
            xform.b = b;
            xform.c = c;
            xform.d = d;
            xform.e = e;
            xform.f = f;
            return setTransform.call(ctx,a,b,c,d,e,f);
        };
        var pt  = svg.createSVGPoint();
        ctx.transformedPoint = function(x,y){
            pt.x=x; pt.y=y;
            return pt.matrixTransform(xform.inverse());
        }
    }
</script>
</body>
</html>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-24/209.html
最后生成于 2023-08-04 21:38:25
此内容有帮助 ?
0