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
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5
Organisieren Sie die Tutorialnotizen zur Installa...
Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite
Inhaltsverzeichnis Projekterstellung Projektstruk...
MySQL-Lernaufzeichnung: Blutiger Vorfall durch KEY-Partition verursacht
Nachfragehintergrund Ein Teil der Daten in der Ge...
Zusammenfassung der Probleme mit der Mysql-connector-java-Treiberversion
Problem mit der Mysql-Connector-Java-Treiberversi...
Node+Express zum Erzielen eines Paging-Effekts
In diesem Artikel wird der spezifische Code von n...
Sechs wichtige Selektoren in CSS (merken Sie sie sich in drei Sekunden)
Von: https://blog.csdn.net/qq_44761243/article/de...
Überlegungen zur Kürzung von mehrzeiligem Text mit einer Schaltfläche „Mehr anzeigen“
Ich bin erst kürzlich zufällig auf diese kleine A...
Schritte zur Installation von MySQL 8.0.23 unter Centos7 (Anfängerstufe)
Lassen Sie mich zunächst kurz erklären, was MySQL...
Es ist ganz einfach zu verstehen, was Node.js ist
Inhaltsverzeichnis Offizielle Einführung in Node....
Tomcat Server Erste Schritte Super ausführliches Tutorial
Inhaltsverzeichnis 1. Einige Konzepte von Tomcat ...
Jenkins+Gitlab+Nginx Bereitstellung einer Front-End-Anwendung
Inhaltsverzeichnis Zugehörige Abhängigkeitsinstal...
Umfassende Analyse des MySql-Master-Slave-Replikationsmechanismus
Inhaltsverzeichnis Master-Slave-Replikationsmecha...
Designtheorie: Lesbarkeit und Verständlichkeit von Texten
<br />Vor nicht allzu langer Zeit habe ich a...
Webpack lädt CSS-Dateien und ihre Konfigurationsmethode
webpack lädt CSS-Dateien und deren Konfiguration ...
Grafisches Tutorial zur Installation und Konfiguration der MySQL-Version 8.0.24
Dieser Artikel zeichnet die Installations- und Ko...