FabricJS clipTo, masque sauf sur un objet

Question

J'utilise "fabricjs" et j'ai du mal à comprendre l'utilisation de clipTo. En effet je voudrais faire un masque sur toute ma toile mais pas sur un objet/fond. Le masque a une forme SVG. Je suis en version 1.7.3.

Merci

Answer 1

Je crains que vous ne pouvez pas utiliser facilement clipTo avec SVG. Vous devez modifier le chemin du SVG et modifier les coordonnées de ce chemin vers votre zone de découpage. Dans ma réponse Creating complex clipping path for image? pour l'écrêtage, vous devez modifier les coordonnées de la forme d'écrêtage.

var scaleXTo1 = (1/pug.scaleX); 
     var scaleYTo1 = (1/pug.scaleY); 
     ctx.save(); 

     var ctxLeft = -(pug.width/2); 
     var ctxTop = -(pug.height/2); 

     ctx.translate(ctxLeft, ctxTop); 
     ctx.scale(scaleXTo1, scaleYTo1); 
     ctx.beginPath(); 
     console.log(points) 
     ctx.moveTo(points[0][0] - pug.oCoords.tl.x, points[0][1] - pug.oCoords.tl.y); 
     for (var i=1; i < points.length; i++){ 
     ctx.lineTo(points[i][0] - pug.oCoords.tl.x, points[i][1] - pug.oCoords.tl.y); 
     } 
     ctx.closePath(); 
     ctx.restore(); 
     }; 

Par exemple, vous souhaitez effectuer un découpage de 100 100 à 200 200 positions. Cette boîte sera vos limites pour l'écrêtage. Vous devez mettre à jour votre chemin SVG avec un nouveau système de coordonnées qui commence à 100 100 et met à l'échelle vos coordonnées.

Je recommanderais de superposer deux toiles une pour le fond, et une autre pour votre manipulation. Exemple vous pouvez trouver ici: https://stackoverflow.com/a/44494261/7132835