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
Detaillierte Erklärung dieses Zeigeproblems in JavaScript
Vorwort Der This-Zeiger in JS hat Anfängern schon...
Detaillierter Prozess zur Erstellung eines VR-Panoramaprojekts mit React und Threejs
Vor Kurzem habe ich gelernt, React mit Three.js z...
Vergleich der Effizienz verschiedener Methoden zum Löschen von Dateien in Linux
Testen Sie die Effizienz des Löschens einer große...
So installieren Sie Redis5.0.3 im Docker
1. Ziehen Sie das offizielle 5.0.3-Image [root@lo...
Detaillierte Erklärung der neuen CSS-Eigenschaft display:box
1. Anzeige:Box; Wenn Sie diese Eigenschaft für ei...
MySQL-Transaktionsdetails
Inhaltsverzeichnis Einführung Vier Merkmale von T...
MySQL verwendet die Funktion find_in_set(), um die Sortierung in der Reihenfolge where in() zu implementieren.
Dieser Artikel stellt ein Tutorial zur Verwendung...
Ursachen und Lösungen für das Problem des verstümmelten Zeichensatzes in der MySQL-Datenbank
Vorwort Manchmal sehen wir beim Anzeigen von Date...
Anwendungsbeispiele für den Mysql Inner Join (unbedingt lesen)
Grammatikregeln SELECT Spaltenname(n) FROM Tabell...
Detaillierte Erklärung der Concat-bezogenen Funktionen in MySQL
1. concat()-Funktion Funktion: Mehrere Zeichenfol...
Reines CSS, um die Bildlaufleiste auszublenden, aber dennoch den Bildlaufeffekt beizubehalten (mobil und PC)
Mobile Mobile Seiten müssen nur mit Chrome und Sa...
So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes
Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...
Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React
Inhaltsverzeichnis Installieren und Einführen von...
8 Beispiele für die Verwendung des Killall-Befehls zum Beenden von Prozessen in Linux
Die Linux-Befehlszeile bietet viele Befehle zum B...
So verwenden Sie Watch-Listener in Vue2 und Vue3
watch : auf Datenänderungen achten (Änderungserei...