CODEWITHSUNDEEP
fabricjs
Byrd
Byrd

Reputation: 37

fabricjs change group color on mouse:down

As part of a larger program I need to have a button that is initially green change to red on a mouse:down event, and then automatically change back to green after a certain interval of time. I wrote the following test code to see if I can get this to work. Referring to the canvas.on function, if the last two lines (btnBox.set & btnTxt.set) are commented out the button does change to red, but if those lines are left in, the button color does not change. In either case the timer seems to work, but it makes no difference if the timer code is commented out. I would appreciate any help to get this to work with the timer.

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

    // button group
    var btnBox = new fabric.Rect({
        width: 95, height: 50, left: 250, top: 300, fill: '#00ff80', strokeWidth: 1, stroke: 'black', selectable: false, rx: 20, ry: 20
    });

    btnTxt = new fabric.Text('START', {
        fontSize: 15, fontWeight: 'bold', fill: 'black', left: 270, top: 320,  textAlign: 'center', selectable: false
    });

    var btnGrp = new fabric.Group( [btnBox, btnTxt]);
    btnGrp.set('selectable', false);
    btnGrp.set('name', 'btnGrp');

    canvas.add(btnGrp);


    // mouse down

    canvas.on('mouse:down', function(options) {

        btnName = options.target.name;

        if (btnName === 'btnGrp'){
            btnBox.set('fill', 'red');
            btnTxt.set('fill', 'red');

            // timer
            var time = 0, elapsed = 0.0;

           window.setInterval(function() {
                time += 100;
                elapsed = Math.floor(time/100) / 10;
                if(Math.round(elapsed) === elapsed) { elapsed += '.0'; }

                console.log('ELAPSED');
            }, 10000);


            btnBox.set('fill', '#00ff80');  // doesn't work
            btnTxt.set('fill', 'black');    // doesn't work
        } 
    });

Upvotes: 0

Views: 2105

Answers (1)

Durga
Durga

Reputation: 15604

Get the item from group using group.item(index) then set property to that object.

DEMO

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

// button group
var btnBox = new fabric.Rect({
  width: 95,
  height: 50,
  left: 50,
  top: 50,
  fill: '#00ff80',
  strokeWidth: 1,
  stroke: 'black',
  selectable: false,
  rx: 20,
  ry: 20,
  originX: 'center',
  originY: 'center'
});

btnTxt = new fabric.Text('START', {
  fontSize: 15,
  fontWeight: 'bold',
  fill: 'black',
  left: 50,
  top: 50,
  textAlign: 'center',
  selectable: false,
  originX: 'center',
  originY: 'center'
});

var btnGrp = new fabric.Group([btnBox, btnTxt]);
btnGrp.set('selectable', false);
btnGrp.set('name', 'btnGrp');

canvas.add(btnGrp);


// mouse down

canvas.on('mouse:down', function(options) {

  btnName = options.target && options.target.name;

  if (btnName === 'btnGrp') {
    options.target.item(0).set({
      'fill': 'red'
    }); // doesn't work
    options.target.item(1).set({
      'stroke': 'white',
      'fill': 'white',
    });
    setTimeout(function() {
      options.target.item(0).set({
        'fill': '#00ff80'
      }); // doesn't work
      options.target.item(1).set({
        'stroke': 'black',
        'fill': 'black',
      });
      canvas.renderAll()
      console.log('elapsed')
    }, 2000);
    //btnTxt.set('fill', 'black'); // doesn't work
  }
});
canvas{
  border:2px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id='cnvs' width=300 height=300></canvas>

Upvotes: 1

Related Questions