Fabric.js - Dessiner gratuitement un rectangle

Question

J'ai ce qui suit qui ne fonctionne pas correctement :

var canvas = new fabric.Canvas('canvas');

canvas.observe('mouse:down', function(e) { mousedown(e); });
canvas.observe('mouse:move', function(e) { mousemove(e); });
canvas.observe('mouse:up', function(e) { mouseup(e); });

var started = false;

var x = 0;
var y = 0;

/* Mousedown */
function mousedown(e) {

    var mouse = canvas.getPointer(e.memo.e);

    started = true;

    x = mouse.x;
    y = mouse.y;    

    var square = new fabric.Rect({ 

        width: 1, 
        height: 1, 
        left: mouse.x, 
        top: mouse.y, 
        fill: '#000'

    });

    canvas.add(square); 
    canvas.renderAll();
    canvas.setActiveObject(square); 

}

/* Mousemove */
function mousemove(e) {

    if(!started) {

        return false;

    }

    var mouse = canvas.getPointer(e.memo.e);

    var x = Math.min(mouse.x,  x),
    y = Math.min(mouse.y,  y),
    w = Math.abs(mouse.x - x),
    h = Math.abs(mouse.y - y);

    if (!w || !h) {

        return false;

    }

    var square = canvas.getActiveObject(); 

    square.set('top', y).set('left', x).set('width', w).set('height', h);

    canvas.renderAll(); 

}

/* Mouseup */
function mouseup(e) {

    if(started) {

        started = false;    

    }   

 }

La logique ci-dessus provient d'un système simple de dessin de rectangle que j'ai utilisé sans fabric.js. Je sais donc que cela fonctionne, mais pas avec fabric.js.

Il semble que les mathématiques soient fausses ou que je définisse des paramètres incorrects avec les valeurs de largeur/hauteur/x/y, car lorsque vous dessinez, le rectangle ne suit pas correctement le curseur.

Toute aide est la bienvenue, merci d'avance :)

Answer 1

J'ai écrit un exemple pour vous. Veuillez suivre le lien ci-dessous :

http://jsfiddle.net/a7mad24/aPLq5/

var canvas = new fabric.Canvas('canvas', { selection: false });

var rect, isDown, origX, origY;

canvas.on('mouse:down', function(o){
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    rect = new fabric.Rect({
        left: origX,
        top: origY,
        originX: 'left',
        originY: 'top',
        width: pointer.x-origX,
        height: pointer.y-origY,
        angle: 0,
        fill: 'rgba(255,0,0,0.5)',
        transparentCorners: false
    });
    canvas.add(rect);
});

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if(origX>pointer.x){
        rect.set({ left: Math.abs(pointer.x) });
    }
    if(origY>pointer.y){
        rect.set({ top: Math.abs(pointer.y) });
    }

    rect.set({ width: Math.abs(origX - pointer.x) });
    rect.set({ height: Math.abs(origY - pointer.y) });

    canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

Answer 2

On dirait que Fabric.js calcule tout à partir de l'origine. Ainsi, "Top" et "Left" sont un peu trompeurs. Consultez le lien suivant : Les coordonnées du canevas sont décalées . J'ai également modifié un peu votre code :

var canvas = new fabric.Canvas('canvas');
canvas.observe('mouse:down', function(e) { mousedown(e); });
canvas.observe('mouse:move', function(e) { mousemove(e); });
canvas.observe('mouse:up', function(e) { mouseup(e); });

var started = false;
var x = 0;
var y = 0;

/* Mousedown */
function mousedown(e) {
    var mouse = canvas.getPointer(e.memo.e);
    started = true;
    x = mouse.x;
    y = mouse.y;

    var square = new fabric.Rect({ 
        width: 0, 
        height: 0, 
        left: x, 
        top: y, 
        fill: '#000'
    });

    canvas.add(square); 
    canvas.renderAll();
    canvas.setActiveObject(square); 

}

/* Mousemove */
function mousemove(e) {
    if(!started) {
        return false;
    }

    var mouse = canvas.getPointer(e.memo.e);

    var w = Math.abs(mouse.x - x),
    h = Math.abs(mouse.y - y);

    if (!w || !h) {
        return false;
    }

    var square = canvas.getActiveObject(); 
    square.set('width', w).set('height', h);
    canvas.renderAll(); 
}

/* Mouseup */
function mouseup(e) {
    if(started) {
        started = false;
    }

    var square = canvas.getActiveObject();

    canvas.add(square); 
    canvas.renderAll();
 }

Answer 3

La réponse ci-dessus semble être obsolète. J'ai modifié certaines choses dans le code ci-dessous pour corriger cela. Et sur la fonction mousedown j'ai ajouté le if pour détecter l'objet actif pour éviter de créer un nouveau rectangle lorsque l'utilisateur déplace un objet sélectionné.

var canvas = new fabric.Canvas('canvas');

canvas.on('mouse:down', function(options) {
      if(canvas.getActiveObject()){
        return false;
      }

      started = true;
      x = options.e.clientX;
      y = options.e.clientY;

      var square = new fabric.Rect({ 
          width: 0, 
          height: 0, 
          left: x, 
          top: y, 
          fill: '#000'
      });

      canvas.add(square); 
      canvas.setActiveObject(square); 
  });

  canvas.on('mouse:move', function(options) {
    if(!started) {
        return false;
    }

    var w = Math.abs(options.e.clientX - x),
    h = Math.abs(options.e.clientY - y);

    if (!w || !h) {
        return false;
    }

    var square = canvas.getActiveObject(); 
    square.set('width', w).set('height', h);
  });

  canvas.on('mouse:up', function(options) {
    if(started) {
      started = false;
    }

    var square = canvas.getActiveObject();

    canvas.add(square); 
  });

Answer 4

Voici le blog détaillé avec jsfiddle - https://blog.thirdrocktechkno.com/drawing-a-square-or-rectangle-over-html5-canvas-using-fabricjs-f48beeedb4d3

var Rectangle = (function () {
    function Rectangle(canvas) {
        var inst=this;
        this.canvas = canvas;
        this.className= 'Rectangle';
        this.isDrawing = false;
        this.bindEvents();
    }

     Rectangle.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();
    })
  }
    Rectangle.prototype.onMouseUp = function (o) {
      var inst = this;
      inst.disable();
    };

    Rectangle.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 = 'transparent';

      if(origX > pointer.x){
          activeObj.set({ left: Math.abs(pointer.x) }); 
      }
      if(origY > pointer.y){
          activeObj.set({ top: Math.abs(pointer.y) });
      }

      activeObj.set({ width: Math.abs(origX - pointer.x) });
      activeObj.set({ height: Math.abs(origY - pointer.y) });

      activeObj.setCoords();
      inst.canvas.renderAll();

    };

    Rectangle.prototype.onMouseDown = function (o) {
      var inst = this;
      inst.enable();

      var pointer = inst.canvas.getPointer(o.e);
      origX = pointer.x;
      origY = pointer.y;

        var rect = new fabric.Rect({
          left: origX,
          top: origY,
          originX: 'left',
          originY: 'top',
          width: pointer.x-origX,
          height: pointer.y-origY,
          angle: 0,
          transparentCorners: false,
          hasBorders: false,
          hasControls: false
      });

      inst.canvas.add(rect).setActiveObject(rect);
    };

    Rectangle.prototype.isEnable = function(){
      return this.isDrawing;
    }

    Rectangle.prototype.enable = function(){
      this.isDrawing = true;
    }

    Rectangle.prototype.disable = function(){
      this.isDrawing = false;
    }

    return Rectangle;
}());

var canvas = new fabric.Canvas('canvas');
var rect = new Rectangle(canvas);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
 Please draw rectangle here

<div id="canvasContainer">
  <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas>
</div>

Answer 5

Légère modification sur l'événement mouse up pour permettre à l'objet d'être sélectionnable et déplaçable.

Remarque : ajouter l'objet au canevas une nouvelle fois lors du passage de la souris en haut même l'ajoutera deux fois au canevas et c'est la mauvaise chose à faire.

canvas.on('mouse:up', function(o){
  isDown = false;
  var square = canvas.getActiveObject();
  square.setCoords();  //allows object to be selectable and moveable
});