FabricJS impedisce canvas.clipTo dal clipping canvas.backgroundImage

Question

Desidero impostare un valore globale clipTo nella mia Tela alimentata a tela che interesserà tutti i livelli aggiunti dall'utente. Voglio un'immagine di sfondo e un'immagine di sovrapposizione, che non sono influenzate da questa maschera di ritaglio.

Esempio:

Ecco quello che sta succedendo in questa foto: sovrapposizione di immagini

1. Una tela rende il look maglietta spiegazzata, naturalmente. Questa sovrapposizione di immagini è in gran parte trasparente
2. Un'immagine di sfondo nella forma esatta della t-shirt è stato aggiunto, che dovrebbe rendere il look t-shirt blu
3. Una funzione canvas.clipTo è stato aggiunto, che clip la tela per un forma rettangolare
4. a user-added image (la famosa pug Fabric) è stato aggiunto

voglio che l'immagine aggiunti dall'utente (il pug) per essere limitata alla zona rettangolare.

I do non desidera l'immagine di sfondo (la forma della maglietta blu) interessata dall'area di ritaglio.

C'è un modo semplice per realizzare questo? Non voglio davvero aggiungere un clipTo a ogni singolo livello utente anziché uno ordinato globale clipTo.

È possibile giocare con un violino JS che mostra il problema here.

Answer 1

Una soluzione (sorta hacky): impostare un'immagine di sfondo CSS sul vostro elemento canvas, come mostrato nella https://jsfiddle.net/qpnvo3cL/

<canvas id="c" width="500" height="500"></canvas> 
<style> 
    background: url('http://fabricjs.com/assets/jail_cell_bars.png') no-repeat; 
</style> 
<script> 
    var canvas = window._canvas = new fabric.Canvas('c'); 
    canvas.clipTo = function(ctx) { 
     ctx.rect(100,100,100,100); 
    } 
</script> 

Answer 2

trovo la clip piuttosto lento così io tendo a usare globalCompositeOperation fare mascheramento.

Se è davvero necessario utilizzare la clip, utilizzarla in combinazione con salvataggio e ripristino.

// ctx is canvas context 2d 
// pug is the image to be clipped 

// draw your background 
ctx.save(); // save state 
ctx.rect(100,100,100,100); // set the clip area 
ctx.clip(); // apply the clip 
ctx.drawImage(pug,x,y); // draw the clipped image 
ctx.restore(); // remove the clipping 
// draw the other layers. 

oppure

// draw background 
ctx.globalCompositeOperation = "xor"; // set up the mask 
ctx.fillRect(100,100,100,100); // draw the mask, could be an image. 
           // Alpha will effect the amount of masking, 
           // not available with clip 
ctx.globalCompositeOperation = "destination-over"; 
ctx.drawImage(pug,x,y); // draw the image that is masked       
ctx.globalCompositeOperation = "source-over"; 
// draw the stuff that needs to be over everything. 

Il vantaggio di operazioni composite è puoi controllare il ritaglio ad un livello per pixel, compresa la quantità di clipping tramite il valore del pixel alpha

Answer 3

I è venuto qui con lo stesso bisogno e alla fine ho trovato una soluzione per ciò su cui sto lavorando. Forse aiuta:

Per i percorsi SVG, all'interno della funzione clipTo è possibile modificare direttamente il ctx prima di chiamare render(ctx) e queste modifiche si applicano all'esterno del percorso troncato o. Così:

var clipPath = new fabric.Path("M 10 10 L 100 10 L 100 100 L 10 100", { 
    fill: 'rgba(0,0,0,0)', 
}); 

var backgroundColor = "rgba(0,0,0, 0.2)"; 

var opts = { 
    controlsAboveOverlay: true, 
    backgroundColor: 'rgb(255,255,255)', 
    clipTo: function (ctx) { 
    if (typeof backgroundColor !== 'undefined') { 
     ctx.fillStyle = backgroundColor; 
     ctx.fillRect(0, 0, 300, 150); 
    } 
    clipPath.render(ctx); 
    } 
} 
var canvas = new fabric.Canvas('c', opts); 

canvas.add(new fabric.Rect({ 
    width: 50, 
    height: 50, 
    left: 30, 
    top: 30, 
    fill: 'rgb(255,0,0)' 
})); 

Naturalmente è possibile aggiungere un'immagine anziché un colore o qualsiasi altra cosa si desideri. Il trucco che ho trovato è di inserirlo direttamente nella funzione clipTo su ctx.

here's a fiddle

Answer 4

Hai provato deviando un tessuto Group? Potresti rendere l'intera maglietta una tela. La grafica centrale sarebbe un gruppo che si aggancia al punto in cui lo si desidera. La t-shirt bianca e la sovrapposizione blu sarebbero ovviamente non far parte del gruppo ritagliato.

Ecco un esempio di clipping un gruppo:

var rect = new fabric.Rect({width:100, height: 100, fill: 'red' }); 
var circle = new fabric.Circle({ radius: 100, fill: 'green' }); 
var group1 = new fabric.Group([ circle, rect ], { left: 100, top: 100 }); 
canvas.add(group1); 

group1.clipTo = function(ctx) { 
    ctx.rect(50,50,200,200); 
}; 

Vai a questa jsfiddle ho fatto: https://jsfiddle.net/uvepfag5/4/