FabricJS - ZoomToPoint arbeitet nicht mit backgroundImage

Question

Ich benutze zoomtopoint und zoome zum Objekt. aber nicht mit Hintergrund arbeiten. Ich möchte das Objekt und den Hintergrund vergrößern. Wie kann ich ?

Beispiel: Objektgröße: 100x100 nicht zoomen. nach Zoom Objektgröße: 100x100

nach Zoom und das Gitter blieben gleich.

Zoom Ereignis

document.addEventListener('wheel', function(event) { 
     var evt = window.event || event; 
     var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta; 
     var curZoom = canvas.getZoom(); 
     var newZoom = curZoom + delta/4000; 
     var x = event.offsetX; 
     var y = event.offsetY; 
     canvas.zoomToPoint({ x: x, y: y }, newZoom); 
     if(event != null)event.preventDefault(); 
     return false; 
     canvas.calcOffset(); 
    }, false); 

Netzcode:

canvas.setBackgroundColor({source: src, repeat: 'repeat'}, canvas.renderAll.bind(canvas), function() { 
     canvas.renderAll(); 
     proceed(); 
    }); 

eDIT

#canvas-background { display: inline-block; position: absolute; top: 0; right: 0; } 

aber i dont CSS verwenden.

Hintergrundbild

Danke

Sorry, kann ich nicht gut Englisch sprechen.

Answer 1

Relevanter Code ist unten (und der Rest ist in der JSFiddle), beachten Sie die Canvas-Größe und CSS-Container-Trick verwendet, um das Herauszoomen zu ermöglichen.

Beispiel: Objektgröße: 100x100 nicht zoomen.

nach Zoom Objektgröße: 100x100

nach Zoom und das Gitter ist nicht mehr das gleiche.

fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) { 
    var patternSourceCanvas = new fabric.StaticCanvas(); 
    patternSourceCanvas.add(img); 
    var pattern = new fabric.Pattern({ 
    source: function() { 
     patternSourceCanvas.setDimensions({ 
     width: img.getWidth(), 
     height: img.getHeight() 
     }); 
     return patternSourceCanvas.getElement(); 
    }, 
    repeat: 'repeat' 
    }); 
    var background = new fabric.Rect({ 
    width: canvas.getWidth(), 
    height: canvas.getHeight(), 
    fill: pattern, 
    selectable: false 
    }); 
    canvas.add(background, rectangle); 
    canvas.renderAll(); 
}); 

Hier ist ein Arbeits JSFiddle, https://jsfiddle.net/rekrah/86t2b8bs/.

Hoffe, das hilft.

UPDATE:

@forguta wollte auch Objekte, um sicherzustellen, nicht hinter dem Hintergrund lief, wenn sendToBack() ausgeführt wurde. Es wurde ein "wiederholtes" Hintergrundbild in ein Bild umgewandelt, so dass setBackgroundImage() verwendet werden konnte (die Bildgröße wurde nur auf 64K erhöht und ich bin mir sicher, dass sie weiter komprimiert werden könnte).

Einfachere Code:

canvas.setBackgroundImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACcQAAAnECAIAAAChEWJqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMDDwYflNda9wAAIABJREFUeNrs2TGO67qWhlHSotSFm7z5z+4NoQsoXJbFs8HObYoGbJxmslYk4JfgD053/u9///............', canvas.renderAll.bind(canvas), { 
    // Needed to position backgroundImage at 0/0 
    originX: 'left', 
    originY: 'top' 
}); 

Hier ist eine aktualisierte Arbeits JSFiddle, https://jsfiddle.net/rekrah/u0srdsdr/.