Rendern von SVG-Bildern auf einer Leinwand

Question

Ich versuche, SVG-Bilder auf einer Leinwand die Bilder gezeichnet einer nach dem anderen zu machen, eine bestimmte Zeile zu füllen, ist unter dem Code-Schnipsel aus dem gleichen:

function createSVGUrl(svg) { 
    var svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'}); 
    return DOMURL.createObjectURL(svgBlob); 
    }; 

/** 
    * Renders svg tile on the given context. 
    * @param {CanvasRenderingContext2D} ctx 
    * @param {SVGElement} svg The svg tile. 
    * @param {{x: number, y:number}} pos The position to draw the svg tile on. 
    * @throws Error 
    */ 
    function renderSVGTile(ctx, svg, pos) { 
    var img = new Image(); 
    var url = createSVGUrl(svg); 
    img.onload = function() { 
     try { 
     ctx.drawImage(img, pos.x, pos.y); 
     ctx.imageSmoothingEnabled = false; 
     ctx.mozImageSmoothingEnabled = false; 
     DOMURL.revokeObjectURL(url); 
     } catch (e) { 
     throw new Error('Could not render image' + e); 
     } 
    }; 
    img.src = url; 
    }; 

Die Problem ist, dass ich die teilweise gefüllten Reihen sehen kann, die ich nicht will, gibt es irgendeine Weise, die ganze Reihe auf einmal zu füllen?

Answer 1

Ja. Zeichnen Sie Ihre gesamte Kachelreihe zuerst auf ein Offscreen-Canvas. Wenn Sie damit fertig sind, können Sie diese Leinwand auf die Leinwand projizieren.

Etwas wie:

var offscreenCanvas = document.createElement('canvas'); 
offscreenCanvas .width = <whatever>; 
offscreenCanvas .height = <whatever>; 
var offscreenContext = offscreenCanvas.getContext('2d'); 

// Draw all your tiles 
renderSVGTile(offscreenContext, svg, pos); 
//... loop through all tiles etc 

// When finished... 
mainCanvasContext.drawImage(offscreenCanvas, 0, 0); 

Demo:

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var image = document.getElementById("source"); 
 

 
var offscreenCanvas = document.createElement("canvas"); 
 
offscreenCanvas.width = 300; 
 
offscreenCanvas.height = 150; 
 
var offscreenContext = offscreenCanvas.getContext("2d"); 
 

 
offscreenContext.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); 
 
offscreenContext.drawImage(image, 33, 71, 104, 124, 108, 20, 87, 104); 
 

 
ctx.drawImage(offscreenCanvas, 0, 0);

<canvas id="canvas"></canvas> 
 
<div style="display:none;"> 
 
    <img id="source" src="http://placekitten.com/300/227" 
 
     width="300" height="227"> 
 
</div>

Answer 2

Dies ist, wie ich es tun, obwohl ich nicht sicher bin, ob es Ihren Zweck dienen wie ich das Bild im Dokument zum Zeitpunkt der Wiedergabe, es ist nur versteckt.

var ctx = document.getElementById("canvasID").getContext("2d"); 
ctx.drawImage(document.getElementById("imageID"), x,y,w,h); 

Answer 3

Die Lösung unten für mich funktioniert gut:

/** 
    * @param {CanvasRenderingContext2D} ctx 
    * @param {!Array<!SVGTile>} tiles 
    */ 
    function drawTiles(ctx, tiles) { 
    var canvas = document.createElement('canvas'); 
    var width = tiles.length * TILE_WIDTH; 
    var height = TILE_HEIGHT; 
    var y = tiles[0].y; 
    canvas.width = tiles.length * TILE_WIDTH; 
    canvas.height = TILE_HEIGHT; 
    var context = canvas.getContext("2d"); 
    tiles.forEach(function(tile, index) { 
     renderTile(context, tile, function() { 
     if (tiles.length === index + 1) { 
      ctx.drawImage(canvas, 0, y); 
     } 
     }); 
    }); 
    // TODO: Below code is for testing purpose. 
    var temp = document.createElement('div'); 
    temp.appendChild(canvas); 
    document.body.appendChild(temp); 
    }; 


    /** 
    * Renders svg tile on the given context. 
    * @param {CanvasRenderingContext2D} ctx 
    * @param {!Tile} tile The tile to render. 
    * @param {function()} callback To be called after image is loaded. 
    * @throws Error 
    */ 
    function renderTile(ctx, tile, callback) { 
    var img = new Image(); 
    img.onload = function() { 
     try { 
     ctx.drawImage(this, tile.x, 0, tile.width, tile.height); 
     ctx.imageSmoothingEnabled = false; 
     ctx.mozImageSmoothingEnabled = false; 
     DOMURL.revokeObjectURL(tile.svgURL); 
     callback(); 
     } catch (e) { 
     throw new Error('Could not render image' + e); 
     } 
    }; 
    img.src = tile.svgURL; 
    };