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

＆＃13;

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(o.e);
    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(o.e);
    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);

＆＃13;

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

＆＃13;

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

Answer 3

这里是一个绘制矩形的示例，我精心制作了该矩形并适用于最新版本。 Krunan示例似乎可以正常工作-以防万一这是一个免费的矩形绘图实现，它不使用e.clientX，offsetLeft等DOM API来跟踪坐标，但仅使用Fabric.js API才更安全。还要注销事件侦听器-由于我需要为我的项目提供免费的绘图支持，因此我仍在尝试对其进行完善-由于对此没有官方支持，因此我想在此参考其他示例。

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

Answer 4

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

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

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

4 个答案: