不同形狀的帆布與fabricjs插件

Question

我想設置帆布形狀爲圓形和任何其他點擊按鈕。但正常剪輯不能與fabricjs一起使用。你可以請分享簡單的畫布形狀的例子供我參考？

我正在使用fabricjs，我嘗試了下面的代碼和更多，但沒有任何工作。

canvas.clipTo = function(ctx) { 
    // clip to a circle circle 
    ctx.rect(10,20,300,200); 
    ctx.stroke(); 
    }; 

Answer 1

試試這個希望對你有幫助。

<select name="Decal Shape" id="decalshap" class="hasClass" style="height:30px;"> 
<option > Select Shape </option> 
<option value="oval"> OVAL </option> 
<option value="circle"> CIRCLE </option> 
<option value="rectangle">RECTANGLE</option> 
<option value="hrectangle"> HORIZONTAL RECTANGLE </option> 
<option value="vrectangle"> VERTICAL RECTANGLE </option> 
</select> 
<div id="work_area"> 
</div> 

    $("#decalshap").change(function() { 
     alert("decal"); 
     var shap = $(this).val(); 
    if(shap=="oval") 
     { 
     var elementID = 'canvas' + $('canvas').length; 
     $('<canvas>').attr({ 
     id: elementID 
    }).css({ 
     width:1200, 
     height:600 
    }).appendTo('#work_area'); 
    var canvas = document.getElementById(elementID); 
    var ctx = canvas.getContext('2d'); 
    // ctx.fillStyle='rgba(70, 70, 255, 0.7)' 
    // ctx.fillRect(20,20,150,100); 
    var centerX = 0; 
     var centerY = 0; 
     var radius = 50; 
     ctx.save(); 
     ctx.translate(canvas.width/2, canvas.height/2); 
     ctx.scale(2, 1); 
     ctx.beginPath(); 
     ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
     ctx.restore(); 
     ctx.fillStyle = '#8ED6FF'; 
     ctx.fill(); 
     ctx.lineWidth = 5; 
     ctx.strokeStyle = 'black'; 
     ctx.stroke(); 
     ctx.beginPath(); 
     ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    } 
    if(shap=="circle") 
     { 
      var elementID = 'canvas' + $('canvas').length; 
     $('<canvas>').attr({ 
     id: elementID 
    }).css({ 
     width:1200, 
     height:600 
    }).appendTo('#work_area'); 
    var canvas = document.getElementById(elementID); 
    var ctx = canvas.getContext('2d'); 
    ctx.beginPath(); 
    ctx.arc(100,75,50,0,2*Math.PI); 
    ctx.stroke(); 
     } 
     if(shap=="hrectangle") 
     { 
     var elementID = 'canvas' + $('canvas').length; 
     $('<canvas>').attr({ 
     id: elementID 
    }).css({ 
     width:1200, 
     height:300 
    }).appendTo('#work_area'); 
    var canvas = document.getElementById(elementID); 
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle='border: 1px dotted'; 
    ctx.fillRect(0,0,200,400); 
     } 
     if(shap=="vrectangle") 
     { 
      var elementID = 'canvas' + $('canvas').length; 
     $('<canvas>').attr({ 
     id: elementID 
    }).css({ 
     width:300, 
     height:600 
    }).appendTo('#work_area'); 
    var canvas = document.getElementById(elementID); 
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle='border: 1px dotted'; 
    ctx.fillRect(0,0,400,200); 
     } 
     }); 

Answer 2

試試這個腳本，你的Canvas轉換成圓形狀與fabricjs.You可以夾畫布使用clipTo功能的形狀正如我在圓形夾我的畫布

// HTML

<canvas id="c" width="400" height="300"></canvas> 

//腳本

var canvas = new fabric.Canvas('c'); 
canvas.backgroundColor = 'red'; 
var w=canvas.width/2; 
var h=canvas.height/2; 
canvas.clipTo = function(ctx) { 

//ctx.scale(2, 1); 
ctx.arc(w, h, 150, 0, Math.PI * 2,true); 

}; 
canvas.renderAll(); 
var text; 
text = new fabric.Text('Honey', { 
    fontSize: 50, 
    left: 100, 
    top: 100, 
    lineHeight: 1, 
    originX: 'left', 
    fontFamily: 'Helvetica', 
    fontWeight: 'bold' 
}); 
canvas.add(text); 

// CSS

canvas { border:1px solid #000;  } 
.controles { margin:50px 0; } 

這是我的fiddle demo希望它能幫助你。