在fabricjs画布上实现ClipTo函数

Question

如果我在画布初始加载时对SVG进行硬编码，我可以将画布剪贴为形状。现在我正在尝试使用点击功能来做到这一点。挑战在于，因为所有东西都已经加载，当我点击它并加载裁剪功能时，它会清除我的画布并只留下形状和背景。我正在寻找如何实施这个想法。我只知道如何在newfabric.canvas函数中加载opts。我怀疑我将不得不获取当前的画布数据，然后应用opts参数，但我不确定最好的方式来做到这一点。这里是我的代码：

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

$('#shape').on('click', function(){ 

var clipPath = new fabric.Path("M161.469,0.007 C161.469,0.007 214.694,96.481 214.694,96.481 C214.694,96.481 322.948,117.266 322.948,117.266 C322.948,117.266 247.591,197.675 247.591,197.675 C247.591,197.675 261.269,306.993 261.269,306.993 C261.269,306.993 161.469,260.209 161.469,260.209 C161.469,260.209 61.667,306.993 61.667,306.993 C61.667,306.993 75.346,197.675 75.346,197.675 C75.346,197.675 -0.010,117.266 -0.010,117.266 C-0.010,117.266 108.242,96.481 108.242,96.481 C108.242,96.481 161.469,0.007 161.469,0.007",),  

opts = { 
    controlsAboveOverlay: true, 
    backgroundColor: 'rgb(255,255,255)', 
    clipTo: function (ctx) { 
    if (typeof backgroundColor !== 'undefined') { 
     ctx.fillStyle = backgroundColor; 
     ctx.fillRect(0, 0, 900, 900); 
    } 
    clipPath.render(ctx); 
    } 
} 
    //obviously this is not going to work 
    var reloadShape = JSON.stringify(canvas); 
    canvas.loadFromJSON(reloadShape); 
    new fabric.Canvas('imageCanvas', opts); 

}); 

Answer 1

你应该在你的应用程序中初始化画布一次，否则你会丢失它的内容。

稍后当您选择您的剪切路径时创建并分配您的clipTo函数。 如果不需要任何其他处理，你也可以做到这

canvas.clipTo = clipPath._render; 

，而无需创建新的功能。

//do this once on your application: 
var opts = { 
    controlsAboveOverlay: true, 
    backgroundColor: 'rgb(255,255,255)', 
}, 
canvas = new fabric.Canvas('imageCanvas', opts); 

$('#shape').on('click', function(){ 

var clipPath = new fabric.Path("M161.469,0.007 C161.469,0.007 214.694,96.481 214.694,96.481 C214.694,96.481 322.948,117.266 322.948,117.266 C322.948,117.266 247.591,197.675 247.591,197.675 C247.591,197.675 261.269,306.993 261.269,306.993 C261.269,306.993 161.469,260.209 161.469,260.209 C161.469,260.209 61.667,306.993 61.667,306.993 C61.667,306.993 75.346,197.675 75.346,197.675 C75.346,197.675 -0.010,117.266 -0.010,117.266 C-0.010,117.266 108.242,96.481 108.242,96.481 C108.242,96.481 161.469,0.007 161.469,0.007",); 

    canvas.clipTo = function (ctx) { 
    if (typeof backgroundColor !== 'undefined') { 
     ctx.fillStyle = backgroundColor; 
     ctx.fillRect(0, 0, 900, 900); 

    //for clipping _render would be enough. 
    // but .render() will allow you to position the path where you want with top and left 
    clipPath.render(ctx); 
    } 
    // display new canvas clipped. 
    canvas.renderAll(); 

});