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的圆形形状。您可以使用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希望它会对你有帮助。

使用fabricjs插件绘制不同形状的画布

2 个答案: