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

Question

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script> Please draw circle here <div id="canvasContainer"> <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas> </div> 

这是jsfiddle的详细博客 - https://blog.thirdrocktechkno.com/sketching-circle-of-a-html5-canvas-using-the-fabricjs-f7dbfa20cf2d

Answer 3

这是一个绘制矩形的例子，我精心制作并适用于最新版本。 Krunan示例似乎工作正常 - 以防万一这是一个矩形自由绘图实现，不使用DOM apis，如e.clientX，offsetLeft等跟踪coords，但仅我认为fabric.js API更安全。 同时取消注册事件监听器 - 我仍然试图改进它，因为我需要为我的项目提供免费的绘图支持 - 由于没有官方支持，我想在这里为其他人引用这个例子。

https://cancerberosgx.github.io/demos/misc/fabricRectangleFreeDrawing.html

Answer 4

将Circle添加到画布的简单方法：

canvas.add(new fabric.Circle({ radius: 30, fill: "green", top: 100, left: 100 }));