Fabricjs. Wie füge ich ein Bild mit abgerundeten Rahmen ein?

Question

Sie müssen ein Bild in den Stoff js einfügen und abgerundete Ränder erstellen. (NICHT auf ganze Leinwand) lesen Antwort hier:

Fabric.js Clip Canvas (or object group) To Polygon

Aber ich wie dieser Kerl nicht reproduzieren kann gemacht Clipping.

var clip = canvas.item(0); 
var obj = canvas.item(1); 
canvas.remove(clip); 
obj.clipTo = function(ctx) { 
    clip.render(ctx); 
}; 

Versuchte, svg rectange und Clip Bild zu machen: http://jsfiddle.net/ZxYCP/657/

Ich bin immer ein unerwartetes Verhalten ...

Answer 1

Hier ist ein Beispiel, wie es getan werden kann:

var canvas = new fabric.Canvas('c'); 

function roundedCorners(ctx) { 
    var rect = new fabric.Rect({ 
    left:0, 
    top:0, 
    rx:20/this.scaleX, 
    ry:20/this.scaleY, 
    width:this.width, 
    height:this.height, 
    fill:'#000000' 
    }); 
    rect._render(ctx, false); 
} 

fabric.Image.fromURL('http://fabricjs.com/lib/pug.jpg', function(img) { 
    img.set({ 
    angle: 45, 
    width: 500, 
    height: 500, 
    left: 140, 
    top: 100, 
    scaleX: 0.3, 
    scaleY: 0.3, 
    clipTo: roundedCorners.bind(img) 
    }); 
    canvas.add(img).setActiveObject(img); 
}); 

Siehe Geige hier: http://jsfiddle.net/ZxYCP/659/