web-dev-qa-db-fra.com

Comment détruire / recharger la toile en html 5?

Je travaille sur une application de livre électronique, je dessine chaque page sur un canevas à l'aide de PDF.js, le problème est que lorsque je clique sur le bouton et que je passe à une autre page, j'ai essayé de simplement rendre à nouveau le même canevas, mais le canevas semble bouger vers un mauvais emplacement ou une mauvaise taille.

function renderPage(url) {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
      //clearCanvasGrid('canvas');

      PDFJS.getDocument(url).then(function (pdf) {
          // Using promise to fetch the page
          pdf.getPage(1).then(function(page) {
            var viewport = page.getViewport(5); //scale 5

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: ctx,
              viewport: viewport
            };

            page.render(renderContext).then(function() {
                initialZoomPage(viewport.height,viewport.width);
            });
        });
    });
}

Alors, y a-t-il une étape nécessaire que je dois faire avant de redessiner la page? Aussi, comment puis-je le détruire si je souhaite fermer la page? Merci

Mettre à jour:

function clearCanvasGrid(canvasID){
    canvas = document.getElementById(canvasID); //because we are looping //each location has its own canvas ID
    context = canvas.getContext('2d');
    //context.beginPath();

    // Store the current transformation matrix
    context.save();

    // Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING
}

J'ai trouvé une fonction pour effacer le canevas mais elle a .save, .setTransform et .restore en plus de clearRect, sont-elles nécessaires? Merci

javascriptjqueryhtmlcanvashtml5-canvas
11
user782104

Une façon consiste à vider le canevas à l'aide de context.clearRect(0,0, width, height) (Référence) .

Vous pouvez également ajouter un nouvel élément de canevas (et éventuellement supprimer l'ancien, selon que vous souhaitez l'afficher à nouveau) chaque fois que vous souhaitez une nouvelle page. Quelque chose comme ça devrait le faire:

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);

Notez simplement que si vous prévoyez d'en garder plusieurs, chacun doit avoir un id unique au lieu de simplement id="canvas" (peut-être basé sur le numéro de page - quelque chose comme canvas-1).

Réponse à la question mise à jour :

Les save, setTransform et restore ne sont nécessaires que si vous effectuez (ou autorisez en quelque sorte les utilisateurs à effectuer) la transformation. Je ne sais pas si la bibliothèque PDF.js fait une transformation dans les coulisses, il est donc préférable de la laisser là.

15
Moshe Katz

essayez d'utiliser clearRect () , comme:

canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
9
Sudhir Bastakoti