javascript - html 5 canvas drawing error - Stack Overflow

admin管理员组

文章数量:1403493

I'm trying to build my first nearly-plex map based on vectors drawn in a html 5 canvas.

It works well, except the scaling. I noticed the following:

• In Firefox everything works well (except the mousewheel, but thats just for testing)
• In Chrome zooming out with the mousewheel to a scale factor < 1 it appears like the image gets duplicated every time its drawn
• In Android and iOS, using zoom gesture, there's the biggest problems: every time the image is repainted there are duplicated images.

I thought at first it's my fault, maybe the canvas doesn't get cleared. But after some testing, the "ghosts" disappear and new ghosts appear.

It would be so cool if someone could help.

Code - HTML:

<div>
    <div style="position:absolute;top:30px;z-index:102;">
        <canvas id="canvas" width="1386" height="747" style="position:absolute;"></canvas>
    </div>
    <div style="position:absolute; top:30px;" id="debugText">Debug</div>
    <div style="position:absolute;top:30px; visibility: hidden;">
        <canvas id="debugCanvas" width="1386" height="747"></canvas>
    </div>
    <div style="position:absolute; left: 200px;z-index:99;" id="debugContols">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" onClick="javascript:zoomIn(0, 0, 0.5);">Zoom 0.5</a>
        <a href="#" onClick="javascript:zoomIn(0, 0, 2);">Zoom 2</a>
        <a href="#" onClick="javascript:zoomIn(0, 0, 3);">Zoom 3</a>
    </div>
</div>

Code - Javascript:

var canvas = document.getElementById("canvas");
var debugCanvas = document.getElementById("debugCanvas");
var ctx = canvas.getContext("2d");
var ctxDebug = debugCanvas.getContext("2d");
var context = ctx;
var scale = 1;
var originx = 0;
var originy = 0;

function draw() {
    // plne/Straen
[find drawing in fiddle, since its too long]
}

this.onmousewheel = function(event) {
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    var wheel = event.wheelDelta/120;//n or -n

    //according to Chris ment
    var zoom = Math.pow(1 + Math.abs(wheel)/2 , wheel > 0 ? 1 : -1);

    zoomIn(mousex, mousey, zoom);
    return;
}

var isZooming = false;
var distances = new Array();

function touchStart(e) {
    preventDefaultScroll(e);
    if(e.touches.length > 1 && isZooming == false) {
        var touch1 = event.touches[0];
        var touch2 = event.touches[1];

        x1 = touch1.pageX;
        y1 = touch1.pageY;
        x2 = touch2.pageX;
        y2 = touch2.pageY;

        var diffX = x2 - x1;
        var diffY = y2 - y1;

        var centerX = x1 + diffX/2;
        var centerY = y1 + diffY/2;

        //$("#debugText").text(centerX + " " + centerY);
        debugCanvas.width = debugCanvas.width;
        ctxDebug.beginPath();
        ctxDebug.arc(centerX, centerY, 20, 0, 2 * Math.PI, false);
        ctxDebug.fillStyle = 'green';
        ctxDebug.fill();
        ctxDebug.lineWidth = 5;
        ctxDebug.strokeStyle = '#003300';
        ctxDebug.stroke();

        zoomCenterX = centerX;
        zoomCenterY = centerY;

        var touch1 = event.touches[0];
        var touch2 = event.touches[1];

        x1 = touch1.pageX;
        y1 = touch1.pageY;
        x2 = touch2.pageX;
        y2 = touch2.pageY;

        var distanz = dist(x1,y1,x2,y2);
        lastDistance = distanz;

        distanceInterval = setInterval(checkDistance,50);
        isZooming = true;
    }
}

    var distanceInterval;
    var zoomCenterX;
    var zoomCenterY;
    var lastDistance = 0;
    function checkDistance()
    {
    $("#debugText").text("checkDist");
        if(distances.length == 0) return;





        var distanceGesamt = 0;

        for(var i = 0; i < distances.length; i++)
        {
            distanceGesamt += distances[i];
        }


        var distanceDurchschnitt = distanceGesamt / distances.length;


        var curDist = distanceDurchschnitt - lastDistance;

        var zoomFac = 1 + (curDist / 100);

        $("#debugText").text(distanceDurchschnitt + " " + zoomFac);

        distances = new Array();


        zoomIn(zoomCenterX, zoomCenterY, zoomFac)
        lastDistance = distanceDurchschnitt;
    }

    function touchEnd(e)
    {
        if(e.touches.length < 2)
        {
            isZooming = false;
            clearInterval(distanceInterval);

        }
    }

    function dist(x1,y1,x2,y2)
     {
        return Math.sqrt((x1 -= x2) * x1 + (y1 -= y2) * y1);
     }

    function touchMove(e)
    {
        if(isZooming)
        {
            var touch1 = event.touches[0];
            var touch2 = event.touches[1];

            x1 = touch1.pageX;
            y1 = touch1.pageY;
            x2 = touch2.pageX;
            y2 = touch2.pageY;

            var distanz = dist(x1,y1,x2,y2);
            distances.push(distanz);
        }
    }

    function preventDefaultScroll(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    } 



    canvas.addEventListener('gestureend', function(e) {
        if (e.scale < 1.0) {
            // User moved fingers closer together
        } else if (e.scale > 1.0) {
            // User moved fingers further apart
        }
    }, false);

    function zoomIn(mousex, mousey, zoom)
    {

        canvas.style.display = 'none';
        context.translate(
            originx,
            originy
        );
        context.scale(zoom,zoom);
        context.translate(
            -( mousex / scale + originx - mousex / ( scale * zoom ) ),
            -( mousey / scale + originy - mousey / ( scale * zoom ) )
        );

        originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );
        originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );
        scale *= zoom;





         requestAnimFrame(function() {
            context.clearRect(0,0,canvas.width,canvas.height);
              draw();
        });


        canvas.style.display = 'block';
        //context.clearRect(0,0,canvas.width,canvas.height);
    }

    $(document).ready(function() {
        draw();
        addEventListener('touchstart', touchStart, true);
        addEventListener('touchmove', touchMove, true);
        addEventListener('touchend', touchEnd, true);
        addEventListener('touchcancel', touchEnd, true);


    });
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

Here's the fiddle

I'm trying to build my first nearly-plex map based on vectors drawn in a html 5 canvas.

It works well, except the scaling. I noticed the following:

• In Firefox everything works well (except the mousewheel, but thats just for testing)
• In Chrome zooming out with the mousewheel to a scale factor < 1 it appears like the image gets duplicated every time its drawn
• In Android and iOS, using zoom gesture, there's the biggest problems: every time the image is repainted there are duplicated images.

I thought at first it's my fault, maybe the canvas doesn't get cleared. But after some testing, the "ghosts" disappear and new ghosts appear.

It would be so cool if someone could help.

Code - HTML:

<div>
    <div style="position:absolute;top:30px;z-index:102;">
        <canvas id="canvas" width="1386" height="747" style="position:absolute;"></canvas>
    </div>
    <div style="position:absolute; top:30px;" id="debugText">Debug</div>
    <div style="position:absolute;top:30px; visibility: hidden;">
        <canvas id="debugCanvas" width="1386" height="747"></canvas>
    </div>
    <div style="position:absolute; left: 200px;z-index:99;" id="debugContols">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" onClick="javascript:zoomIn(0, 0, 0.5);">Zoom 0.5</a>
        <a href="#" onClick="javascript:zoomIn(0, 0, 2);">Zoom 2</a>
        <a href="#" onClick="javascript:zoomIn(0, 0, 3);">Zoom 3</a>
    </div>
</div>

Code - Javascript:

var canvas = document.getElementById("canvas");
var debugCanvas = document.getElementById("debugCanvas");
var ctx = canvas.getContext("2d");
var ctxDebug = debugCanvas.getContext("2d");
var context = ctx;
var scale = 1;
var originx = 0;
var originy = 0;

function draw() {
    // plne/Straen
[find drawing in fiddle, since its too long]
}

this.onmousewheel = function(event) {
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    var wheel = event.wheelDelta/120;//n or -n

    //according to Chris ment
    var zoom = Math.pow(1 + Math.abs(wheel)/2 , wheel > 0 ? 1 : -1);

    zoomIn(mousex, mousey, zoom);
    return;
}

var isZooming = false;
var distances = new Array();

function touchStart(e) {
    preventDefaultScroll(e);
    if(e.touches.length > 1 && isZooming == false) {
        var touch1 = event.touches[0];
        var touch2 = event.touches[1];

        x1 = touch1.pageX;
        y1 = touch1.pageY;
        x2 = touch2.pageX;
        y2 = touch2.pageY;

        var diffX = x2 - x1;
        var diffY = y2 - y1;

        var centerX = x1 + diffX/2;
        var centerY = y1 + diffY/2;

        //$("#debugText").text(centerX + " " + centerY);
        debugCanvas.width = debugCanvas.width;
        ctxDebug.beginPath();
        ctxDebug.arc(centerX, centerY, 20, 0, 2 * Math.PI, false);
        ctxDebug.fillStyle = 'green';
        ctxDebug.fill();
        ctxDebug.lineWidth = 5;
        ctxDebug.strokeStyle = '#003300';
        ctxDebug.stroke();

        zoomCenterX = centerX;
        zoomCenterY = centerY;

        var touch1 = event.touches[0];
        var touch2 = event.touches[1];

        x1 = touch1.pageX;
        y1 = touch1.pageY;
        x2 = touch2.pageX;
        y2 = touch2.pageY;

        var distanz = dist(x1,y1,x2,y2);
        lastDistance = distanz;

        distanceInterval = setInterval(checkDistance,50);
        isZooming = true;
    }
}

    var distanceInterval;
    var zoomCenterX;
    var zoomCenterY;
    var lastDistance = 0;
    function checkDistance()
    {
    $("#debugText").text("checkDist");
        if(distances.length == 0) return;





        var distanceGesamt = 0;

        for(var i = 0; i < distances.length; i++)
        {
            distanceGesamt += distances[i];
        }


        var distanceDurchschnitt = distanceGesamt / distances.length;


        var curDist = distanceDurchschnitt - lastDistance;

        var zoomFac = 1 + (curDist / 100);

        $("#debugText").text(distanceDurchschnitt + " " + zoomFac);

        distances = new Array();


        zoomIn(zoomCenterX, zoomCenterY, zoomFac)
        lastDistance = distanceDurchschnitt;
    }

    function touchEnd(e)
    {
        if(e.touches.length < 2)
        {
            isZooming = false;
            clearInterval(distanceInterval);

        }
    }

    function dist(x1,y1,x2,y2)
     {
        return Math.sqrt((x1 -= x2) * x1 + (y1 -= y2) * y1);
     }

    function touchMove(e)
    {
        if(isZooming)
        {
            var touch1 = event.touches[0];
            var touch2 = event.touches[1];

            x1 = touch1.pageX;
            y1 = touch1.pageY;
            x2 = touch2.pageX;
            y2 = touch2.pageY;

            var distanz = dist(x1,y1,x2,y2);
            distances.push(distanz);
        }
    }

    function preventDefaultScroll(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    } 



    canvas.addEventListener('gestureend', function(e) {
        if (e.scale < 1.0) {
            // User moved fingers closer together
        } else if (e.scale > 1.0) {
            // User moved fingers further apart
        }
    }, false);

    function zoomIn(mousex, mousey, zoom)
    {

        canvas.style.display = 'none';
        context.translate(
            originx,
            originy
        );
        context.scale(zoom,zoom);
        context.translate(
            -( mousex / scale + originx - mousex / ( scale * zoom ) ),
            -( mousey / scale + originy - mousey / ( scale * zoom ) )
        );

        originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );
        originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );
        scale *= zoom;





         requestAnimFrame(function() {
            context.clearRect(0,0,canvas.width,canvas.height);
              draw();
        });


        canvas.style.display = 'block';
        //context.clearRect(0,0,canvas.width,canvas.height);
    }

    $(document).ready(function() {
        draw();
        addEventListener('touchstart', touchStart, true);
        addEventListener('touchmove', touchMove, true);
        addEventListener('touchend', touchEnd, true);
        addEventListener('touchcancel', touchEnd, true);


    });
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

Here's the fiddle

• javascript
• html
• html5-canvas

Share Improve this question Follow edited Jun 7, 2013 at 11:23 gkalpak 48.2k88 gold badges107107 silver badges119119 bronze badges asked Jun 7, 2013 at 10:35 derchrisderchris 9322 silver badges66 bronze badges 2

• I noted that if I add canvas.width = canvas.width before redrawing it works better... But I think this can't be solution... – derchris Commented Jun 7, 2013 at 11:29
• It is, you need to clear the canvas before redrawing, otherwise, if the new image doesn't cover the old, the old image won't be cleared off. Another way would just be context.clearRect(0,0,width,height); – pandavenger Commented Jun 7, 2013 at 16:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Okay, so the first problem I found in your code was that you were using context instead of ctx when you were doing context transforms, so I fixed that.

Next, I moved the clearRect to the top of the function, and then drew after the context was already transformed.

Finally, there was a little bit of map still duplicating at the bottom, so I changed clearRect to clear twice the actual height of the canvas canvas.height*2.

JSFiddle

Two thoughts:

First: Wow, nice use of paths to lay out a map--very extensive!

Second: Since you're driving your zooming with scrollwheel/touch rather than mouseclicks, you need to remove the requestAnimFrame animation.

The animation was meant to gradually zoom to the point where the user mouseclicked.

本文标签： javascripthtml 5 canvas drawing errorStack Overflow