jQuery addClass example

Change class name on click in jQuery

by rahulr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<div id="banner-message">
  <canvas id="c" width="400" height="200"></canvas>
</div>
<div style="display: inline-block; margin-left: 10px">
  <button id="group" class="btn btn-info">Group selected objecs</button><br>
  <button id="ungroup" class="btn btn-info">Ungroup selected objects</button><br>
  <button id="multiselect" class="btn btn-info">Make a multiselection</button><br>
  <button id="addmore" class="btn btn-info">Add more shapes</button><br>
  <button id="discard" class="btn btn-info">Discard selection</button><br>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 2px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 2px auto;
  width: 400px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

(function() {

  function add() {
    var red = new fabric.Rect({
      top: 100, left: 0, width: 80, height: 50, fill: 'red' });
    var blue = new fabric.Rect({
      top: 0, left: 100, width: 50, height: 70, fill: 'blue' });
    var green = new fabric.Rect({
      top: 100, left: 100, width: 60, height: 60, fill: 'green' });
    canvas.add(red, blue, green);
  }

  var $ = function(id){return document.getElementById(id)};

  var canvas = this.__canvas = new fabric.Canvas('c');
  var red = new fabric.Rect({
    top: 100, left: 0, width: 80, height: 50, fill: 'red' });
  var blue = new fabric.Rect({
    top: 0, left: 100, width: 50, height: 70, fill: 'blue' });
  var green = new fabric.Rect({
    top: 100, left: 100, width: 60, height: 60, fill: 'green' });
  fabric.Object.prototype.transparentCorners = false;
  canvas.add(red, blue, green)
  var group = $('group'),
      ungroup = $('ungroup'),
      multiselect = $('multiselect'),
      addmore = $('addmore'),
      discard = $('discard');

      addmore.onclick = add;

      multiselect.onclick = function() {
        canvas.discardActiveObject();
        canvas.getObjects().forEach(x=> x.getBoundingRect(true, true));
        var objectsToSelect = canvas.getObjects().filter(x=> (x.fill === "red" || x.fill === "green"));
        var sel = new fabric.ActiveSelection(objectsToSelect, {
          canvas: canvas,
        });
        console.log('sel 1st obj', sel._objects[0].left, sel._objects[0].top, sel._objects[0].aCoords);
        canvas.setActiveObject(sel);
        canvas.requestRenderAll();
      }

      group.onclick = function() {
        if (!canvas.getActiveObject()) {
          return;
        }
        if (canvas.getActiveObject().type !== 'activeSelection') {
          return;
        }
        canvas.getActiveObject().toGroup();
        canvas.requestRenderAll();
      }

      ungroup.onclick = function() {
        if (!canvas.getActiveObject()) {
          return;
        }
        if...