Dodaj przycisk Usuń element w płótnie Fabric JS

Question

Witam Chcę dodać przycisk Usuń w elemencie za pomocą FabricJS. Mam przykład:

próbuję dodać ten fragment kodu, ale gdy rozmiar obrazu przycisk kasowania nie pozostać na miejscu.

http://jsfiddle.net/wxao1on8/13/

function addDeleteBtn(x, y, w){ 
     $(".deleteBtn").remove(); 
     var btnLeft = x; 
     var btnTop = y - 30; 
     var widthadjust=w/2; 
     btnLeft=widthadjust+btnLeft-1 
     var deleteBtn = '<img src="https://www.funagain.com/images/old/common/delete-icon.png" class="deleteBtn" ' + 
       'style="position:absolute;top:'+btnTop+'px;right:'+btnLeft+'px;cursor:pointer;"/>'; 
     $(".canvas-container").append(deleteBtn); 
    } 

    canvas.on('object:selected',function(e){ 
     addDeleteBtn(e.target.oCoords.mt.x, e.target.oCoords.mt.y, e.target.width); 
    }); 

    canvas.on('mouse:down',function(e){ 
     if(!canvas.getActiveObject()) 
     { 
      $(".deleteBtn").remove(); 
     } 
    }); 

    canvas.on('object:modified',function(e){ 
     addDeleteBtn(e.target.oCoords.mt.x, e.target.oCoords.mt.y, e.target.width); 
    }); 

    canvas.on('object:moving',function(e){ 
     $(".deleteBtn").remove(); 
    }); 

    $(document).on('click',".deleteBtn",function(){ 
     if(canvas.getActiveObject()) 
     { 
      canvas.remove(canvas.getActiveObject()); 
      $(".deleteBtn").remove(); 
     } 
    }); 

Answer 1

target.oCoords.mt jest średnim górnym rogu.

Użyj prawy górny róg zamiast: e.target.oCoords.tr

var canvas = new fabric.Canvas('canvas'); 
var HideControls = { 
      'tl':true, 
      'tr':false, 
      'bl':true, 
      'br':true, 
      'ml':true, 
      'mt':true, 
      'mr':true, 
      'mb':true, 
      'mtr':true 
     }; 
fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function (img) { 
    img.top = 60; 
    img.left = 30; 
    img.setControlsVisibility(HideControls); 
    canvas.add(img); 
}); 

canvas.renderAll(); 

function addDeleteBtn(x, y){ 
    $(".deleteBtn").remove(); 
    var btnLeft = x-10; 
    var btnTop = y-10; 
    var deleteBtn = '<img src="https://www.funagain.com/images/old/common/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>'; 
    $(".canvas-container").append(deleteBtn); 
} 

canvas.on('object:selected',function(e){ 
     addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y); 
}); 

canvas.on('mouse:down',function(e){ 
    if(!canvas.getActiveObject()) 
    { 
     $(".deleteBtn").remove(); 
    } 
}); 

canvas.on('object:modified',function(e){ 
    addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y); 
}); 

canvas.on('object:scaling',function(e){ 
    $(".deleteBtn").remove(); 
}); 
canvas.on('object:moving',function(e){ 
    $(".deleteBtn").remove(); 
}); 
canvas.on('object:rotating',function(e){ 
    $(".deleteBtn").remove(); 
}); 
$(document).on('click',".deleteBtn",function(){ 
    if(canvas.getActiveObject()) 
    { 
     canvas.remove(canvas.getActiveObject()); 
     $(".deleteBtn").remove(); 
    } 
}); 

Answer 2

Witam chciałbym zaproponować inne podejście do tej funkcjonalności że jest bardziej stabilna, gdyż nie dodaje elementy na DOM, możemy go użyć na tyle obiektów, ile chcemy, nie musimy ukrywać i pokazywać niestandardowych przycisków narożnych, a przyciski narożne są widoczne za każdym razem, gdy obiekt jest aktywny (funkcje rodzimych fabricjów).

1. mam zamiar zastąpić prototyp _drawControl funkcji obiektu, za dodać swoje własne obrazy rożny.
2. Zastąpić prototyp płótna _setCornerCursor, aby zmienić kursor myszy w czasie rzeczywistym, zgodnie z którym narożnik się skończył.
3. Zrobiłem żywo skrzypce tutaj: https://jsfiddle.net/tornado1979/j987gb6f/

A. Przede wszystkim muszę wczytywać obrazy zwyczaj narożne, więc kiedy klikamy na obiekcie nie będzie żadnych opóźnień (użyłem losowe obrazy tylko na pokaz).

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. zastąpić ten _drawcontrol (I wykazują tylko fragment, które zmieniają się w rogach):

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 funkcji, na zmianę kursora podczas mysz znajduje się nad rogiem obiektu. Wewnątrz funkcji używam setCursor funkcji(), która faktycznie wykonuje ciąg jako parametr, więc możemy spojrzeć tutaj kursorów: 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. I wreszcie na myszy: w dół sprawdzasz na ziemię i funkcjonalności canvas.on ('mysz: down', function (e) {..}

Nadzieja pomaga, powodzenia

.

Answer 3

twoje rozumowanie jest poprawne. Niestety, mam w twoim przykładzie "TypeError: t jest niezdefiniowane -> fabric.min.. JS: 1: 14099"

mam Twój przykład trochę zmodyfikowane I overriede cztery méthodes:

• _drawControl -> narysować ikona
• _setCornerCursor -> Pokaż kursora
• _getActionFromCorner - -> stworzyć akcję myszką w dół
• _performTransformAction -> wykonywanie działań przez ruch myszy

var canvas = new fabric.Canvas('canvas'); 
 
var DIMICON = 15; 
 
var HideControls = { 
 
      'tl':true, 
 
      'tr':true, 
 
      'bl':true, 
 
      'br':true, 
 
      'ml':false, 
 
      'mt':false, 
 
      'mr':false, 
 
      'mb':false, 
 
      'mtr':false 
 
     }; 
 

 

 
var dataImage = [ 
 
\t "https://cdn1.iconfinder.com/data/icons/streamline-interface/60/cell-8-10-120.png", /*scale*/ 
 
     "https://cdn1.iconfinder.com/data/icons/ui-color/512/Untitled-12-128.png", /*delete*/ 
 
     "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/sync-16.png", /*rotate*/ 
 
     "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/write-compose-16.png", /*change text*/ 
 
     "https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-1/128/save-16.png" /*save*/ 
 
    ]; 
 
//********override*****// 
 
fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { 
 
     if (!this.isControlVisible(control)) { 
 
     return; 
 
     } 
 
\t var SelectedIconImage = new Image(); 
 
     var size = this.cornerSize; 
 
    /* fabric.isVML() ||*/ this.transparentCorners || ctx.clearRect(left, top, size, size); 
 
\t switch (control) 
 
      { 
 
      case 'tl':/*delete*/ 
 
       SelectedIconImage.src = dataImage[1]; 
 
\t \t \t break; 
 
      case 'tr':/*scale*/ 
 
       SelectedIconImage.src = dataImage[0]; \t 
 
\t \t \t break; 
 
      case 'bl':/*scale*/ 
 
      SelectedIconImage.src = dataImage[0]; 
 
\t \t \t break; 
 
      case 'br':/*rotate*/ 
 
       SelectedIconImage.src = dataImage[2]; 
 
\t \t \t break; 
 
      default: 
 
       ctx[methodName](left, top, size, size); 
 
      } 
 
       
 
      if (control == 'tl' || control == 'tr' || control == 'bl' || control == 'br') 
 
      { 
 
       try { 
 
       ctx.drawImage(SelectedIconImage, left, top, DIMICON, DIMICON); 
 
       } catch (e) { 
 
\t \t \t \t ctx[methodName](left, top, size, size); 
 
       } 
 
      } 
 
    } 
 
    
 
//override prorotype _setCornerCursor to change the corner cusrors 
 
\t fabric.Canvas.prototype._setCornerCursor = function(corner, target) { 
 
\t \t if (corner === 'mtr' && target.hasRotatingPoint) { 
 
\t \t \t this.setCursor(this.rotationCursor); 
 
\t \t \t /*ADD*/ 
 
\t \t }else if(corner == "tr" || corner == "bl"){ 
 
\t \t \t this.setCursor('sw-resize'); 
 

 
\t \t }else if(corner == "tl" || corner == "br"){ 
 
\t \t \t this.setCursor('pointer'); 
 
\t \t } \t \t \t 
 
\t \t \t /*ADD END*/ 
 
\t \t else { 
 
\t \t \t this.setCursor(this.defaultCursor); 
 
\t \t \t return false; 
 
\t \t } 
 
    }; 
 
\t fabric.Canvas.prototype._getActionFromCorner = function(target, corner){ 
 
     var action = 'drag'; 
 
\t if (corner){ 
 
\t \t switch(corner){ 
 
\t \t \t case 'ml': 
 
\t \t \t case 'mr': 
 
\t \t \t \t action = 'scaleX'; 
 
\t \t \t \t break; 
 
\t \t \t case 'mt': 
 
\t \t \t case 'mb': 
 
\t \t \t \t action = 'scaleY'; 
 
\t \t \t \t break; 
 
\t \t \t case 'mtr': 
 
\t \t \t \t action = 'rotate'; 
 
\t \t \t \t break; 
 
\t \t \t /**ADD **/ \t 
 
\t \t \t case 'br': 
 
\t \t \t \t action = 'rotate'; 
 
\t \t \t \t break; 
 
\t \t \t case 'tl'://delete function if mouse down 
 
\t \t \t \t action = 'delete'; 
 
\t \t \t \t canvas.remove(canvas.getActiveObject()); 
 
\t \t \t \t break; \t \t 
 
\t \t \t /**ADD END**/ \t \t \t \t 
 
\t \t \t default: action = 'scale'; 
 
\t \t } 
 
\t \t return action; 
 
\t } 
 
    } 
 
\t 
 
\t fabric.Canvas.prototype._performTransformAction = function(e, transform, pointer) { 
 
     var x = pointer.x, 
 
      y = pointer.y, 
 
      target = transform.target, 
 
      action = transform.action; 
 

 
     if (action === 'rotate') { 
 
     this._rotateObject(x, y); 
 
     this._fire('rotating', target, e); 
 
     } 
 
     else if (action === 'scale') { 
 
     this._onScale(e, transform, x, y); 
 
     this._fire('scaling', target, e); 
 
     } 
 
     else if (action === 'scaleX') { 
 
     this._scaleObject(x, y, 'x'); 
 
     this._fire('scaling', target, e); 
 
     } 
 
     else if (action === 'scaleY') { 
 
     this._scaleObject(x, y, 'y'); 
 
     this._fire('scaling', target, e); 
 
     } 
 
\t /**ADD**/ 
 
\t else if (action === 'delete') { 
 
\t \t //do nothing, because here function executed when mouse moves 
 
\t } 
 
\t /**ADD END**/ 
 
\t else { 
 
     this._translateObject(x, y); 
 
     this._fire('moving', target, e); 
 
     this.setCursor(this.moveCursor); 
 
     } 
 
    } 
 
//********override END*****// 
 
    
 
//create a rect object 
 
var rect = new fabric.Rect({ 
 
     left: 100, 
 
     top: 100, 
 
     fill: "#FF0000", 
 
     stroke: "#000", 
 
     width: 100, 
 
     height: 100, 
 
     strokeWidth: 10, 
 
     opacity: .8  
 
    }); 
 
canvas.add(rect);  
 
rect.setControlsVisibility(HideControls); 
 

 
fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function (img) { 
 
    img.top = 60; 
 
    img.left = 250; 
 
    img.setControlsVisibility(HideControls); 
 
    canvas.add(img); 
 
}); 
 

 
canvas.renderAll();

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<div id="canvas-container" class="over"> 
 
    <div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;"> 
 
     <canvas id="canvas" width="800" height="600"></canvas> 
 
    </div> 
 
</div>