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:
|
>>: Eine kurze Analyse zum Upgrade von PHP 5.4 auf 5.6 in CentOS 7
Artikel empfehlen
So zeigen Sie den Rahmen an, wenn td leer ist
Zuvor habe ich zusammengefasst, wie man mit CSS di...
Detaillierte Erläuterung der Nginx-Konfigurationsparameter auf Chinesisch (Lastausgleich und Reverse-Proxy)
PS: Ich habe kürzlich das Nginx-Kapitel von <&...
HTML-Kontrollkästchen Klicken Sie auf den Beschreibungstext, um den Status auszuwählen/abzuwählen
Da das Kontrollkästchen bei der Webentwicklung kle...
Fehlerbehebung bei MySQL-Datenverlust
Inhaltsverzeichnis Vorwort Untersuchung vor Ort G...
Zusammenfassung von 4 Lösungen zum Zurückgeben von Werten auf WeChat Mini-Programmseiten
Inhaltsverzeichnis Anwendungsszenarien Lösung 1. ...
Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3
Inhaltsverzeichnis 1. Ref und reaktiv 1. reaktiv ...
So betreten und verlassen Sie den Docker-Container
1 Starten Sie den Docker-Dienst Zuerst müssen Sie...
Detaillierte Erklärung der Verwendung von overflow:auto
Bevor ich mit dem Haupttext beginne, werde ich ei...
Beispiel für das Hoch- und Herunterladen von Dateien im Front-End mit Vue+Express
Erstellen Sie eine neue server.js Garn init -y Ga...
Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung
Inhaltsverzeichnis Vorwort 1. Übersicht 2. Lese- ...
Dieser Artikel zeigt Ihnen, wie Sie Vue 3.0 responsive verwenden
Inhaltsverzeichnis Anwendungsfälle Reaktive API-b...
Beispielcode für CSS, um horizontale Linien auf beiden Seiten des Textes zu erzielen
In diesem Artikel wird der CSS-Beispielcode vorge...
So überprüfen Sie, ob MySQL erfolgreich installiert wurde
Nachdem MySQL installiert wurde, können Sie in ei...
So verwenden Sie Docker-Compsoe zum Bereitstellen eines Projekts mit Front-End- und Back-End-Trennung
Sag es im Voraus Wir alle wissen, dass Docker ein...
40 CSS/JS-Stil und funktionale technische Verarbeitung
1- Dropdown-Auswahlfelder gestalten – Ändern Sie ...