Fabric JS test 001

by Colmea

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
    <button class="btn btn-primary" id="btn-add-module">Ajouter un module</button><br />
    <img id="bg-wood" src="http://m398xv.free.fr/html/gif/fond/texture-bois-63.jpg" /><br />
    <canvas id="bounded" width="800" height="600" />

    
</body>

JavaScript

var grid = 25;
var edgedetection = 10;

var Module = fabric.util.createClass(fabric.Rect, {
    
      type: 'module',
    
      initialize: function(options) {
        options || (options = { });
    
        this.callSuper('initialize', options);
          
        this.set('width', options.label || 100);
        this.set('height', options.label || 50);
        this.set('maxWidth', options.label || 250);
        this.set('maxHeight', options.label || 100);

        this.set('defaultColor', options.fill || '#D2F252');
        this.set('stroke', options.stroke || 'grey');
          
        // Set background image
        
          var bg = new fabric.Pattern({
            source: document.getElementById('bg-wood'),
            repeat: true,
          });
          
          this.set('fill', bg);

         
      },
    
        hasError: function() {
            this.set('fill', '#CB102F');
            this.set('stroke', 'grey');
        },
        
    
      toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
          label: this.get('label')
        });
      },
    
      _render: function(ctx) {
        this.callSuper('_render', ctx);
   
      }
});


    var canvas = new fabric.Canvas("bounded");

    var boundingBox = new fabric.Rect({
      fill: "white",
      width: 600,
      height: 400,
      hasBorders: false,
      hasControls: false,
      lockMovementX: true,
      lockMovementY: true,
      evented: false,
      stroke: "black",
    });

    var movingBox = new fabric.Rect({
      width: 300,
      height: 150,
        left: 150,
        top: 125,
      hasBorders: true,
      hasControls: true,
        fill: "#D2F252",
        defaultColor: "#D2F252",
        stroke: "grey",
    });

    movingBox.hasError = function() {
        this.set('fill', '#CB102F');
        this.set('stroke', 'grey');
    };

    movingBox.set({maxWidth:500,maxHeight:120});

canvas.observe("object:scaling", function(e){
  ...