如何使用Fabric.js自由绘制圆圈？

我正在使用FabricJS在canvas上绘制圆圈：

var circle = new fabric.Circle({radius: 100, fill: '', stroke: 'red', strokeWidth: 3, originX: 'center', originY: 'center' }); var text = new fabric.Text('HELLO WORLD.', { fontSize: 30, originX: 'center', originY: 'center', fill : 'red' }); var group = new fabric.Group([ circle, text ], { left: 150, top: 100 }); canvas.add(group); 

此代码绘制一个普通圆，但我需要用鼠标自由绘制圆。 任何代码帮助将不胜感激。

Answer 1

根据您之前绘制矩形的代码 http://jsfiddle.net/Subhasish2015/8u1cqasa/2/ 这是绘制圆的代码：

 $(document).ready(function(){ //Getting the canvas var canvas1 = new fabric.Canvas("canvas2"); var freeDrawing = true; var divPos = {}; var offset = $("#canvas2").offset(); $(document).mousemove(function(e){ divPos = { left: e.pageX - offset.left, top: e.pageY - offset.top }; }); $('#2').click(function(){ //Declaring the variables var isMouseDown=false; var refCircle; //Setting the mouse events canvas1.on('mouse:down',function(event){ isMouseDown=true; if(freeDrawing) { var circle=new fabric.Circle({ left:divPos.left, top:divPos.top, radius:0, stroke:'red', strokeWidth:3, fill:'' }); canvas1.add(circle); refCircle=circle; //**Reference of rectangle object } }); canvas1.on('mouse:move', function(event){ if(!isMouseDown) { return; } //Getting yhe mouse Co-ordinates if(freeDrawing) { var posX=divPos.left; var posY=divPos.top; refCircle.set('radius',Math.abs((posX-refCircle.get('left')))); canvas1.renderAll(); } }); canvas1.on('mouse:up',function(){ canvas1.add(refCircle); //alert("mouse up!"); isMouseDown=false; //freeDrawing=false; // **Disables line drawing }); }); }); 

Answer 2

 var Circle = (function() { function Circle(canvas) { this.canvas = canvas; this.className = 'Circle'; this.isDrawing = false; this.bindEvents(); } Circle.prototype.bindEvents = function() { var inst = this; inst.canvas.on('mouse:down', function(o) { inst.onMouseDown(o); }); inst.canvas.on('mouse:move', function(o) { inst.onMouseMove(o); }); inst.canvas.on('mouse:up', function(o) { inst.onMouseUp(o); }); inst.canvas.on('object:moving', function(o) { inst.disable(); }) } Circle.prototype.onMouseUp = function(o) { var inst = this; inst.disable(); }; Circle.prototype.onMouseMove = function(o) { var inst = this; if (!inst.isEnable()) { return; } var pointer = inst.canvas.getPointer(oe); var activeObj = inst.canvas.getActiveObject(); activeObj.stroke = 'red', activeObj.strokeWidth = 5; activeObj.fill = 'red'; if (origX > pointer.x) { activeObj.set({ left: Math.abs(pointer.x) }); } if (origY > pointer.y) { activeObj.set({ top: Math.abs(pointer.y) }); } activeObj.set({ rx: Math.abs(origX - pointer.x) / 2 }); activeObj.set({ ry: Math.abs(origY - pointer.y) / 2 }); activeObj.setCoords(); inst.canvas.renderAll(); }; Circle.prototype.onMouseDown = function(o) { var inst = this; inst.enable(); var pointer = inst.canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var ellipse = new fabric.Ellipse({ top: origY, left: origX, rx: 0, ry: 0, transparentCorners: false, hasBorders: false, hasControls: false }); inst.canvas.add(ellipse).setActiveObject(ellipse); }; Circle.prototype.isEnable = function() { return this.isDrawing; } Circle.prototype.enable = function() { this.isDrawing = true; } Circle.prototype.disable = function() { this.isDrawing = false; } return Circle; }()); var canvas = new fabric.Canvas('canvas'); var circle = new Circle(canvas); 

  Please draw circle here 
   

Answer 3

使用此代码

canvas.add（new fabric.Circle（{radius：30，fill：color，top：100，left：100}））;