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

Canvas in different shapes with fabricjs plugin

本文关键字：fabricjs 插件 使用      更新时间：2023-09-26

我正在尝试将画布形状设置为圆形和单击按钮的任何其他形状。 但是普通剪辑不适用于 fabricjs . 你能分享简单的画布形状示例供我参考吗？

我正在使用FabricJS，我尝试了下面的代码等等，但没有任何效果。

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

试试这个希望会对你有所帮助。

<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);
       }
       });

尝试使用此脚本使用 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;   }

这是我的小提琴演示，希望对您有所帮助。

相关文章：