Add Delete button on element in Canvas Fabric JS

Question

Hi I want to add delete button in element using FabricJS. I Have an example:

I try adding this part of code but when I resize image the delete button don\'t sta

Answer 1

Hello i would suggest a different approach to this functionality that it is more stable as it does not add elements on the DOM , we can use it on as many objects as we like , we dont need to hide and show the custom corner buttons, and the corner buttons are visible each time the object is active(native fabricjs functions).

1. I am going to override the object's prototype _drawControl function , for to add my custom corner images.
2. And override the canvas prototype _setCornerCursor , for to change realtime the mouse cursor ,according to which corner is over.
3. I have made a live fiddle here : https://jsfiddle.net/tornado1979/j987gb6f/

A. First of all i need to preload the custom corner images, so whenever we click on an object there would not be any delay(i used random images just for the show).

var ctrlImages = new Array()

  function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
      ctrlImages[i] = new Image();
      ctrlImages[i].src = preload.arguments[i];
    }
  }

  preload(
      "https://cdn1.iconfinder.com/data/icons/ui-color/512/Untitled-12-128.png",
      "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/sync-16.png",
      "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/write-compose-16.png",

B. I override the _drawcontrol (i show just the snippet that change the corners):

switch (control)
            {
            case 'tl':
              SelectedIconImage.src = ctrlImages[1].src;//our custom img
              break;
            case 'tr':
              if (flipiX && !flipiY) { n='2'; }
              if (!flipiX && flipiY) { n='3'; }
              if (flipiX && flipiY) { n='4'; }
              SelectedIconImage.src = ctrlImages[0].src;//our custom img
              break;
            case 'mt':

              break;
            case 'bl':
              if (flipiY) { n='2'; }
             SelectedIconImage.src = ctrlImages[3].src;//our custom img
              break;
            case 'br':
              if (flipiX || flipiY) { n='2'; }
              if (flipiX && flipiY) { n=''; }
              SelectedIconImage.src = ctrlImages[2].src;//our custom img
              break;
            case 'mb':

              break;
            case 'ml':

              break;
            case 'mr':

              break;
            default:
              ctx[methodName](left, top, sizeX, sizeY);
              break;
            }

C. Override _setCornerCursor function, for to change the cursor when mouse is over object's corner. Inside the function i use the setCursor() function which actually takes a string as a parameter, so we can take a look here for cursors: https://www.w3.org/TR/css3-ui/#cursor

fabric.Canvas.prototype._setCornerCursor =  function(corner, target) {
      //for top left corner
       if(corner == "tl"){
          this.setCursor(this.rotationCursor); return false;
          //for top right corner
      }else if(corner == "tr"){
          this.setCursor('pointer'); return false;
          //for bottom left corner
      }else if(corner == "bl"){
          this.setCursor('help'); return false;      
          //for bottom right corner
      }else if(corner == "br"){
          this.setCursor('copy'); return false;      
      }
    };

D. And finaly on mouse:down i check the corner and add functionality canvas.on('mouse:down',function(e){..}

Hope helps, good luck.