带有fabricjs插件的不同形状的画布 [英] Canvas in different shapes with fabricjs plugin

问题描述

我正在尝试将按钮单击来将画布形状设置为圆形和其他形状.但是普通剪辑不适用于fabricjs.能否请您分享简单的画布形状示例供我参考?

I am trying to set canvas shape to circle and any other on click of button . but normal clip is not working with fabricjs . can you please share simple canvas shape example for my reference ?

我正在使用fabricjs，我尝试使用下面的代码，但尝试了更多，但无济于事.

i am using fabricjs , i tried below code and many more but nothing worked .

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

推荐答案

尝试使用该脚本将Fabric转换为带有fabricjs的圆形形状.将我的画布剪成圆形

try this script to convert your Canvas in circle shapes with fabricjs.You can clip your canvas to any shape using clipTo function as i clip my canvas in circle shape

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

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

Here is my fiddle demo hope it will help you.

这篇关于带有fabricjs插件的不同形状的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！