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

내가 원 모양으로 내 캔버스를 클립으로 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이 도움이되기를 바랍니다.