show and hide selection border of object on mouse:over and mouse:out event

[meetgoyani007]

Hello,

I use fabric version 1.7.3 and I want to show and hide the selection border around the element when the user hovers/out.

Here is my sample code:

constructor(){
this.canvas.on({
            'mouse:over': async (e) => {
                if(e.target)
                    this.setHoverDefStyle(e.target)
            },
            'mouse:out': (e) => {
                if(e.target)
                    this.removeHoverDefStyle(e.target)
            }
        });
}
setHoverDefStyle(target_obj) {
        target_obj.borderColor = "#00c3f9";
        target_obj.borderDashArray = [];
        target_obj.borderScaleFactor = 1.5;
        this.canvas.renderAll();
    }

    removeHoverDefStyle(target_obj) {
        target_obj.borderColor = "";
        target_obj.borderDashArray = [];
        target_obj.borderScaleFactor = 0;
        this.canvas.renderAll();
    }

So please let me know where I am wrong?

[ShaMan123]

First upgrade to latest version.
Then I suggest you post a working, live example if you want others to help.

[ivent]

@meetgoyani007 I found a solution to create the selection effect on objects via mouse:over and mouse:out follows the code that works and the source https://stackoverflow.com/questions/56172212/how-to-show-object-bounding-box-when-mouse-hover-objects-in-fabricjs

// mouse:over draw bound box
this._canvas.on('mouse:over', (evet) => {
  const { target } = evet;
  if (this._canvas.getActiveObjects().length) {
    // skip group hover
    return;
  }

  // skip group hover
  if (target instanceof fabric.Object && !(target instanceof Array)) {
    const bound = target.getBoundingRect();
    const ctx = this._canvas.getContext();
    ctx.strokeStyle = 'red';
    ctx.strokeRect(
      bound.left,
      bound.top,
      bound.width,
      bound.height
    );
  }
});
// mouse:out remove bound box
this._canvas.on('mouse:out', (evet) => {
  const { target } = evet;
  if (this._canvas.getActiveObjects().length) {
    return;
  }

  // skipp group hover
  if (target instanceof fabric.Object && !(target instanceof Array)) {
     this._canvas.renderAll(); // render all, will clear bounds box drawed by mouse:over
  }
});

[HungerDeng]

It worked for me. really appreciate.