mazong1123/fabric.ext

An extension of fabricjs. Intends to implement objects and events missed in fabricjs.

fabric.ext

An extension of fabricjs. Intends to implement objects and events missed in fabricjs.

How to use

Reference the fabric.canvasex.js in your html:

<script src="scripts/fabric.canvasex.js"></script>

Create a canvasex object and use it:

Events

<script>
  var canvas = new fabric.CanvasEx('c');
  canvas.on('mouse:dblclick', function (options) {
    console.log('mouse:dblclick');
  });
  
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 300,
    height: 300
  });
  
  rect.on('object:dblclick', function (options) {
    console.log('object:dblclick');
  });
  
  canvas.add(rect);
</script>

Supported Events and Objects:

Events

canvas:

// Double click
canvas.on('mouse:dblclick', function (options) {
});

// Mouse right button down
canvas.on('mouse:down', function (options) {
  if (options.e.which === 3) {
    console.log('Canvas right mouse down.');
  }
});

object:

// Double click
rect.on('object:dblclick', function (options) {
});

// Mouse right button down
rect.on('mousedown', function (options) {
  if (options.e.which === 3) {
    console.log('Object right mouse down.');
  }
});

Event for objects inside a group

By default, any object inside a group will not recieve any event individually. Add below line of code if you want group objects recieve events individually.

canvas.fireEventForObjectInsideGroup = true;

fabric.ext's Issues

Canvas aspect ratio

On canvas resize, make all objects resized to new aspect ration.

Double click not working on mozzila

How to make double click working on mozzila ?

Add video/audio object.

Plan to add video/audio object. Please let me know if you have any thought of this feature.

Object in Group

It's possible to make an object event on click whch object is inside group?

fabric.ext Problems with toJSON and loadFromJSON

Her is a code snippet:

$("#activities_1").click(function(){
    task_nr++;
    global_ctx_nr++;
    task[task_nr] = new fabric.Rect({
        width: 120,
        height: 60,
        angle: 0,
        rx: 10, 
        ry: 10,
        fill: 'rgba(0,0,0,0.0)',
        strokeWidth: 2, 
        stroke: 'rgb(0,0,0)',
       originX: 'center',
       originY: 'center'
      });

        task_text[task_nr] = new fabric.IText('Task ' + task_nr, {
          fontSize: 10,
          fontFamily: 'Arial',
          originX: 'center',
          originY: 'center'
        });

        task_group[task_nr] = new fabric.Group([ task[task_nr], task_text[task_nr] ], {
            transparentCorners: false,
            hasRotatingPoint: false,
          lockScalingX: true,
          lockScalingY: true,
          left: 10,
          top: 10,
          hasBorders: false,
          cornerColor: 'rgb(166,32,72)',
          imsID: 'global_ctx_nr_' + global_ctx_nr,
          imsOBJ_ID: '0'
        });
        task_group[task_nr].setControlsVisibility({tl: false, tr: false,bl: false, br: false,});
        task_group[task_nr].on('object:dblclick', function (e) {
                var o = canvas.getActiveObject();
            var imsID = o.get('imsID');
            var posX = 0;
            var posY = 0;
            posX = e.e.clientX - 50;
            posY = e.e.clientY - 50;
            var imsOBJ_ID = '0';
            imsOBJ_ID = o.get('imsOBJ_ID');
            if(imsOBJ_ID === '0' || imsOBJ_ID === 'undefined')
            {
                $('#contextMenueNichtVerlinkt').css('top', posY);
                $('#contextMenueNichtVerlinkt').css('left', posX);
                $('#contextMenueNichtVerlinkt').css('display', 'block');
            }
            else
            {
                $('#contextMenueVerlinkt').css('top', posY);
                $('#contextMenueVerlinkt').css('left', posX);
                $('#contextMenueVerlinkt').css('display', 'block');
                o.set("fill",'rgba(166,32,72,0.1)');
                canvas.renderAll();
            }
            });         
        canvas.add(task_group[task_nr]).setActiveObject(task_group[task_nr]);
});

But when i save the elements on Canvas with canvas.toJSON() and reload with canvas.loadFromJSON() the DbClick-Function do not work.
canvas.toJason:
_var imsCanvasInhalt = JSON.stringify(canvas.toJSON(['imsID', 'imsOBJ_ID', 'controlsVisibility', 'hasRotatingPoint', 'hasBorders', 'cornerColor', 'borderColor', 'transparentCorners', 'lockScalingX', 'lockScalingY']));

canvas.loadFromJason:
canvas.loadFromJSON(<%= diaDiagramm %>, canvas.renderAll.bind(canvas));
Is this a problem of your library or the canvas.toJSON-funktion/canvas.loadFromJSON-funktion?

Another problem is the:
canvas.fireEventForObjectInsideGroup = true;
this do not work.
I can not edit, move, rotate the task_text[task_nr] in the task_group[task_nr].