Fabric.js implementiert DIY-Postkartenfunktion

Fabric.js implementiert DIY-Postkartenfunktion

In diesem Artikel wird der spezifische Code von FabricJS zur Realisierung der DIY-Postkartenfunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Vorwort

Voraussetzungen sind unter anderem das Hinzufügen, Kopieren, Löschen sowie Vergrößern und Verkleinern mit zwei Fingern.

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

1. fabric.js ist ein sehr nützliches Plug-In für Canvas-Operationen

Beispiel: Pandas ist ein auf NumPy basierendes Tool, das zur Lösung von Datenanalyseaufgaben entwickelt wurde.

2. Codebeispiele

Der Code lautet wie folgt (Beispiel):

<!DOCTYPE html>
<html lang="de">
<Kopf>
<Titel>selbstgemacht</Titel>
<meta charset="utf-8">
<meta name="viewport" content="benutzerskalierbar=nein, breite=gerätebreite, anfänglicher Maßstab=1, maximaler Maßstab=1">
<meta http-equiv="Zugriffskontrolle-Erlauben-Ursprung" content="*" />
<meta http-equiv="Läuft ab" content="-1">
<meta http-equiv="Cache-Steuerung" content="kein Cache">
<meta http-equiv="Pragma" content="kein-cache">
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/fabric.js"></script>
<script src="./js/customiseControls.min.js"></script>
</Kopf>
<Stil>
  Körper{
    Rand: 0;
    Polsterung: 0;
    Rand: 0;
    Schriftgröße: 100 %;
    Schriftstärke: normal;
    vertikale Ausrichtung: Grundlinie;    
  }  
  .Ende{
    Position: fest;
    oben: 0;
    rechts: 0;
    Breite: 50px;
    Höhe: 20px;
    Hintergrundfarbe: #000000;
    Farbe: #ffffff;
    Schriftgröße: 12px;
    Zeilenhöhe: 20px;
    Z-Index: 9999;
  }
  .canvasimg{
    Position: fest;
    oben: 0;
    links: 0;
    Breite: 50px;
    Höhe: 20px;
    Hintergrundfarbe: #000000;
    Farbe: #ffffff;
    Schriftgröße: 12px;
    Zeilenhöhe: 20px;
    Z-Index: 9999;
  }
  .canvasimg Eingabe{
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 100 %;
    Höhe: 100%;
    Deckkraft: 0;
  }
  #inline-btn{
    Position: fest;
    Deckkraft: 0;
    Z-Index: 999;
  }
  #addinline-btn{
    Deckkraft: 0;
    Position: fest;
    Z-Index: 999;
  }  
  .canvassrc{
    Position: fest;
    oben: 0;
    rechts: 0;
    Breite: 100 %;
    Höhe: 100%;
    Z-Index: 9999;
  }
</Stil>
<Text>
  <div class="canvasimg"><input type="file" name="" id="canvasimg" class="canvasimgadd" type="file" accept="image/*" onchange="selectFileImage(this);" >Bild hinzufügen</div>
  <div class="end" onclick="linkcanvas()">Bild generieren</div>
  <button id="inline-btn" onclick="canvasonclick()">Bild löschen-Button</button>
  <button id="addinline-btn" onclick="copy()">Bild kopieren-Schaltfläche</button>
  <canvas id="c"></canvas>
</body>
</html>
<Skript>
  //Referenzlink//Die ausführliche chinesische Erklärung der API finden Sie am Ende des Artikels//http://fabricjs.com/ offizielle Website von fabric.js//DIY-Funktion erfordert Kopierfunktion, Löschfunktion, Vergrößern, Verkleinern, Verschieben und Drehen//Neue Bildfunktion hinzufügen selectFileImage(fileObj){
    var Datei = DateiObj.files['0'];
    var reader = neuer FileReader();
    reader.readAsDataURL(Datei)
    reader.onload = Funktion (e) {
      Stoff.Bild.vonURL(e.target.result, Funktion (img) {
        img.scale(1).set({
          links: Webbreite – (Webbreite / 2), //Bild links und rechts zentrieren oben: Webhöhe – (Webhöhe / 2), //Bild oben und unten zentrieren, Gesamtwert der Bildschirmhöhe – (Bildhöhe / 2) / 2
          Winkel: 0, //Winkel ist 0
          HerkunftX: 'Mitte',
          HerkunftY: 'Mitte',
        });
        //Die Standardbreite des Bildes füllt den Bildschirm und lässt auf einer Seite 20 Pixel Platz. Die Höhe ist adaptiv img.scaleToWidth(webwidth - 40)
        canvas.add(img).setActiveObject(img);
        // Zeilen löschen img.hasBorders = false;
        // Passe die Bildfunktionsschaltflächen an, verstecke die redundanten Funktionsschaltflächen und behalte nur die Schaltflächen in den vier Ecken canvas.forEachObject(function (em) {
          em['setControlVisible']('mtr', false);
          em['setControlVisible']('mt', false);
          em['setControlVisible']('ml', false);
          em['setControlVisible']('mb', false);
          em['setControlVisible']('mr', false);
          em['setControlVisible']('mt', false);
        })
      });
    }
  }


  // Schaltfläche „Löschen“ var btn = document.getElementById('inline-btn')
  // Schaltfläche hinzufügen var addbtn = document.getElementById('addinline-btn')

  // Bildschirmhöhe und -breite abrufen var webwidth = $(window).width()
  var webheight = $(window).height()
  //Eine Leinwand erstellen var canvas = new fabric.Canvas('c');
  //Die Leinwand füllt den Bildschirm standardmäßig aus canvas.setWidth(webwidth)
    canvas.setHeight(Webhöhe)
    //Bild importieren fabric.Image.fromURL('./imgs/2.jpg', function (img) {
      img.scale(1).set({
        links: Webbreite – (Webbreite/2), //Bild links und rechts zentrieren oben: Webhöhe – (Webhöhe/2), //Bild oben und unten zentrieren, Gesamtwert der Bildschirmhöhe – (Bildhöhe/2)/2
        Winkel: 0, //Winkel ist 0
        HerkunftX: 'Mitte',
        Herkunft: 'Mitte',
      });
      //Die Standardbreite des Bildes füllt den Bildschirm mit 20 Pixeln Leerraum auf einer Seite und ist hochgradig anpassungsfähig img.scaleToWidth(webwidth-40)
      canvas.add(img).setActiveObject(img);
      // Zeilen löschen img.hasBorders = false;
      // Passe die Bildfunktionsschaltflächen an, verstecke die redundanten Funktionsschaltflächen und behalte nur die Schaltflächen in den vier Ecken canvas.forEachObject(function(em){
        em['setControlVisible']('mtr', false); 
        em['setControlVisible']('mt', false);
        em['setControlVisible']('ml', false);
        em['setControlVisible']('mb', false);
        em['setControlVisible']('mr', false);
        em['setControlVisible']('mt', false);
      })
    });

    //Mehrfachauswahl abbrechen canvas.selection = false;
    //Die neue Ebene wird nicht auf der obersten Ebene angezeigt canvas.preserveObjectStacking = true;    
    //Hinweis: Um die Schaltflächenfunktion anzupassen, müssen Sie ein weiteres JS-Plugin namens customiseControls of fabric einführen, sonst funktioniert es nicht. //Ändern Sie die Funktionen der vier Schaltflächen global fabric.Canvas.prototype.customiseControls({
      bl: {
        Aktion: 'Drehen' //Bildrotationsfunktion hinzufügen},
      // nur hasRotatingPoint ist nicht auf false gesetzt
    }, Funktion () {
      canvas.renderAll();
    });  

    //Da der Standard-Schaltflächenstil nicht unseren Wünschen entspricht, müssen wir einige Symbole darauf anpassen fabric.Object.prototype.customiseCornerIcons({
      tl: {
        Symbol: './img/[email protected]', //Bildpfad cornerSize: 70, //Der Klickbereich der Schaltfläche entspricht den CSS-Padding-Attributeinstellungen: {
          cornerSize: 25 //Symbolgröße},    
      },
      tr: {
        Symbol: './img/[email protected]',
        Eckgröße: 70,  
        Einstellungen: {
          Eckgröße: 25
        },         
      },
      bl: {
        Symbol: './img/[email protected]',
        Eckgröße: 70,  
        Einstellungen: {
          Eckgröße: 25
        },         
      },
      br: {
        Symbol: './img/[email protected]',
        Eckgröße: 70,
        Einstellungen: {
          Eckgröße: 25
        },         
      },
    }, Funktion () {
      canvas.renderAll();
    }); 

    //Button folgt der Bildpositionsfunktion positionBtn(obj) {
      //Einheitenparameter des aktuell ausgewählten Bildes abrufen var absCoords = canvas.getAbsoluteCoords(obj);
      btn.style.width = "30px";
      btn.style.height = "30px";
      btn.style.opacity = "0";
      btn.style.left = (absCoords.right – 30 / 2) + 'px';
      btn.style.top = (absCoords.top – 30 / 2) + 'px';

      addbtn.style.width = "30px";
      addbtn.style.height = "30px";
      addbtn.style.opacity = "0";
      addbtn.style.left = (absCoords.left - 30 / 2) + "px";
      addbtn.style.top = (absCoords.leftTop – 30/2) + „px“;
    }

    fabric.Canvas.prototype.getAbsoluteCoords = Funktion (Objekt) {
      zurückkehren {
        rechts: object.aCoords.tr.x + this._offset.left,
        oben: Objekt.aCoords.tr.y + this._offset.top,
        links: Objekt.aCoords.tl.x + this._offset.left,
        linksOben: Objekt.aCoords.tl.y + this._offset.top,
      };
    }


    //Das aktuell ausgewählte Bild löschen Funktion canvasonclick(){
      var t = canvas.getActiveObject()
      canvas.entfernen(t);
    }

    //Das aktuell ausgewählte Bild kopieren Funktion copy(){
      var _self = dies;
      canvas.getActiveObject().clone(Funktion (geklont) {
        _self.paste(geklont);
        canvas.discardActiveObject().renderAll()
      })
    }    
    Funktion einfügen(_Zwischenablage){
      console.log(_Zwischenablage)
      var t = canvas.getActiveObject();
      // Nochmals klonen, damit Sie mehrere Kopien haben.
      t.clone(Funktion (geklontes Objekt) {
        canvas.discardActiveObject();
        geklontesObj.set({
          links: clonedObj.left + 20,
          oben: clonedObj.top + 20,
          evented: wahr,
          hatBorders:false
        });
        wenn (clonedObj.type === 'activeSelection') {
          // Die Aktivitätsauswahl erfordert einen Verweis auf die Leinwand.
          clonedObj.canvas = Leinwand;
          geklontesObj.fürEachObject(Funktion (Objekt) {
            Leinwand.Hinzufügen(Objekt);  
            canvas.fürJedesObjekt(Funktion (em) {
              em['setControlVisible']('mtr', false);
              em['setControlVisible']('mt', false);
              em['setControlVisible']('ml', false);
              em['setControlVisible']('mb', false);
              em['setControlVisible']('mr', false);
              em['setControlVisible']('mt', false);
            })                      
          });
          // Lösen Sie das Problem der Nichtauswählbarkeit clonedObj.setCoords();
        } anders {
          canvas.add(geklontesObjekt);
          canvas.fürJedesObjekt(Funktion (em) {
            em['setControlVisible']('mtr', false);
            em['setControlVisible']('mt', false);
            em['setControlVisible']('ml', false);
            em['setControlVisible']('mb', false);
            em['setControlVisible']('mr', false);
            em['setControlVisible']('mt', false);
          })          
        }
      });     
    }

    var speichern = {}
    //Durchschnittswert berechnen var getDistance = function (start, stop) {
      gibt Math.hypot(Stopp.x – Start.x, Stopp.y – Start.y) zurück;
    };    

    //PositionBtn-Ereignis überwachen Wenn sich die Maus über dem Bild befindet, klicken Sie darauf und bewegen Sie es, um unsere benutzerdefinierten Kopier- und Löschschaltflächen auszulösen, die die Bildpositionierung und die Funktion zum Vergrößern und Verkleinern mit zwei Fingern verfolgen. canvas.on('mouse:down',function(options){
      //Festlegen, ob auf die Bildeinheit geklickt wird, wenn (options.target) {
        //Ereignis ausführen positionBtn(options.target);

        //Mit zwei Fingern hinein- und herauszoomen store.pageX = options.e.changedTouches[0].clientX
        store.pageY = options.e.changedTouches[0].clientY
        wenn (Optionen.e.changedTouches.Länge == 2) {
          store.pageY2 = options.e.changedTouches[1].clientY
          store.pageX2 = options.e.changedTouches[1].clientX
        }
        store.originScale = Optionen.Ziel.scaleX || 0,5;
        store.originleft = Optionen.Ziel.links;
        store.origintop = Optionen.Ziel.top;
      }
    });                
    canvas.on('Maus:Bewegen',Funktion(Optionen){
      wenn(Optionen.Ziel){
        positionBtn(Optionen.Ziel);
        wenn (Optionen.e.changedTouches.Länge == 2) {
          wenn (!store.pageX2) {
            store.pageX2 = options.e.changedTouches[1].clientX
          }
          wenn (!store.pageY2) {
            store.pageY2 = options.e.changedTouches[1].clientY
          }
          var zoom = getDistance({
            x: Optionen.e.changedTouches[0].clientX,
            y: Optionen.e.changedTouches[0].clientY
          }, {
            x: options.e.changedTouches[1].clientX,
            y: options.e.changedTouches[1].clientY
          }) /
            getDistance({
              x: store.pageX,
              y: store.pageY
            }, {
              x: store.pageX2,
              y: store.pageY2
            });
          var newScale = store.originScale * zoom;
          wenn (neuer Maßstab > 3) {
            neuer Maßstab = 3;
          } 
          options.target.scaleX = neuer Maßstab;
          options.target.scaleY = neuer Maßstab;
          canvas.renderAll();
        }          
      }
    });  
    canvas.on('Maus: hoch',Funktion(Optionen){
      wenn(Optionen.Ziel){
        positionBtn(Optionen.Ziel);   
        store.pageY = 0
        store.pageX = 0
        store.pageY2 = 0
        store.pageX2 = 0    
        store.originScale = Optionen.target.scaleX 
        store.originleft = Optionen.Ziel.links  
        store.origintop = Optionen.target.top      
      }
    }); 

    //Postkarte generieren Funktion linkcanvas(){
      sei xheight = $('#c').height()
      sei xwidth = $('#c').width()
      canvas.setBackgroundColor('rgba(255, 255, 255, 1)', canvas.renderAll.bind(canvas));
      var exportedArt = this.canvas.toDataURL({
        Format: "jpeg",
        Qualität: 1.0,
        Multiplikator: 2,4,
        links: 0,
        oben: 0,
        Breite: xBreite,
        Höhe: xHöhe,
      });
      $('body').append(`<img class="canvassrc" src="${exportedArt}"/>`)
    }

</Skript>

Ergebnisse erzielen

Zusammenfassen

Für einige spezifische Methoden und Wissenspunkte empfehle ich Ihnen, diesen Artikel zu lesen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung des Canvas-Operation-Plugins fabric.js

<<:  So erstellen Sie eine gespeicherte Prozedur in MySQL und fügen Datensätze in einer Schleife hinzu

>>:  Eine kurze Analyse zum Upgrade von PHP 5.4 auf 5.6 in CentOS 7

Artikel empfehlen

Detailliertes Beispiel zum Abrufen des Maximalwerts jeder Gruppe nach der Gruppierung in MySQL

Detailliertes Beispiel zum Abrufen des Maximalwer...

So stellen Sie eine Verbindung zu einem Remoteserver her und übertragen Dateien über einen Jump-Server in Linux

Vor kurzem traten bei der Bereitstellung der Umge...

HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden

Viele Freunde stellten beim Erlernen des Front-En...

So fügen Sie dem Tomcat-Dienst einen Java-Startbefehl hinzu

Mein erstes Serverprogramm Ich lerne gerade, Onli...

Detaillierte Erläuterung der MySQL-Transaktionsverwaltungsvorgänge

Dieser Artikel beschreibt die MySQL-Transaktionsv...

Anmeldung zur Token-Verifizierung im Vue-Projekt (Front-End-Teil)

In diesem Artikelbeispiel wird der spezifische Co...

Dockers Mechanismus zur Integritätserkennung

Für Container ist die einfachste Integritätsprüfu...

Über die MariaDB-Datenbank unter Linux

Inhaltsverzeichnis Über die MariaDB-Datenbank unt...

So ändern Sie die CentOS-Serverzeit auf die Peking-Zeit

1. Ich habe ein VPS- und CentOS-System gekauft un...

Einführung in die drei wesentlichen Protokolle für MySQL-Datenbankinterviews

Inhaltsverzeichnis 1. Redo-Log (Transaktionsproto...

Installationsschritte von MySQL unter Linux

1. Laden Sie die MySQL-Tar-Datei herunter: https:...

Installieren Sie eine virtuelle Python-Umgebung in Ubuntu 18.04

Nur als Referenz für Python-Entwickler, die Ubunt...

HTML-Codeanalyse der Textkonvertierungseffekte bei Links- und Rechtsbewegungen

<div ausrichten="zentrieren"> <...

Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors

CSS-Selektoren Durch Festlegen des Stils für das ...

Mehrere praktische Szenarien zur Implementierung der Ersetzungsfunktion in MySQL

REPLACE Syntax REPLACE(String,from_str,to_str) Da...