Detaillierte Erklärung zur Verwendung des Canvas-Operation-Plugins fabric.js

//1: Alle Objekte auf der Leinwand abrufen:
var Elemente = canvas.getObjects();

//2: Legen Sie ein Objekt auf der Leinwand als aktives Objekt fest.
Canvas.SetActiveObject(Elemente[i]);

//3: Holen Sie sich das aktive Objekt auf der Leinwand canvas.getActiveObject()

//4: Hebt die Auswahl aller Objekte auf der Leinwand auf.
canvas.discardActiveObject();

//5: Legen Sie einen Eigenschaftswert eines Objekts im Canvas fest, z. B. die ID des 0. Objekts
var Elemente = canvas.getObjects();
items[0].id = "items_id0" oder items[0].set("id","items_id0")

//6: Holen Sie sich eine Eigenschaft eines Objekts im Canvas, z. B. die ID des 0. Objekts
var Elemente = canvas.getObjects();
Artikel[0].id;
//oder items[0].get("id");

//7: Rendern Sie die Leinwand neu. Wenn die Objekte in der Leinwand geändert werden, muss dieser Vorgang einmal bei der letzten Anzeige ausgeführt werden. canvas.renderAll()

//8: Alle Objekte auf der Leinwand löschen:
Leinwand.klar();

//9: Lösche das aktive Objekt auf der Leinwand:
 var t = canvas.getActiveObject();
 t && canvas.entfernen(t);

//10: Legen Sie die Ebene des aktiven Objekts im Canvas fest. var t = canvas.getActiveObject();
canvas.sendBackwards(t) //eine Ebene nach unten springen canvas.sendToBack(t) //zur untersten Ebene springen:
canvas.bringForward(t) //eine Ebene nach oben springen:
canvas.bringToFront(t) // Zur obersten Ebene springen:
//oder:
t.sendBackwards();
t.sendToBack();
t.bringForward();
t.bringToFront();

//10: Skalieren Sie beim Laden eines Bildes das Bild auf die angegebene Größe.
Stoff.Bild.vonURL(Bildquelle, Funktion(oImg) {
  oImg.set({
    links:tmp_left,
    oben:tmp_top,
    zentrierte Skalierung:true,
    Eckgröße: 7,
    Eckfarbe: "#9cb8ee",
    transparentCorners: false,
  });
  oImg.scaleToWidth(Bildbreite);
  oImg.scaleToHeight(Bildhöhe);
  canvas.add(oImg).setActiveObject(oImg);
 });

//11: Wenn ein Objekt auf der Leinwand ausgewählt ist, wird das Objekt nicht auf der obersten Ebene angezeigt.
canvas.preserveObjectStacking = wahr;

// 12: Füge der Leinwand per URL ein Hintergrundbild hinzu var bg_url = "http://www.xxxx.com/...../bg.png"      
Stoff.Bild.vonURL( bg_url , Funktion(oImg) {
  oImg.set({
  Breite: canvas_obj.width, 
  Höhe: canvas_obj.height,
  HerkunftX: 'links', 
  Herkunft: 'oben'
  });
  canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));
});

//13: originx: originy: stellt das Koordinatensystem dar. 

//14: Zentrieren Sie das Canvas-Objekt:
var t = canvas.getActiveObject();
t.center(); //Alles zentrieren t.centerH(); //Horizontale Mitte t.centerV(); //Vertikale Mitte t.setCoords(); //Hinweis: Damit die obigen Einstellungen wirksam werden, müssen die Koordinaten festgelegt werden.

//15: Wenn sich das Objekt bewegt, begrenzen Sie es so, dass es die Leinwand-//Leinwand-Bewegungsgrenze nicht überschreitet 
Funktion ObjektMoving(e){
  var obj = e.ziel;
  wenn (obj.aktuelleHöhe > obj.Leinwandhöhe || obj.aktuelleBreite > obj.Leinwandbreite) {
      zurückkehren;
   }    
   obj.setCoords();    
    // obere linke Ecke
    wenn (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
      obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
      obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
     }
     //Bot-rechte Ecke
     wenn(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height 
     || obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width){
      obj.top = Math.min(obj.top, obj.canvas.Höhe-obj.getBoundingRect().Höhe+obj.top-obj.getBoundingRect().top);
         obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
      }
}

//16: Wenn das Canvas-Objekt vergrößert wird, beschränken Sie seine Operation über die Grenze hinaus:
//Beachten Sie, dass Sie beim Erstellen eines Objekts auf der Leinwand zuerst Folgendes hinzufügen müssen:
 obj.saveState();
 //Die Methode kann aufgerufen werden, wenn das Objekt geändert wird.
 Funktion Objekt geändert (e) {
  sei obj = e.target;
  : let boundingRect = obj.getBoundingRect(true);
  wenn (boundingRect.left < 0
    || Begrenzungsrechteck.oben < 0
    || boundingRect.left + boundingRect.width > obj.canvas.getWidth()
    || boundingRect.top + boundingRect.height > obj.canvas.getHeight()) {
    obj.top = obj._stateProperties.top;
    obj.left = obj._stateProperties.left;
    obj.Winkel = obj._stateProperties.Winkel;
    obj.scaleX = obj._stateProperties.scaleX;
    obj.scaleY = obj._stateProperties.scaleY;
    obj.setCoords();
    obj.saveState();
  }anders{
  obj.saveState();
}
  }
//17: Wenn das JSON-Objekt generiert wird, wird das Hintergrundbild angezeigt.
Stoff.Bild.vonURL( bgImg, Funktion(oImg) {
   oImg.set({
     Breite: 400,
     Höhe:400,
     links:0,
     oben: 0,
     HerkunftX: 'links',
     Herkunft: 'oben',
     Deckkraft: 0
   });
   //Wenn die toObject-Methode verwendet wird, wird das Hintergrundbild angezeigt.
   oImg.toObject = (Funktion(toObject) {
     return Funktion() {
      zurück fabric.util.object.extend(toObject.call(this), {
        Deckkraft: 1
      });
     };
  })(oImg.toObject); 

 canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));  
}, { crossOrigin: 'Anonymous' });

//18: Eine Maskenebene erstellen //Die Eigenschaften der Maskenposition abrufen (optional):
var maskLayerTop = parseInt($(this).attr("data-top"));
var maskLayerLeft = parseInt($(this).attr("data-left"));
var maskLayerWidth = parseInt($(this).attr("Datenbreite"));
var maskLayerHeight = parseInt($(this).attr("data-height"));
//Eine Maske erstellen var clipMask = new fabric.Rect({
  HerkunftX: 'links',
  Herkunft: 'oben',
  links: maskLayerLeft,
  oben: maskLayerTop,
  Breite: Maskenebenenbreite,
  Höhe: Maskenebenenhöhe,
  füllen: 'rgba(0,0,0,0)', 
  Strichbreite: 0,
  wählbar: false
});  

clipMaske.set({
  Clip für: „Mops“
});

canvas_obj.add(clipMask);                
Funktion degToRad(Grad) {
  Renditegrade * (Math.PI / 180);
}   

Funktion findByClipName(Name){
  return _(canvas_obj.getObjects()).wo({
    clipFür: Name
  }).Erste()
}  

canvas_obj.clipByName = Funktion(ctx) {
  dies.setCoords();
  var clipObj = findByClipName(dieser.clipName);
  var scaleXTo1 = (1 / this.scaleX);
  var scaleYTo1 = (1 / this.scaleY);
  var skewXReverse = - this.skewX;
  var skewYReverse = - this.skewY;
  ctx.speichern();                  
  var ctxLeft = -( diese.Breite / 2 ) + clipObj.strokeWidth;
    var ctxTop = -( diese.Höhe / 2 ) + clipObj.strokeWidth;
    var ctxWidth = clipObj.width - clipObj.strokeWidth;
    var ctxHeight = clipObj.height - clipObj.strokeWidth;
  ctx.translate( ctxLeft, ctxTop );
  ctx.scale(scaleXTo1, scaleYTo1);
  ctx.transform(1, skewXReverse, skewYReverse, 1, 0, 0);
  ctx.rotate(degToRad(dieser.Winkel * -1));                  
  ctx.beginPath();                  
  ctx.rect(
    clipObj.left - this.oCoords.tl.x,
    clipObj.top - this.oCoords.tl.y,
    clipObj.Breite,
    clipObj.Höhe
  );
  ctx.closePath();                  
  ctx.wiederherstellen();
} 
//Wo anrufen:
//Setzen Sie die Maske für die Textebene var t = new fabric.Text("Ihr Text", {
      ID: erste_Ebene+"-Texteingabe"+eindeutige_ID,
      Eckgröße: 7,
      Eckfarbe: "#9cb8ee",
      transparentCorners: false,
      textAlign:"zentriert",
      Clipname: 'Mops',
      clipTo: Funktion(ctx) { 
      returniere _.bind(tmp_canvas_obj.clipByName, t)(ctx) 
      }
});
//Setze die Maske für die Bildebene:
// füge das Vordergrundbild zur Leinwand hinzu
Stoff.Bild.vonURL(Bildquelle, Funktion(oImg) {
  oImg.set({
    id:erste_Ebene+"-Bildeingabe"+eindeutige_ID,
    links:tmp_left,
    oben:tmp_top,
    zentrierte Skalierung:true,
    Eckgröße: 7,
    Eckfarbe: "#9cb8ee",
    transparentCorners: false,
    Clipname: 'Mops',
    clipTo: Funktion(ctx) { 
      gibt _.bind(tmp_canvas_obj.clipByName, oImg)(ctx) zurück 
    }

  });

//19: Das generierte Bild wird auf die angegebene Größe skaliert.
  oImg.scaleToWidth(Bildbreite);
  oImg.scaleToHeight(Bildhöhe);

//20: Fügen Sie beim Objekt ein ID-Attribut hinzu.
  oImg.toObject = (Funktion(toObject) {
       return Funktion() {
        zurück fabric.util.object.extend(toObject.call(this), {
         ID: diese.ID,
        });
       };
  })(oImg.toObject);
  oImg.id = erste_Ebene+"-Bildeingabe"+eindeutige_ID;               
  oImg.saveState();
  tmp_canvas_obj.add(oImg).setActiveObject(oImg);
}, { crossOrigin: 'Anonymous' });
tmp_canvas_obj.renderAll();