Multimedia-Programmentwicklung bezieht sich auf den technischen Bereich, der Text, Bilder, Audio, Video und Animation integriert, um interaktive Funktionen durch Programmiersprache zu implementieren. Die Entwicklung konzentriert sich auf Hardwarebeschleunigung, Codierungseffizienz und ein reibungsloses Benutzererlebnis.
| Entwicklungsbereiche | Häufig verwendete Sprachen | Technische Rahmenbedingungen/Tools |
|---|---|---|
| Web-Multimedia | JavaScript / TypeScript | HTML5 Canvas, WebGL, Three.js |
| Mobile Apps/Spiele | C++ / C# / Swift | Unity, Unreal Engine, Metal |
| Back-End-Audio- und Videoverarbeitung | Python / Go / C++ | FFmpeg, OpenCV, GStreamer |
Hinweis: Bei der Entwicklung von Multimediaprogrammen, die viele Berechnungen erfordern, sollte der Hardware-Dekodierung Vorrang eingeräumt werden, um die CPU-Belastung zu reduzieren.
DirectX ist eine Reihe von Anwendungsprogrammierschnittstellen (APIs), die von Microsoft entwickelt wurden, um Software (insbesondere Spielen) die direkte Kommunikation mit Hardware wie Grafikkarten und Soundeffektkarten zu ermöglichen. Es ist eine zentrale Säule der Multimedia-Entwicklung für Windows-Plattformen und Xbox-Konsolen.
| Version | Wichtige Funktionen | Anwendbare Umgebung |
|---|---|---|
| DirectX 11 | Einführung von Oberflächen-Tessellation (Tessellation) und Multi-Thread-Rendering für hohe Stabilität. | Windows 7 und höher |
| DirectX 12 | Die zugrunde liegende API (Low-Level) reduziert den CPU-Overhead erheblich und unterstützt die Multi-Core-Planung von Grafikkarten. | Windows 10 / 11 |
| DirectX 12 Ultimate | Integrieren Sie Technologien der nächsten Generation wie Ray Tracing und Mesh Shader. | High-End-GPUs und Xbox Series X/S |
Hinweis: In der modernen Spieleentwicklung rufen Entwickler DirectX normalerweise über Engines wie Unity oder Unreal Engine auf, anstatt direkt Low-Level-Anweisungen zu schreiben, um die Entwicklungseffizienz zu verbessern.
Media Foundation (MF) ist ein Multimedia-Framework, das von Microsoft nach Windows Vista eingeführt wurde und das alte DirectShow ersetzen soll. Es verfügt über ein neues Pipeline-Design und ist für hochauflösendes Video, Digital Rights Management (DRM) und effizientere Hardwarebeschleunigung optimiert. Es ist die Kerntechnologie für moderne Windows-Anwendungen zur Verarbeitung von Audio und Video.
Die Media Foundation unterteilt den Multimedia-Verarbeitungsprozess in drei Hauptebenen. Dieses Design bietet eine äußerst hohe Flexibilität bei der Steuerung:
| Merkmal | Media Foundation | DirectShow (alte Version) |
|---|---|---|
| Unterstützung für hohe Auflösung | Nativ optimiert für 4K-, 8K- und HDR-Inhalte. | Die Skalierbarkeit ist begrenzt und die Handhabung ultrahoher Auflösungen ist schwierig. |
| Hardwarebeschleunigung | Tief integriert in DXVA 2.0, äußerst effizient. | Abhängig von der spezifischen Filterimplementierung kann die Leistung variieren. |
| Inhaltsschutz | Der integrierte PMP (Protected Media Path) unterstützt DRM. | Es fehlt ein einheitlicher Urheberrechtsschutzmechanismus. |
| Thread-Modell | Verwenden Sie eine asynchrone Topologie, um das Einfrieren der Benutzeroberfläche zu reduzieren. | Das synchrone Ausführungsmodell kann leicht zu Schnittstellenverzögerungen führen. |
Hinweis: Obwohl Media Foundation eine hervorragende Leistung bietet, ist sein API-Design relativ komplex und streng. Es wird empfohlen, dass Entwickler zum Debuggen das von Microsoft bereitgestellte MFTrace-Tool verwenden, um den Ereignisfluss in der Medienpipeline zu verfolgen.
DirectShow ist ein Multimedia-Framework, das auf dem Component Object Model (COM) basiert und hauptsächlich für die Audio- und Videoaufnahme und -wiedergabe auf der Windows-Plattform verwendet wird. Obwohl Microsoft später die Media Foundation als Nachfolger auf den Markt brachte, wird DirectShow aufgrund seiner hohen Kompatibilität und Flexibilität immer noch häufig in Industriekameras, medizinischer Bildgebung und herkömmlicher Audio- und Videosoftware eingesetzt.
Das Kernkonzept von DirectShow ist der Filtergraph, der Multimediadaten verarbeitet, indem er verschiedene Filter zu Links verbindet:
| Funktionelle Klassifizierung | veranschaulichen |
|---|---|
| Medienwiedergabe | Unterstützt die Integration mehrerer Containerformate (wie AVI, WMV, MP4) und Codecs. |
| Bildaufnahme | Bietet eine Standardschnittstelle für die Kommunikation mit WDM-Geräten (Windows Driver Model), geeignet für USB-Kameras. |
| Hardwarebeschleunigung | Hardwarebeschleunigtes Rendering kann über die Grafikkarte per Video Mixing Renderer (VMR) oder EVR durchgeführt werden. |
| Formatkonvertierung | Unterstützt Resampling, Zuschneiden und Farbraumkonvertierung (z. B. YUV in RGB) von Echtzeit-Videostreams. |
Hinweis: Wenn Sie bei der Durchführung moderner Entwicklungen keine Unterstützung älterer Systeme benötigen, empfiehlt Microsoft, vorrangig die Verwendung von Media Foundation zu verwenden, das weitere Vorteile im Umgang mit hochauflösenden Inhalten und im Digital Rights Management (DRM) bietet.
Vulkan ist eine plattformübergreifende Grafik- und Computer-API der nächsten Generation, die von der Khronos Group entwickelt wurde. Im Gegensatz zu OpenGL ist Vulkan eine Low-Level-API, die eine direktere Hardwaresteuerung ermöglicht, den Overhead des Treibers minimiert und die Auslastung von Multi-Core-Prozessoren verbessert.
Die Designlogik von Vulkan erfordert, dass Entwickler im Austausch für ultimative Leistung mehr Verwaltungsaufgaben übernehmen:
| Merkmal | Vulkan | OpenGL |
|---|---|---|
| Fahrerbelastung | Sehr niedrig, die meiste Logik wird von Entwicklern implementiert. | Auf einer höheren Ebene übernimmt der Treiber einen Großteil der Hintergrundverwaltung. |
| Multi-Thread-Unterstützung | Native Unterstützung für parallele Aufgabenverteilung. | Verlässt sich hauptsächlich auf einen einzelnen Thread. |
| Entwicklungskomplexität | Extrem hoch, die Codemenge ist meist um ein Vielfaches höher als bei OpenGL. | Mittel, eher für Anfänger geeignet. |
| Hardware-Auslastung | Hoch, kann GPU-Computing und Speicher genau steuern. | , begrenzt durch die Abstraktionsebene der API. |
Hinweis: Aufgrund der extrem hohen Entwicklungsschwelle von Vulkan wird es normalerweise für 3D-Game-Engine-Kerne empfohlen, die extreme Leistung erfordern (z. B. id Tech 7) oder für wissenschaftliche Simulationsprogramme, die plattformübergreifendes Hochleistungsrechnen erfordern.
OpenCV (Open Source Computer Vision Library) ist eine Open-Source-Softwarebibliothek für Computer Vision und maschinelles Lernen für die Bildverarbeitung und -analyse in Echtzeit.
# Lesen Sie das Bild und zeigen Sie es an
cv2 importieren
image = cv2.imread("image.jpg")
cv2.imshow("Bild", Bild)
cv2.waitKey(0)
cv2.destroyAllWindows()
In OpenCV ist die Kernfunktion zum Lesen von Bilderncv::imread. Die Bilddatei wird geladen alscv::MatMatrixformat.
#include <opencv2/opencv.hpp>
// Grammatik-Prototyp
cv::Mat img = cv::imread(const std::string& filename, int flags = cv::IMREAD_COLOR);
Häufig verwendete Tags (Flags):
Schlüsselideen:cv::imreadgescheitert undEs werden keine C++-Ausnahmen ausgelöstDaher ist herkömmliches Try-Catch dafür nicht effektiv. Wenn der Lesevorgang fehlschlägt (z. B. Pfadfehler, nicht unterstütztes Format oder unzureichende Berechtigungen), wird ein leeres Ergebnis zurückgegebencv::MatObjekt.
Es sollte der richtige Verarbeitungsablauf verwendet werdenempty()Zu überprüfende Mitgliedsfunktion:
#include <opencv2/opencv.hpp>
#include <iostream>
int main() {
std::string path = "data/image.jpg";
cv::Mat img = cv::imread(path);
// Muss prüfen, ob das Bild erfolgreich geladen wurde
if (img.empty()) {
std::cerr << „Fehler: Bilddatei konnte nicht gelesen werden!“ << std::endl;
std::cerr << „Bitte bestätigen Sie, ob der Pfad korrekt ist:“ << Pfad << std::endl;
return -1;
}
//Führen Sie den Vorgang nach erfolgreichem Lesen aus
std::cout << "Bildbreite: " << img.cols << " Höhe: " << img.rows << std::endl;
0 zurückgeben;
}
Wennimg.empty()ist wahr, normalerweise aus folgenden Gründen:
| Grund | Erklärung und Gegenmaßnahmen |
|---|---|
| Dateipfadfehler | Die häufigsten Gründe. Bitte prüfen Sie, ob der relative Pfad relativ zum ausführbaren Verzeichnis ist, oder verwenden Sie einen absoluten Pfad. |
| Nicht unterstützte Dateierweiterung | OpenCV benötigt einen entsprechenden Decoder (wie libjpeg, libpng). Wenn OpenCV ohne Unterstützung kompiliert wird, kann es nicht gelesen werden. |
| Chinesisches Pfadproblem | In einer Windows-Umgebung, einer alten Version oder einer bestimmten Kompilierungsumgebungcv::imreadSchlechte Unterstützung für chinesische Pfade. |
| Unzureichende Berechtigungen | Der Benutzer, der das Programm ausführt, verfügt nicht über die Betriebssystemberechtigungen zum Lesen der Datei. |
Wenn das Lesen aufgrund eines chinesischen Windows-Pfads fehlschlägt, wird empfohlen, die Datei zuerst in den Speicherpuffer einzulesen und danncv::imdecodeZum Dekodieren:
#include <fstream>
#include <vector>
cv::Mat imread_unicode(std::string path) {
std::ifstream fs(path, std::ios::binary | std::ios::ate);
if (!fs.is_open()) return cv::Mat();
std::streamsize size = fs.tellg();
fs.seekg(0, std::ios::beg);
std::vector<char> buffer(size);
if (fs.read(buffer.data(), size)) {
return cv::imdecode(cv::Mat(buffer), cv::IMREAD_COLOR);
}
return cv::Mat();
}
Wenn die Reihenfolge der Punktgruppen (z. B. Schraubenkanten oder Sinuswellen) ungeordnet ist, müssen sie zunächst in Richtung der angepassten Geraden projiziert und sortiert werden. Anschließend können die Punkte entsprechend ihrem positiven und negativen Versatz relativ zur Geraden (Signed Distance) korrekt gruppiert werden. Im Folgenden finden Sie einen Implementierungsplan für die Integration von OpenCV und Standard-C++.
Implementieren Sie zunächst die angegebene Punktentfernungssortierfunktion, die Sie benötigen. Dies kann verwendet werden, um einen Startpunkt oder einen bestimmten Merkmalspunkt zu lokalisieren.
#include <vector>
#include <array>
#include <Algorithmus>
#include <opencv2/opencv.hpp>
using Point2D = std::array<float, 2>;
using Points = std::vector<Point2D>;
Namespace GeometryPointsUtil {
bool FindSortedPointsByDistOfPoint(Points& retPoints, const Points& allPoints, const Point2D& aPoint) {
if (allPoints.empty()) return false;
retPoints = allPoints;
std::sort(retPoints.begin(), retPoints.end(), [&aPoint](const Point2D& p1, const Point2D& p2) {
float dx1 = p1[0] - aPoint[0];
float dy1 = p1[1] - aPoint[1];
float dx2 = p2[0] - aPoint[0];
float dy2 = p2[1] - aPoint[1];
// Quadratsummenvergleich verwenden, um den Mehraufwand für Sqrt-Operationen zu vermeiden
return (dx1 * dx1 + dy1 * dy1) < (dx2 * dx2 + dy2 * dy2);
});
return true;
}
}
Bei oszillierenden Linien passt diese Funktion automatisch die gerade Linie an, sortiert die Projektion und segmentiert sie nach beiden Seiten der geraden Linie.
std::vector<Points> splitOscillatingPoints(const Points& allPoints) {
if (allPoints.size() < 2) return {allPoints};
// 1. Gerade Anpassung
std::vector<cv::Point2f> CVPts;
for (const auto& p : allPoints) cvPts.push_back({p[0], p[1]});
cv::Vec4f-Zeile; // (vx, vy, x0, y0)
cv::fitLine(cvPts, line, cv::DIST_L2, 0, 0.01, 0.01);
float vx = Zeile[0], vy = Zeile[1], x0 = Zeile[2], y0 = Zeile[3];
// 2. Projektionssortierung: Stellen Sie sicher, dass die Punkte entlang einer geraden Linie angeordnet sind
struct ProjectedPoint {
Point2D-Original;
float t; // Projektionslänge
Schwimmerseite; // algebraischer Abstand zur Geraden
};
std::vector<ProjectedPoint> projiziert;
float nx = -vy; // Normalenvektor x
float ny = vx; // Normalenvektor y
for (const auto& p : allPoints) {
float dx = p[0] - x0;
float dy = p[1] - y0;
float t = dx * vx + dy * vy; // Auf eine Gerade projizierte Verschiebung
float s = dx * nx + dy * ny; // Abstand senkrecht zur Geraden (inkl. Plus- und Minuszeichen)
projected.push_back({p, t, s});
}
std::sort(projected.begin(), projected.end(), [](const ProjectedPoint& a, const ProjectedPoint& b) {
Rückgabe bei < b.t;
});
// 3. Gruppierung basierend auf positiven und negativen Vorzeichenübergängen
std::vector<Points> Segmente;
if (projected.empty()) gibt Segmente zurück;
Punkte currentGroup;
bool lastSide = (projected[0].side >= 0);
for (const auto& item : projected) {
bool currentSide = (item.side >= 0);
if (currentSide != lastSide && !currentGroup.empty()) {
segmente.push_back(currentGroup);
currentGroup.clear();
}
currentGroup.push_back(item.original);
lastSide = currentSide;
}
if (!currentGroup.empty()) segmentes.push_back(currentGroup);
Rückgabesegmente;
}
Halcon ist eine leistungsstarke industrielle Bildverarbeitungssoftware, die von MVTec speziell für Bildverarbeitungs- und Bildverarbeitungsanwendungen entwickelt wurde.
Shotcut ist eine kostenlose Open-Source-Videobearbeitungssoftware, die mehrere Formate unterstützt und über viele leistungsstarke Bearbeitungswerkzeuge verfügt. Zu den Funktionen gehören:
Anwendbare Plattformen: Windows, Mac, Linux
OpenShot ist ein benutzerfreundliches Open-Source-Videobearbeitungstool, das leistungsstark ist und mehrere Formate unterstützt. Zu seinen Hauptmerkmalen gehören:
Anwendbare Plattformen: Windows, Mac, Linux
Blender ist eine bekannte Open-Source-3D-Modellierungs- und Animationssoftware mit einem integrierten leistungsstarken Videoeditor, der sich für die Videobearbeitung und die Produktion von Spezialeffekten eignet. Zu seinen Funktionen gehören:
Anwendbare Plattformen: Windows, Mac, Linux
Kdenlive ist eine weit verbreitete Open-Source-Videobearbeitungssoftware unter Linux und unterstützt auch Windows. Zu seinen Hauptfunktionen gehören:
Anwendbare Plattformen: Windows, Mac, Linux
Lightworks bietet kostenlose und kostenpflichtige Versionen an, wobei die kostenlose Version grundlegende Bearbeitungsfunktionen bietet. Zu den Funktionen gehören:
Anwendbare Plattformen: Windows, Mac, Linux
Die oben genannte Open-Source-Videobearbeitungssoftware bietet leistungsstarke Funktionen, die für unterschiedliche Videobearbeitungsanforderungen geeignet sind, von der einfachen Heimvideobearbeitung bis hin zur professionellen Videoproduktion.
| Softwarename | Ungefähres Suchvolumen |
|---|---|
| OpenShot | 110,000 |
| Kdenlive | 90,500 |
| Shotcut | 49,500 |
| Avidemux | 18,100 |
| Losslesscut | 14,800 |
| Blender VSE | 10,000 |
| Natron | 6,600 |
| Cinelerra | 5,400 |
| Pitivi | 3,600 |
| LiVES | 1,600 |
OpenShot ist ein kostenloser und Open-Source-Videoeditor, der Projektname lautetOpenShot/openshot-qt, hauptsächlich basierend aufPythonUndQtEntwicklung. Ziel des Projekts ist es, ein benutzerfreundliches und funktionsreiches Videobearbeitungstool bereitzustellen, das für Benutzer aller Niveaus geeignet ist.
OpenShot verwendetPyQtals grafische Benutzeroberfläche und kombiniert mitlibopenshot(C++-Implementierung) zur Handhabung der Kernlogik der Videobearbeitung. Darüber hinaus nutzt OpenShot VorteileFFmpegZur Unterstützung der Dekodierung und Kodierung mehrerer Formate.
OpenShot eignet sich für Benutzer, die eine einfache, aber leistungsstarke Videobearbeitung benötigen. Ob für Amateurvideokünstler oder für Bildungszwecke, OpenShot bietet flexible Tools und Plug-Ins, um die Bearbeitung und Erstellung zu vereinfachen.
Das OpenShot-Projekt verfügt über eine aktive Open-Source-Community und Benutzer und Entwickler können über GitHub Code beisteuern, Probleme melden oder Vorschläge für neue Funktionen einreichen. Jeder ist herzlich willkommen, mitzumachen und dabei zu helfen, die Funktionalität und Stabilität von OpenShot zu verbessern.
Benutzer können den Quellcode über die GitHub-Seite herunterladen oder die ausführbare Datei von der offiziellen OpenShot-Website herunterladen. Detaillierte Installationsanweisungen und Dokumentation sind auch auf GitHub verfügbar.
Betriebssystem importieren
Unterprozess importieren
def create_kdenlive_project(project_path, video_path, audio_path, srt_path):
„““
Erstellen Sie eine einfache Kdenlive-XML-Projektdatei und importieren Sie Assets
„““
# Ermitteln Sie den absoluten Pfad der Datei, um sicherzustellen, dass Kdenlive sie korrekt lesen kann
video_abs = os.path.abspath(video_path)
audio_abs = os.path.abspath(audio_path)
srt_abs = os.path.abspath(srt_path)
# Grundlegende Kdenlive MLT-Struktur (vereinfachte Version)
kdenlive_xml = f"""<?xml version="1.0" binding="UTF-8"?>
<mlt version="7.24.0" title="Automatisch generiertes Projekt">
<producer id="video_main" resources="{video_abs}"/>
<producer id="audio_main" resources="{audio_abs}"/>
<producer id="subtitle_main" resources="{srt_abs}"/>
<playlist id="main_bin">
<Eintrag Produzent="video_main"/>
<Eintrag Produzent="audio_main"/>
<Eintrag Produzent="subtitle_main"/>
</playlist>
<tractor id="main_timeline">
<mehrspurig>
<track name="Video Track">
<entry Producer="video_main" in="0" out="1000"/>
</track>
<track name="Audio Track">
<entry Producer="audio_main" in="0" out="1000"/>
</track>
</multitrack>
</Traktor>
</mlt>
„““
mit open(Projektpfad, "w", Kodierung="utf-8") als f:
f.write(kdenlive_xml)
print(f"Projektdatei wurde generiert: {project_path}")
def open_with_kdenlive(project_path, kdenlive_exe_path):
„““
Starten Sie Kdenlive und laden Sie das generierte Projekt
„““
Versuchen Sie:
# Verwenden Sie den Unterprozess, um das Programm zu öffnen und Dateiparameter einzugeben
subprocess.Popen([kdenlive_exe_path, project_path])
print("Kdenlive starten...")
außer Ausnahme als e:
print(f"Start fehlgeschlagen: {e}")
if __name__ == "__main__":
# Dateipfad festlegen
MY_VIDEO = "input_video.mp4"
MY_AUDIO = "output_voice.wav"
MY_SRT = "output_subtitle.srt"
SAVE_PROJECT = "auto_project.kdenlive"
# Pfad der ausführbaren Kdenlive-Datei (Windows-Beispiel, Linux verwendet normalerweise „kdenlive“ direkt)
KDENLIVE_PATH = r"C:\Programme\kdenlive\bin\kdenlive.exe"
# 1. Projektdatei generieren
create_kdenlive_project(SAVE_PROJECT, MY_VIDEO, MY_AUDIO, MY_SRT)
# 2. Starten Sie Kdenlive
open_with_kdenlive(SAVE_PROJECT, KDENLIVE_PATH)
Unterprozess importieren
# Definieren Sie eine einfache MLT-XML-Struktur
# Dieses XML definiert die Wiedergabereihenfolge von zwei Materialstücken.
mlt_xml_content = """<mlt>
<producer id="clip1" resources="video_part1.mp4" />
<producer id="clip2" resources="video_part2.mp4" />
<playlist id="main_track">
<entry Producer="clip1" in="0" out="150" />
<entry Producer="clip2" in="0" out="300" />
</playlist>
</mlt>
„““
#Inhalt in Datei schreiben
mit open("auto_edit.mlt", "w", binding="utf-8") als f:
f.write(mlt_xml_content)
def render_video(mlt_file, Output_file):
„““
Verwenden Sie das Befehlszeilentool „Melt“, um Videos direkt zu rendern (ohne die GUI zu öffnen).
„““
#melt ist das Befehlszeilenschnittstellentool für MLT
Befehl = [
„schmelzen“,
mlt_file,
"-consumer", f"avformat:{output_file}",
„acodec=aac“, „vcodec=libx264“, „preset=fast“
]
Versuchen Sie:
print(f"Hintergrundrendering starten: {output_file}...")
subprocess.run(Befehl, check=True)
print("Rendering abgeschlossen!")
außer FileNotFoundError:
print("Fehler: Die ausführbare Melt-Datei kann nicht gefunden werden. Bitte bestätigen Sie, ob das MLT-Framework installiert ist.")
if __name__ == "__main__":
#Rendering durchführen
render_video("auto_edit.mlt", "final_result.mp4")
Dieses Skript verwendet Bilderkennung, um UI-Elemente zu positionieren. Bitte erfassen Sie vor der Ausführung die kleinen Symbole der Schaltflächen „Bild und Text in Filme“ und „Video generieren“ in der Bearbeitungsoberfläche und speichern Sie sie unterbtn_start.pngUndbtn_generate.pngSpeichern Sie es im selben Verzeichnis wie den Programmcode.
Bitte installieren Sie zuerst die erforderlichen Python-Bibliotheken:
pip install pyautogui pyperclip opencv-python
Betriebssystem importieren
Importzeit
importpyautogui
Pyperclip importieren
# Parameter einstellen
JIANYING_PATH = r"C:\Benutzer\IhrName\AppData\Local\JianyingPro\Apps\JianyingPro.exe" # Bitte ersetzen Sie es durch Ihren tatsächlichen Pfad
SCRIPT_FILE = „my_script.txt“ # Vorbereitete Skriptdatei
CONFIDENCE_LEVEL = 0,8 # Bilderkennungsgenauigkeit (0-1)
def run_automation():
# 1. Lesen Sie den Inhalt des Dokuments
wenn nicht os.path.exists(SCRIPT_FILE):
print("Fehler: Dokumentdatei nicht gefunden")
Rückkehr
mit open(SCRIPT_FILE, "r",kodierung="utf-8") als f:
content = f.read()
# 2. Clipping aktivieren
print("Clipping wird gestartet...")
os.startfile(JIANYING_PATH)
time.sleep(8) # Warten Sie, bis die Software vollständig geladen ist
Versuchen Sie:
# 3. Suchen Sie die Schaltfläche „Bild und Text in Film“ und klicken Sie darauf
start_btn = pyautogui.locateCenterOnScreen('btn_start.png',confidence=CONFIDENCE_LEVEL)
wenn start_btn:
pyautogui.click(start_btn)
print("Sie haben die Bild- und Textoberfläche aufgerufen")
time.sleep(2)
sonst:
print(„Die Schaltfläche „Bild und Text in Film einfügen“ konnte nicht gefunden werden“)
Rückkehr
# 4. Dokumenteneingabe verarbeiten
pyperclip.copy(content) # Kopieren Sie das Dokument in die Zwischenablage
pyautogui.click(x=pyautogui.size().width//2, y=pyautogui.size().height//2) # Klicken Sie auf die Mitte des Fensters, um den Fokus sicherzustellen
pyautogui.hotkey('ctrl', 'v')
print("Das Manuskript wurde eingefügt")
time.sleep(1)
# 5. Suchen Sie nach „Video generieren“ und klicken Sie darauf.
gen_btn = pyautogui.locateCenterOnScreen('btn_generate.png',confidence=CONFIDENCE_LEVEL)
wenn gen_btn:
pyautogui.click(gen_btn)
print("Projekt wird generiert...")
sonst:
print(„Die Schaltfläche „Video generieren“ konnte nicht gefunden werden“)
außer Ausnahme als e:
print(f"Es ist ein Fehler aufgetreten: {e}")
if __name__ == "__main__":
run_automation()
| Schritt | veranschaulichen |
|---|---|
| Bildaufnahme | Versuchen Sie beim Aufnehmen von Bildern, nur den Text oder das Symbol in der Mitte der Schaltfläche zu erfassen, und vermeiden Sie die Einbeziehung zu vieler Hintergrundfarben, um die Kompatibilität mit verschiedenen Hintergrundthemen zu erhöhen. |
| Time Sleep | Der häufigste Grund für einen Fehler in der Automatisierung ist „das Programm hat geklickt, bevor die Software reagiert hat“. Bitte entsprechend der Computerleistung anpassentime.sleepWert. |
| Fail-Safe | PyAutoGUI verfügt über einen eingebauten Schutzmechanismus: Durch schnelles Bewegen der Maus in die „obere linke Ecke“ des Bildschirms kann das Programm sofort beendet werden. |
.pngWie in der Abbildung dargestellt, kann die Erkennung aufgrund von Änderungen der Bildschirmauflösung oder des Zoomverhältnisses (DPI) fehlschlagen.pygetwindowDie Bibliothek erzwingt, dass das Clipping-Fenster das aktive Vordergrundfenster ist.Hinweis: Häufige UI-Automatisierung kann aufgrund von Software-Updates (Änderungen der Schnittstellenposition) ungültig werden. Wenn ein langfristig stabiler Betrieb erforderlich ist, ist das Studium von „Pfad 2: JSON-Entwurf ändern“ eine robustere Lösung.
ffmpeg、ffprobe、ffplayffmpeg -i input.avi output.mp4ffmpeg -ss 00:00:10 -i input.mp4 -t 5 output.mp4ffmpeg -i input.mp4 -q:a 0 -map a output.mp3ffmpeg -i input.mp4 -vf subtitles=sub.srt output.mp4Bei der Multimedia-Entwicklung ist es eine Grundvoraussetzung, sicherzustellen, dass die Ausführungsumgebung über FFmpeg verfügt. Über PythonsubprocessModule undurllib, können wir einen automatisierten Umgebungskonfigurationsprozess implementieren.
Der Programmcode ist hauptsächlich in zwei Phasen unterteilt: Erkennen des Systempfads sowie Remote-Download und Dekomprimierung.
shutil.which()Suchen Sie nach ausführbaren Dateien. Dies ist die stabilste Methode zur plattformübergreifenden Erkennung von PATH.sys.platformEntscheiden Sie sich für den Download-Link (normalerweise .zip für Windows, .tar.xz für Linux).os.environ["PATH"]。Betriebssystem importieren
Shutil importieren
Importplattform
urllib.request importieren
ZIP-Datei importieren
def secure_ffmpeg():
# 1. Überprüfen Sie, ob der Systempfad bereits über ffmpeg verfügt
if Shutil.which("ffmpeg"):
print("FFmpeg existiert bereits im Systempfad.")
Rückgabe True
print("FFmpeg nicht erkannt, bereit zum Herunterladen ...")
# 2. Informationen entsprechend den Betriebssystemeinstellungen herunterladen (am Beispiel von Windows)
if platform.system() == "Windows":
url = „https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.zip“
target_zip = „ffmpeg.zip“
extract_dir = „ffmpeg_bin“
# Datei herunterladen
urllib.request.urlretrieve(url, target_zip)
# dekomprimieren
mit zipfile.ZipFile(target_zip, 'r') als zip_ref:
zip_ref.extractall(extract_dir)
# Suchen Sie das dekomprimierte bin-Verzeichnis und fügen Sie Umgebungsvariablen hinzu
# Der tatsächliche Pfad hängt von der komprimierten Paketstruktur ab.
ffmpeg_path = os.path.abspath(os.path.join(extract_dir, „ffmpeg-release-essentials“, „bin“))
os.environ["PATH"] += os.pathsep + ffmpeg_path
print(f"FFmpeg wurde bereitgestellt unter: {ffmpeg_path}")
Rückgabe True
sonst:
print("Das aktuelle Beispiel unterstützt nur den automatischen Download für Windows, bitte für andere Systeme manuell installieren.")
Gibt False zurück
# Führen Sie Kontrollen durch
gewährleisten_ffmpeg()
| Projekt | veranschaulichen |
|---|---|
| Berechtigungsproblem | Unter Linux oder macOS muss ggf. die heruntergeladene Binärdatei heruntergeladen werdenos.chmod(path, 0o755)Erteilen Sie Ausführungsberechtigungen. |
| Version gesperrt | Es wird empfohlen, von einer zuverlässigen Quelle (wie Gyan.dev oder BtbN) herunterzuladen und zu bestätigen, dass die Version mit Ihrem Code kompatibel ist. |
| Netzwerk-Timeout | FFmpeg ist größer, daher wird empfohlen, es beim Herunterladen hinzuzufügen.try-exceptZur Bewältigung von Netzwerkausfällen oder zur VerwendungrequestsDie Bibliothek zeigt einen Fortschrittsbalken an. |
AppDataOder das Stammverzeichnis des Projekts, um wiederholte Downloads zu vermeiden.Hinweis: In einer Produktionsumgebung können häufige Downloads großer Binärdateien die Benutzererfahrung beeinträchtigen. Es wird empfohlen, den Benutzer beim ersten Start darauf hinzuweisen oder es im Installationspaket vorzuladen.
Die gebräuchlichste und stabilste Methode zur Bildschirmaufzeichnung in Python ist die KombinationPyAutoGUI(zum Aufnehmen von Bildern),OpenCV(zum Kodieren und Speichern von Videos) undNumPy(zur Verarbeitung von Bilddaten).
Zuerst müssen Sie die notwendigen Pakete installieren. Öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus:
pip install opencv-python pyautogui numpy
Der folgende Code erfasst das Vollbild und speichert es als Ausgabedatei.mp4. Drücken Sie die q-Taste auf Ihrer Tastatur, um die Aufnahme zu stoppen.
cv2 importieren
importpyautogui
numpy als np importieren
# Bildschirmauflösung abrufen
SCREEN_SIZE = tuple(pyautogui.size())
# Videokodierungsformat definieren (FourCC)
fourcc = cv2.VideoWriter_fourcc(*"mp4v")
# VideoWriter-Objekt erstellen (Dateiname, Kodierung, Bildrate, Auflösung)
out = cv2.VideoWriter("output.mp4", fourcc, 20.0, SCREEN_SIZE)
print("Aufnahme... Drücken Sie die 'q'-Taste, um zu stoppen.")
Versuchen Sie:
während True:
# Bildschirm erfassen
img = pyautogui.screenshot()
# In NumPy-Array konvertieren
Frame = np.array(img)
# Farbe von RGB in BGR konvertieren (OpenCV-Standardformat)
Frame = cv2.cvtColor(Frame, cv2.COLOR_RGB2BGR)
# Frames in eine Videodatei schreiben
out.write(frame)
# Videovorschau anzeigen (optional)
# cv2.imshow("Vorschau", Frame)
# Tastatureingaben erkennen
if cv2.waitKey(1) == ord("q"):
Pause
endlich:
# Ressourcen freigeben und das Fenster schließen
out.release()
cv2.destroyAllWindows()
print("Die Aufnahme ist beendet und die Datei wurde gespeichert.")
| Problemphänomen | Gründe und Vorschläge |
|---|---|
| Video wird zu schnell abgespielt | Die tatsächlich aufgezeichneten FPS liegen unter dem eingestellten Wert. Die Schreib-FPS sollten gesenkt werden oder stattdessen eine effizientere Abrufbibliothek wie mss verwendet werden. |
| Die Farbe ist abnormal | Ich habe vergessen, die COLOR_RGB2BGR-Konvertierung durchzuführen. |
| Stottern beim Ausführen des Codes | Die Aufnahme eines hochauflösenden Bildschirms ist sehr rechenintensiv. Es wird empfohlen, die Bildschirmauflösung zu verringern oder nur einen bestimmten Bereich aufzuzeichnen. |
Manim (Mathematical Animation Engine) ist eine in Python geschriebene Animationsbibliothek, die speziell zum Erstellen mathematischer Bilder und Animationen verwendet wird. Manim Es kann verwendet werden, um hochwertige Animationen zu erstellen, die mathematische Konzepte, Codeausführungsprozesse oder alles andere, was durch Bilder und Animationen dargestellt wird, veranschaulichen.
Manim-Animationen werden im Allgemeinen durch das Schreiben von Python-Skripten und das anschließende Generieren von Videodateien abgeschlossen. Jede Animation enthält normalerweise eine oder mehrere Szenen (Scene) und jede Szene besteht aus verschiedenen Objekten (Mobject).
aus Manim-Import *
Klasse MyFirstScene(Scene):
def construction(self):
text = Text("Hallo, Manim!") # Erstellt ein Textobjekt
self.play(Write(text)) # Animation generieren
Manim kann über pip installiert werden:
pip install manim
OpenGL (Open Graphics Library) ist eine sprach- und plattformübergreifende Anwendungsprogrammierschnittstelle (API) zum Rendern von 2D- und 3D-Vektorgrafiken. Es wird von der Khronos Group gepflegt und findet breite Anwendung in den Bereichen computergestütztes Design (CAD), virtuelle Realität, wissenschaftliche Visualisierung und Videospielentwicklung.
OpenGL verwendet eine Pipeline-Architektur, um 3D-Daten in Pixel auf dem Bildschirm umzuwandeln. Der moderne OpenGL-Kernmodus ist stark auf Shader angewiesen:
| Merkmal | veranschaulichen |
|---|---|
| Plattformübergreifende Kompatibilität | Läuft auf Windows, Linux, macOS (über Übersetzungsschicht) und mobilen Geräten (OpenGL ES). |
| Zustandsmaschinenmodell | OpenGL funktioniert wie eine riesige Zustandsmaschine. Entwickler legen den Status fest (z. B. aktuelle Farbe, gebundene Textur) und führen dann Zeichenanweisungen aus. |
| GLSL-Sprache | Verwenden Sie die C-ähnliche OpenGL-Shading-Sprache, um GPU-Programme zu schreiben, die über leistungsstarke Rechenfunktionen verfügen. |
| Verlängerungsmechanismus | Ermöglichen Sie Hardwareherstellern, durch Extension neue Grafikkartenfunktionen einzuführen, ohne den API-Standard zu aktualisieren. |
Hinweis: Obwohl Vulkan als Nachfolger von OpenGL angesehen wird und Hardwaresteuerung auf niedrigerer Ebene bietet, ist OpenGL aufgrund seiner relativ einfachen Einstiegsbarriere und umfangreichen Dokumentation immer noch die erste Wahl für das Erlernen der Entwicklung von Grafikprogrammen.
ManimGL ist eine effiziente Variante von Manim zum Erstellen mathematischer Animationen, die sich auf die OpenGL-Beschleunigung konzentriert, um die Rendering-Geschwindigkeit zu verbessern.
Mit pip installieren:
pip install manimgl
Oder holen Sie sich die neueste Version von GitHub:
git clone https://github.com/ManimCommunity/ManimGL.git
cd ManimGL
pip install -e .
Rendern Sie eine einfache Szene mit ManimGL:
from manimlib import *
class HelloManim(Scene):
def construct(self):
text = Text("Hello, ManimGL!")
self.play(Write(text))
self.wait(2)
Befehl ausführen:
manimgl script.py HelloManim
Wenn Sie auf Installations- oder Betriebsprobleme stoßen, versuchen Sie Folgendes:
pip install --upgrade pipBlender ist eine Open-Source-All-in-One-3D-Erstellungssoftware, die eine komplette Pipeline von Modellierung, Animation, Rendering bis hin zu Compositing und Videobearbeitung abdeckt. Es ist bekannt für seine leistungsstarke Cycles-Rendering-Engine und die flexible Python-API und ein zentrales Tool für unabhängige Entwickler sowie kleine und mittlere Studios.
Die Architektur von Blender ist äußerst kompakt und nutzt mehrere dedizierte Engines für die Zusammenarbeit:
| Merkmal | veranschaulichen | |
|---|---|---|
| Python API | Nahezu die gesamte Benutzeroberfläche und die Funktionen können über Python-Skripte gesteuert werden, was die Entwicklung von Add-ons erleichtert. | Es unterstützt nativ Windows, macOS (Apple Silicon) und Linux und das Dateiformat (.blend) ist auf allen Plattformen universell. |
| Integrierte Pipeline | Integrierter Video-Editor (VSE) und Compositor (Compositor), kein Softwarewechsel erforderlich, um die Postproduktion abzuschließen. |
Für Entwickler, die 3D-Materialien stapelweise verarbeiten oder die Modellierung automatisieren müssen, bietet Blender einen leistungsstarken Hintergrundmodus:
blender -b -P script.pykönnen Sie automatisierte Aufgaben ausführen, ohne die grafische Benutzeroberfläche öffnen zu müssen.Hinweis: Blender wird sehr schnell aktualisiert (etwa eine Version alle drei Monate). Bei der Entwicklung von Skripten müssen Sie auf Änderungen der API-Kompatibilität zwischen verschiedenen Versionen achten.
bpyDas Modul ist eine Python-API, die speziell für Blender entwickelt wurde und es Benutzern ermöglicht, 3D-Bilder und Animationen über Code in Blender zu erstellen, zu ändern und zu verwalten.
bpy?bpyist die Abkürzung für Blender Python, eine Reihe von Funktionsbibliotheken, die die Verwendung von Python-Skripten zur Ausführung der Kernfunktionen von Blender ermöglichen. durchbpy, Benutzer können:
bpyHauptmodule und Funktionen vonbpyEnthält mehrere Untermodule, jedes mit einem bestimmten Zweck:
bpy.data: Zugriff auf alle Daten in Blender (wie Objekte, Materialien, Szenen usw.).bpy.ops: Operationsklasse, Operationen ausführen (z. B. Objekte verschieben, drehen, skalieren).bpy.context: Greifen Sie auf den aktuellen Blender-Status zu (z. B. ausgewählte Objekte oder aktivierte Werkzeuge).bpy.types: Definieren Sie alle Datenstrukturen in Blender (wie Mesh, Kamera, Material).bpy.utils: Bietet einige Hilfsfunktionen (z. B. Laden und Entladen von Skripten).Folgendes wird verwendetbpyEinfaches Beispiel für die Erstellung eines Würfels:
bpy importieren
# Vorhandene Objekte löschen
bpy.ops.object.select_all(action='SELECT')
bpy.ops.object.delete(use_global=False)
#Würfel hinzufügen
bpy.ops.mesh.primitive_cube_add(size=2, enter_editmode=False, align='WORLD', location=(0, 0, 0))
bpy?verwendenbpyErmöglicht die Automatisierung sich wiederholender Aufgaben und die Erstellung komplexer Modelle, Animationen und Renderings. Für Profis wie Spieledesigner, Architekten und Animatoren,bpyZur Optimierung des Arbeitsablaufs stehen leistungsstarke Tools zur Verfügung.
Um mehr darüber zu erfahrenbpyEinzelheiten zum Modul finden Sie in der offiziellen Dokumentation:Blender Python API Documentation
Unity ist eine leistungsstarke Spieleentwicklungs-Engine und -Plattform für die Erstellung von 2D- und 3D-Spielen, interaktiven Anwendungen sowie Virtual-Reality- (VR) und Augmented-Reality-Erlebnissen (AR). Es bietet eine benutzerfreundliche Oberfläche und umfangreiche Tools, die sowohl für Anfänger als auch für professionelle Entwickler geeignet sind.
Unity ist eine leistungsstarke und flexible Entwicklungs-Engine, die Entwicklern eine breite Palette an Anwendungsszenarien und Tool-Unterstützung bietet. Unabhängig davon, ob Sie Anfänger oder professioneller Entwickler sind, können Sie mit Unity schnell hochwertige 2D- und 3D-Spiele und interaktive Anwendungen erstellen.
Cocos ist das weltweit führende Open-Source-Framework für die Entwicklung mobiler Spiele, einschließlich des frühen rein codegesteuerten Cocos2d-x und des modernen, voll ausgestatteten Editors Cocos Creator. Es ist für seine leichte, effiziente und plattformübergreifende Unterstützung bekannt und das bevorzugte Tool für die Entwicklung von 2D- und 3D-Mobilspielen und Minispielen (wie WeChat-Minispielen und TikTok-Minispielen).
Die Cocos-Familie ist hauptsächlich in zwei wichtige Entwicklungsstadien unterteilt, um den Bedürfnissen unterschiedlicher Entwicklungsgewohnheiten gerecht zu werden:
| Merkmal | veranschaulichen |
|---|---|
| Extrem plattformübergreifend | Unterstützt iOS, Android, Windows, Mac und verschiedene Webbrowser und Instant-Game-Plattformen. |
| Hochleistungs-Renderer | Die unterste Schicht nutzt die selbst entwickelte GFX-Abstraktionsschicht, die mehrere Grafik-Backends wie Vulkan, Metal, DirectX und WebGL unterstützt. |
| Leicht und sperrig | Der Engine-Kern ist kompakt und das verpackte Spiel startet schnell, sodass es für Plattformen mit begrenzten Netzwerkumgebungen oder hohen Anforderungen an die Lesegeschwindigkeit geeignet ist. |
| TypeScript-Unterstützung | Cocos Creator integriert TypeScript umfassend, bietet vollständige Typprüfung und Syntax-Eingabeaufforderungen und verringert die Schwierigkeit bei der Verwaltung großer Projekte. |
Hinweis: Cocos Creator wurde jetzt auf Version 3.x weiterentwickelt, die die Kerntechnologien von 2D und 3D vollständig integriert. Entwickler können 2D-UI- und 3D-Szenen im selben Projekt mischen und produzieren.
Die Entwicklung eines Sprachsynthesesystems gliedert sich normalerweise in drei Phasen. Das erste istFrontend-VerarbeitungKonvertieren Sie den Originaltext in sprachliche Merkmale (z. B. Wortsegmentierung, Konvertierung phonetischer Symbole, Prosodievorhersage). gefolgt vonAkustisches ModellOrdnen Sie diese Merkmale einer akustischen Darstellung zu (z. B. dem Mel-Spektrum); EndlichVocoder, verantwortlich für die Reduzierung der akustischen Darstellung in für den Menschen hörbare Wellenform-Audio.
| Kategorie | Werkzeuge/Modelle | Entwicklungsfunktionen |
|---|---|---|
| Open-Source-Framework | Coqui TTS / ESPnet | Das modulare Design unterstützt eine große Anzahl vorab trainierter Modelle und Feinabstimmung |
| leichter Motor | MeloTTS / Kokoro | CPU-freundlich, geeignet für Edge Computing oder eingebettete Geräte |
| Gesprächsoptimierung | ChatTTS | Speziell für gesprochene Dialoge konzipiert und unterstützt das Einfügen von Lachen, Schlagworten und anderen Details |
| Modell für Forschungszwecke | StyleTTS 2 / VITS | Basierend auf dem Generative Adversarial Network (GAN) kommt die Klangqualität der von echten Menschen sehr nahe |
Um ein TTS mit einer bestimmten Klangfarbe zu entwickeln, müssen Sie einen hochwertigen Datensatz vorbereiten (normalerweise 1 bis 10 Stunden Aufnahmen und entsprechender Text). Wird häufig von Entwicklern verwendetTransferlernenDie Feinabstimmung der Technologie bei großen Basismodellen reduziert den Datenvolumenbedarf erheblich und verbessert die Klangähnlichkeit und Natürlichkeit.
Für die meisten Anwendungsentwickler ist der direkte Aufruf ausgereifter Cloud-APIs die effizienteste Lösung. Zum BeispielElevenLabs APISorgen Sie für einen starken emotionalen Ausdruck,Microsoft Azure Speech SDKBietet die umfassendste SSML-Unterstützung (Speech Synthesis Markup Language), sodass Entwickler Pausen, Stress und Ton über Tags präzise steuern können. Auch,OpenAI TTS APIAufgrund seiner einfachen Benutzeroberfläche und der extrem geringen Argumentationsverzögerung ist es in interaktiven Echtzeitanwendungen sehr beliebt.
In den frühen Phasen der Entwicklung wird empfohlen, der Balance zwischen „Latenz (RTF)“ und „Klangqualität“ Priorität einzuräumen. Wenn es auf Echtzeit-Kundenservice angewendet wird, ist Streaming mit geringer Latenz der Schlüssel; Wenn es auf Hörbücher angewendet wird, sollte der Verfolgung eines Modells mit Fähigkeiten zur Verarbeitung langer Texte und einem ausgeprägten Rhythmusgefühl Vorrang eingeräumt werden. Darüber hinaus muss auf den G2P-Unterstützungsstatus (Character to Phoneme) jeder Sprache geachtet werden, der direkt das korrekte Verständnis der Aussprache bestimmt.
CosyVoice 2 ist eine erweiterte Version des Open-Source-Sprachsynthesemodells (TTS) von Alibaba. Im Vergleich zur ersten Generation wurden bedeutende Durchbrüche bei der Aussprachegenauigkeit, der feinkörnigen Emotionskontrolle und der Latenz beim Streamen von Argumenten erzielt. Es unterstützt nicht nur hochwertiges Tonklonen, sondern führt auch befehlssteuerbare Technologie ein, um KI-Sprache „menschlicher“ zu machen.
CosyVoice 2 nutzt „Text-Speech-Sprachmodell“ und „Flow Matching“-Technologie, um eine durchgängige Sprachgenerierung zu erreichen:
| Funktion | CosyVoice 2 Beschreibung |
|---|---|
| Mehrsprachige Unterstützung | Unterstützt Chinesisch, Englisch, Japanisch, Koreanisch und mehrere Dialekte (Kantonesisch, Sichuan, Shanghainisch, Tianjin usw.). |
| Emotions-/Befehlskontrolle | Stimmemotion und Sprechgeschwindigkeit können durch Befehle (z. B. „Sprich fröhlich“, „Sprich wütend“) gesteuert werden. |
| Superschnelles Klonen in 3 Sekunden | Mit nur 3 bis 10 Sekunden Beispielaudio kann eine Zero-Shot-High-Fidelity-Soundwiedergabe erreicht werden. |
| gemischte Sprachsynthese | Es unterstützt das Mischen mehrerer Sprachen Chinesisch und Englisch im selben Text und die Klangfarbe bleibt äußerst konsistent. |
Hinweis: Bei der lokalen Bereitstellung von CosyVoice 2 wird empfohlen, eine NVIDIA-Grafikkarte mit mindestens 8 GB Videospeicher auszustatten und den offiziell empfohlenen zu verwendenvLLMBeschleunigen Sie das Framework für eine optimale RTF-Leistung (Echtzeitrate).
CosyVoice 2 wurde auf Basis von Python entwickelt. Da es sich um eine komplexe Audioverarbeitung und Deep-Learning-Umgebungen handelt, wird die Verwendung dringend empfohlen.CondaVirtuelle Umgebung für isolierte Installation. Derzeit bietet Linux die höchste offizielle Unterstützung, während Windows-Benutzern die Bereitstellung über WSL2 oder bestimmte Community-Revisionen empfohlen wird.
Bevor Sie beginnen, stellen Sie bitte sicher, dass auf Ihrem System der NVIDIA-Treiber (empfohlen 8 GB oder mehr Videospeicher) und Conda installiert ist.
conda create -n cosyvoice2 python=3.10
conda activate cosyvoice2
Pynini ist die Kernkomponente, die die Textnormalisierung übernimmt und über Conda installiert werden muss:
conda install -y -c conda-forge pynini==2.1.5
git clone --recursive https://github.com/FunAudioLLM/CosyVoice.git
cd CosyVoice
pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/
Für CosyVoice 2 müssen vorab trainierte Modellgewichte heruntergeladen werden. Sie können den Download über ein Python-Skript automatisieren:
aus modelscope import snapshot_download
# Laden Sie das 0,5B-Hauptmodell herunter
snapshot_download('iic/CosyVoice2-0.5B', local_dir='pretrained_models/CosyVoice2-0.5B')
# Laden Sie Ressourcen zur Textnormalisierung herunter
snapshot_download('iic/CosyVoice-ttsfrd', local_dir='pretrained_models/CosyVoice-ttsfrd')
CozyVoice 2 bietet eine Vielzahl von Modi, die Ihren Anforderungen entsprechen, vom schnellen Überspielen bis zum professionellen Klonen:
| Nutzungsmuster | Bedienungsanleitung | Anwendbare Szenarien |
|---|---|---|
| Starten Sie WebUI | implementierenpython webui.py, öffnen Sie die visuelle Oberfläche im Browser. |
Manuelles Überspielen und schnelle Testeffekte. |
| 3 Sekunden extrem schnelle Wiedergabe | Laden Sie 3–10 Sekunden Referenzaudio und den entsprechenden Text hoch, um das Klonen von Sounds zu erreichen. | Personalisiertes Sprachpaket, Self-Media-Synchronisation. |
| Sprach-/dialektübergreifend | Geben Sie chinesischen Text ein und wählen Sie die Tonausgabe für Kantonesisch oder Sichuan-Dialekt. | Produktion lokalisierter Inhalte. |
| Befehlssteuerung | Fügen Sie vor dem Text einen Befehl hinzu (z. B. [Lachen], [wütend]). | Hörbücher, dramatisierte Voice-Overs. |
Wenn Sie CosyVoice 2 in Ihr eigenes Python-Projekt integrieren möchten (z. B. das Automatisierungsskript von Kdenlive):
aus cosyvoice.cli.cosyvoice importieren CosyVoice2
Torchaudio importieren
#Initialisieren Sie das Modell
cosyvoice = CosyVoice2('pretrained_models/CosyVoice2-0.5B')
# Schlussfolgerung ausführen (am Beispiel einer vorab trainierten Klangfarbe)
Ausgabe = cosyvoice.inference_sft('Hallo, ich bin ein Sprachassistent mit künstlicher Intelligenz.', 'Chinesin weiblich')
# Nachricht speichern
Torchaudio.save('output.wav', Output['tts_speech'], cosyvoice.sample_rate)
Hinweis: Wenn Sie unter Windows installieren und auf Folgendes stoßen:soxoder Kompilierungsfehler, lesen Sie bitte GitHub-Problem Nr. 1046 oder versuchen Sie, ein Ein-Klick-Installationspaket zu verwenden.
Betriebssystem importieren
Taschenlampe importieren
Torchaudio importieren
Import bzgl
von cosyvoice.cli.cosyvoice importieren Sie CosyVoice
#CosyVoice2-Modell initialisieren
# Stellen Sie sicher, dass der Pfad auf den Ordner verweist, der die Kerngewichtungen und Konfigurationsdateien enthält
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')
def segment_text(text, limit=80):
„““
Teilen Sie lange Artikel anhand von Satzzeichen in Segmente angemessener Länge ein, um Unterbrechungen bei der Spracherzeugung oder einen Speicherüberlauf zu vermeiden.
„““
# Sperren Sie die übliche Satzende-Interpunktion in Chinesisch und Englisch
Muster = r'([.!?;!\?\n])'
parts = re.split(Muster, Text)
Stücke = []
aktuell = ""
für i in range(0, len(parts)-1, 2):
Satz = Teile[i] + Teile[i+1]
wenn len(current) + len(sentence) <= limit:
aktueller += Satz
sonst:
falls aktuell:
chunks.append(current.strip())
aktuell=Satz
falls aktuell:
chunks.append(current.strip())
return [c für c in Blöcken, wenn c]
def run_tts_pipeline(text, spk_id, file_name):
„““
Führen Sie Langtextinferenzen durch und kombinieren Sie Informationen auf Tensorebene
„““
text_list = segment_text(text)
Combined_tensors = []
print(f"Wird verarbeitet, der Artikel wurde in {len(text_list)} Abschnitte unterteilt")
für idx segmentieren in enumerate(text_list):
# Rufen Sie die CosyVoice2-Inferenzschnittstelle auf
# Kann auf inference_zero_shot umgestellt werden, um Referenzaudio zu verwenden
Ergebnis = cosyvoice.inference_sft(segment, spk_id)
Combined_tensors.append(result['tts_speech'])
print(f"Abgeschlossen: {idx + 1}/{len(text_list)}")
wenn kombinierte_Tensoren:
# Verwenden Sie Torch.cat für nahtloses Spleißen
final_audio = Torch.cat(combined_tensors, dim=1)
# Als WAV speichern, die empfohlene Abtastrate beträgt 22050 Hz
Torchaudio.save(Dateiname, final_audio, 22050)
print(f"Aufgabe erfolgreich! Datei gespeichert unter: {file_name}")
if __name__ == "__main__":
long_content = „Fügen Sie den Inhalt Ihres langen Artikels hier ein, und dieser Code übernimmt automatisch die Segmentierung und Zusammenführung.“
run_tts_pipeline(long_content, 'Chinese Female', 'output_v2.wav')
Taschenlampe importieren
Torchaudio importieren
Import bzgl
von cosyvoice.cli.cosyvoice importieren Sie CosyVoice
#CosyVoice 2 initialisieren
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')
def format_srt_time(Sekunden):
""Sekunden in das SRT-Zeitformat HH:MM:SS,mmm konvertieren""
Millisekunden = int((Sekunden - int(Sekunden)) * 1000)
Sekunden = int(Sekunden)
Minuten, Sekunden = divmod(Sekunden, 60)
Stunden, Minuten = divmod(Minuten, 60)
return f"{Stunden:02}:{Minuten:02}:{Sekunden:02},{Millisekunden:03}"
def generic_audio_and_srt(full_text, Speaker_id, Output_wav, Output_srt):
# Lange Artikel nach Satzzeichen aufteilen
segmente = re.split(r'([.!?;!\?\n])', full_text)
Stücke = []
für i in range(0, len(segmente)-1, 2):
text = (Segmente[i] + Segmente[i+1]).strip()
wenn Text: chunks.append(text)
audio_list = []
srt_entries = []
aktuelle_zeit = 0,0
sample_rate = 22050
print(f"Beginne mit der Verarbeitung von {len(chunks)} Text ...")
für i, chunk in enumerate(chunks):
# Argumentation zur Generierung eines Sprachtensors
Ausgabe = cosyvoice.inference_sft(chunk, Speaker_id)
audio_tensor = Ausgabe['tts_speech']
audio_list.append(audio_tensor)
# Berechnen Sie die Anzahl der Sekunden, die dieses Audiosegment dauert (Tensorlänge / Abtastrate).
Dauer = audio_tensor.shape[1] / Sample_rate
end_time = aktuelle_zeit + Dauer
# SRT-Einträge erstellen
srt_entries.append(
f"{i+1}\n"
f"{format_srt_time(current_time)} --> {format_srt_time(end_time)}\n"
f"{chunk}\n"
)
current_time = end_time
print(f"Ausrichtung des Segments {i+1} abgeschlossen")
# Audio zusammenführen und speichern
Combined_audio = Torch.cat(audio_list, dim=1)
Torchaudio.save(output_wav, Combined_audio, Sample_rate)
# SRT-Datei speichern
mit open(output_srt, 'w',kodierung='utf-8') als f:
f.write("\n".join(srt_entries))
print(f"Abgeschlossen! Audio: {output_wav}, Untertitel: {output_srt}")
if __name__ == "__main__":
Article = „Dies ist ein Beispiel für einen langen Artikel. [Gelächter] Wir können die Zeit jedes Satzes genau berechnen. Auf diese Weise wird er beim Import in Kdenlive automatisch ausgerichtet.“
generic_audio_and_srt(article, 'Chinese Female', 'output.wav', 'output.srt')
Betriebssystem importieren
Taschenlampe importieren
Torchaudio importieren
Import bzgl
von cosyvoice.cli.cosyvoice importieren Sie CosyVoice
#Initialisieren Sie das Modell
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')
def segment_text_with_tags(text, limit=100):
„““
Teilen Sie langen Text auf und achten Sie dabei darauf, dass Tags wie [Gelächter] nicht abgeschnitten werden
„““
# Passen Sie chinesische Satzzeichen und Zeilenumbrüche an
Muster = r'([.!?;!\?\n])'
parts = re.split(Muster, Text)
Stücke = []
aktuell = ""
für i in range(0, len(parts)-1, 2):
Satz = Teile[i] + Teile[i+1]
wenn len(current) + len(sentence) <= limit:
aktueller += Satz
sonst:
falls aktuell:
chunks.append(current.strip())
aktuell=Satz
falls aktuell:
chunks.append(current.strip())
Stücke zurückgeben
def generic_expressive_audio(text, spk_id, output_path):
„““
Formulieren Sie lange Reden mit emotionalen Anweisungen
„““
segmente = segment_text_with_tags(text)
audio_data = []
für idx, seg in enumerate(segments):
# Verwenden Sie den Anweisungsmodus für eine bessere Tag-Ausführung
# Wenn Sie den SFT-Modus verwenden, werden auch grundlegende Tags unterstützt, der Anweisungsmodus ist jedoch präziser für die emotionale Kontrolle.
Ausgabe = cosyvoice.inference_instruct(seg, spk_id, 'Kontrollton und Emotion')
audio_data.append(output['tts_speech'])
print(f"Verarbeitung der Absätze {idx+1}/{len(segments)}")
wenn audio_data:
final_wav = Torch.cat(audio_data, dim=1)
Torchaudio.save(output_path, final_wav, 22050)
print(f"Nachricht mit Emotionsbefehl wurde gespeichert: {output_path}")
if __name__ == "__main__":
#Beispiel: Langtext mit eingebetteten Emotions-Tags
rich_text = „Das sind großartige Neuigkeiten! [Gelächter] Ich kann es nicht glauben. [Überraschung] Aber wenn das schief geht, [wütend] werde ich sehr wütend sein.“
generate_expressive_audio(rich_text, 'Chinese Female', 'expressive_output.wav')
Die Entwicklung eines ASR-Systems (Automatic Speech Recognition) folgt normalerweise dem folgenden Kernpfad. Das erste istAudio-Vorverarbeitung(z. B. Rauschunterdrückung, VAD-Sprachaktivitätserkennung und Merkmalsextraktion); dann eintretenModellinferenz, Umwandlung akustischer Signale in Textwahrscheinlichkeit; endlich durchNachbearbeitung(z. B. Interpunktionswiederherstellung, inverse Textnormalisierung ITN), um den endgültigen Text zu erstellen. Moderne Entwicklungstrends haben sich vom traditionellen HMM zur „End-to-End“-Architektur neuronaler Netzwerke verlagert, was die Entwicklungskomplexität erheblich vereinfacht.
| Kategorie | Werkzeuge/Modelle | Entwicklungsfunktionen für 2026 |
|---|---|---|
| Basismodell | OpenAI Whisper (V3) | Industriestandard, mit starker Störfestigkeit und Mehrsprachenunterstützung, eignet es sich am besten für die Transkription langer Audiodateien. |
| Live-Streaming | NVIDIA Parakeet-TDT | Entwickelt für extrem niedrige Latenz, unterstützt Streaming und ist für KI-Sprachassistenten geeignet. |
| Inländische Optimierung | FunASR / Yating-Motor | Es ist umfassend für chinesische, chinesisch-englische gemischte und taiwanesische Akzente optimiert und unterstützt Zeitstempel- und Sprechererkennung. |
| Bereitstellungsframework | Faster-Whisper / Sherpa-ONNX | Verbessert die Inferenzgeschwindigkeit erheblich und reduziert die Speichernutzung, sodass es für die Ausführung auf Edge-Geräten oder lokalen Servern geeignet ist. |
Konzentrieren Sie sich bei der Entwicklung eines ASR-Systems auf die ÜberwachungCER (Zeichenfehlerrate)Genauigkeit zu beurteilen. Für Sofortbewerbungen,RTF (Echtzeitfaktor)UndLatenzEntscheidend ist, dass die Sprachverarbeitung viel schneller erfolgt als das Sprechen. Der Entwicklungsschwerpunkt im Jahr 2026 hat sich auf „Langtextgedächtnis“ und „Kontextbewusstsein“ verlagert, beispielsweise die Integration von LLM, um Identifikationsverzerrungen in der Fachterminologie oder in bestimmten Branchen zu korrigieren.
Wenn Entwickler einen schnellen Start anstreben, rufen sie normalerweise Cloud-APIs auf.DeepgramUndAssemblyAIEs wird im Jahr 2026 wegen seiner geringen Latenz und umfangreichen Metadaten (wie Emotionserkennung, Schlüsselzusammenfassungen) bevorzugt.Microsoft Azure Speech SDKEs bietet die umfassendste Schnittstelle zur Feinabstimmung benutzerdefinierter Modelle (Custom Speech), die es Entwicklern ermöglicht, Textdaten in bestimmten Feldern hochzuladen, um das Problem der ungenauen Erkennung spezieller Vokabeln wie Medizin und Recht zu lösen.
Für einzelne Entwickler wird die Verwendung empfohlenHugging Face TransformersBibliotheksabgleichPyTorchFühren Sie ein kurzes Experiment durch. Wenn das Anwendungsszenario den Datenschutz betrifft (z. B. Krankenakten), sollten Sie es verwendenWhisper.cppoderVoskFühren Sie eine vollständig Offline-lokale Bereitstellung durch. Wenn Sie einen großen Sprachdienst aufbauen müssen, wird die Verwendung empfohlenTriton Inference ServeroderDockerDie Containerisierungstechnologie ermöglicht eine effiziente Planung und Erweiterung des ASR-Modells.
HTML5<canvas>Ein Element ist ein Bereich, der mit JavaScript gezeichnet werden kann und die Darstellung von 2D und 3D auf der Webseite ermöglicht
Bilder. Es handelt sich um einen Container, der Zeichenvorgänge über Programmiercode ausführen kann, z. B. das Zeichnen von Linien, Grafiken und Bildern. Es eignet sich für Anwendungen wie Spiele und Grafikbearbeitung, die eine Echtzeitgenerierung erfordern.
Das Folgende istcanvasGrundlegende Syntax von Elementen:
<canvas id="myCanvas" width="500" height="500"></canvas>
dabei seincanvasUm Inhalte auf einem Element zu zeichnen, müssen Sie verwendengetContextVerfahren. Mit dieser Methode können Sie den Zeichnungskontext ermitteln. Die derzeit am häufigsten verwendete Option ist „2d“. es wird a zurückgegebenCanvasRenderingContext2DObjekt, das viele Zeichenmethoden bereitstellt.
Beispielsweise erhält der folgende JavaScript-Codecanvas2D-Zeichnungskontext für:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
verwendengetContext("2d")Der erhaltene Zeichenkontext kann grundlegende Zeichenvorgänge wie das Zeichnen von Linien, das Zeichnen von Rechtecken und das Füllen von Farben ausführen. Zum Beispiel:
moveTo(x, y)UndlineTo(x, y)Methode zum Definieren und Verwenden von Liniensegmentenstroke()Zeichne die Linien.fillRect(x, y, width, height)Zeichnen Sie ein gefülltes Rechteck, oderstrokeRect(x, y, width, height)Zeichnen Sie ein hohles Rechteck.fillStyleLegen Sie beispielsweise die Füllfarbe festctx.fillStyle = "blue";Beispielcode:
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100); // Zeichne ein blaues Rechteck
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.streich(); // Zeichne eine rote Linie
Zum LöschencanvasBilder in können verwendet werdenclearRect(x, y, width, height)Verfahren. Der Code zum Löschen der gesamten Leinwand lautet beispielsweise:
ctx.clearRect(0, 0, canvas.width, canvas.height);
verwendenrequestAnimationFrame()Es können flüssige Animationseffekte erzielt werden. Dynamische Effekte können erzielt werden, indem der Inhalt des vorherigen Frames gelöscht wird, bevor der Bildschirm jedes Mal aktualisiert wird. Hier ist ein einfaches Animationsbeispiel:
Funktion draw() {
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
ctx.fillRect(x, y, 50, 50); // Zeichne ein Quadrat
x += 1; // Position aktualisieren
requestAnimationFrame(draw);
}
ziehen();
Die Größe des Canvas sollte in HTML festgelegt werden. Das Ändern der Größe mithilfe von CSS kann zu Bildverzerrungen führen. Auch,canvasNicht als Ersatz für hochauflösende Bilder gedacht, sondern zur sofortigen Generierung und dynamischen Zeichnung.
style.transformEs ist eine der Eigenschaften von CSS und kann verwendet werden, um 2D- oder 3D-Transformationsoperationen wie Drehung, Skalierung, Verschiebung und Neigung an Elementen durchzuführen.
scale()Es handelt sich um die „Zoom“-Funktion und die Syntax lautet:
transform: scale(sx [, sy]);
In:
sx:Horizontaler Zoomfaktorsy: Vertikaler Skalierungsfaktor (kann weggelassen werden, wenn er weggelassen wird, ist er gleichsx)const el = document.getElementById("target");
el.style.transform = "scale(1.5)"; // Sowohl x als auch y werden um das 1,5-fache vergrößert
el.style.transform = "scale(1.5, 0.5)"; // Horizontal um das 1,5-fache vergrößern und vertikal auf die Hälfte verkleinern
---
scale()ist eine „visuelle Transformation“, die die tatsächlichen DOM-Eigenschaften des Elements (z. B.offsetWidthoderclientWidth), wird sich aber änderngetBoundingClientRect()Rückgabewert.
el.getBoundingClientRect().width // Reflektiert den Einfluss der Skalierung
el.offsetWidth //Originalbreite, nicht von der Skalierung betroffen
---
<style>
#box {
width: 100px;
height: 100px;
background: skyblue;
transition: transform 0.3s;
}
#box:hover {
transform: scale(1.5);
}
</style>
<div id="box"></div>
---
Das folgende Beispiel stammt aus HTML<table>Daten lesen, nativ verwenden<canvas>APIsarc()Zeichnen Sie Kreisdiagramme ohne externe Pakete.
<table id="dataTable" border="1" style="margin:10px auto;">
<tr><th>Kategorie</th><th>Wert</th></tr>
<tr><td>Apple</td><td>30</td></tr>
<tr><td>Banane</td><td>15</td></tr>
<tr><td>Cherry</td><td>25</td></tr>
<tr><td>Mango</td><td>20</td></tr>
</table>
<canvas id="pieCanvas" width="400" height="400" style="display:block; margin:auto; border:1px solid #aaa;"></canvas>
---
const table = document.getElementById("dataTable");
const canvas = document.getElementById("pieCanvas");
const ctx = canvas.getContext("2d");
const labels = [];
const values = [];
for (let i = 1; i < table.rows.length; i++) { // 跳過表頭
const row = table.rows[i];
labels.push(row.cells[0].textContent);
values.push(parseFloat(row.cells[1].textContent));
}
// 計算總和
const total = values.reduce((a, b) =>a + b, 0);
//Zeichne ein Kreisdiagramm
let startAngle = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
konstanter Radius = 120;
// Automatische Farbanpassung
const farben = ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40"];
für (sei i = 0; i< values.length; i++) {
const sliceAngle = (values[i] / total) * 2 * Math.PI;
const endAngle = startAngle + sliceAngle;
// 畫圓餅區塊
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = colors[i % colors.length];
ctx.fill();
// 標示文字
const midAngle = startAngle + sliceAngle / 2;
const textX = centerX + Math.cos(midAngle) * (radius + 20);
const textY = centerY + Math.sin(midAngle) * (radius + 20);
ctx.fillStyle = "black";
ctx.font = "14px sans-serif";
ctx.textAlign = "center";
ctx.fillText(labels[i], textX, textY);
startAngle = endAngle;
}
// 標題
ctx.font = "16px bold sans-serif";
ctx.textAlign = "center";
ctx.fillText("水果銷售比例", centerX, centerY - radius - 30);
---
arc()Zeichnen Sie jeden Sektor.Sie können Mausereignisse hinzufügen (z. B. Bewegen des Mauszeigers zum Vergrößern oder Anzeigen des Prozentsatzes) oder verwendenrequestAnimationFrame()Fügen Sie Animationseffekte hinzu. Möchten Sie, dass ich Ihnen beim Hinzufügen einer Mouseover-Version helfe, die den Datenprozentsatz anzeigt?
SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafikformat, das Linien, Grafiken und Text auf Webseiten zeichnen kann und Skalierung und Animation unterstützt. Im Gegensatz zu Bitmaps wird SVG beim Vergrößern oder Verkleinern nicht verzerrt und eignet sich daher für Anwendungen wie Diagramme, ICONs, Karten und Flussdiagramme.
<svg width="200" height="100">
<rect x="10" y="10" width="50" height="50" fill="blue" />
<circle cx="100" cy="35" r="25" fill="green" />
<line x1="150" y1="10" x2="190" y2="60" Stroke="red" Stroke-width="2" />
<text x="10" y="90" font-size="14" fill="black">Dies ist SVG</text>
</svg>
<rect>:Rechteck<circle>: rund<ellipse>:Oval<line>: Liniensegment<polyline>、<polygon>: Polylinie und Polygon<path>: Freier Zeichenpfad (kann Kurven und komplexe Formen zeichnen)<text>:Text<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="orange" onclick="alert('Sie haben auf den Kreis geklickt')" />
</svg>
durchlässigCSSoder<animate>Etikettenanimation:
<circle cx="30" cy="50" r="20" fill="blue">
<animate attributeName="cx" from="30" to="170" dur="2s" repeatCount="indefinite" />
</circle>
<svg id="mysvg" width="200" height="100">
<circle id="c1" cx="50" cy="50" r="30" fill="gray" />
</svg>
<script>
document.getElementById("c1").setAttribute("fill", "red");
</script>
SVG ist einer der sehr wichtigen Grafikstandards in Web-Frontends. Es verfügt über eine hohe Auflösung, Interaktivität und Animation und kann nahtlos in HTML/CSS/JavaScript integriert werden. Geeignet für grafische Darstellungsszenarien, die eine präzise, skalierbare Leistung erfordern.
Verfügbar in SVG über<symbol>oder<defs>Definieren Sie das Muster einmal und verwenden Sie es erneut<use>Wiederholen Sie Referenzen an anderer Stelle, sparen Sie Code und verbessern Sie die Konsistenz.
<svg width="0" height="0" style="position:absolute">
<symbol id="star" viewBox="0 0 100 100">
<polygon points="50,5 61,39 98,39 68,59 79,91 50,70 21,91 32,59 2,39 39,39"
fill="gold" stroke="black" stroke-width="2"/>
</symbol>
</svg>
<svg width="200" height="100">
<use href="#star" x="0" y="0" width="50" height="50"/>
<use href="#star" x="60" y="0" width="50" height="50" fill="red"/>
<use href="#star" x="120" y="0" width="50" height="50" fill="blue"/>
</svg>
<symbol>: Definieren Sie den Musterinhalt und können Sie ihn wiederholt verwenden<use>: Einfügemuster, Position und Größe können angegeben werdenhref: Zeigt auf die ID des Symbols (die alte Schreibweise lautetxlink:href)<use>Kann geändert werdenfill、strokeund andere Attribute, wodurch die ursprüngliche Definition überschrieben wird.
<use href="#id">Für modernes Schreiben (wird von älteren Browsern verwendetxlink:href)<symbol>Platzieren Sie es oben im DOM oder verstecken Sie es vollständigdurch<symbol> + <use>SVG kann eine komponentenbasierte und modulare Grafikentwicklung realisieren, die wiederverwendet werden kann und Stile und Positionen bequem verwalten kann. Es eignet sich sehr gut für Grafikdesign- und Datenvisualisierungsanwendungen.
WebGL (Web Graphics Library) ist eine Reihe von JavaScript-APIs, die auf OpenGL ES basieren und HTML5 im Browser verwenden können<canvas>Elements führt hardwarebeschleunigtes Zeichnen von 2D- und 3D-Grafiken ohne Plug-Ins durch.
Zeichne ein farbiges Dreieck:
<canvas id="glCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
Alert("Ihr Browser unterstützt WebGL nicht");
}
const vertexShaderSource = `
Attribut vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1, 0, 0, 1); // rot
}
`;
Funktion createShader(gl, type, source) {
const Shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
Rückgabe-Shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, neues Float32Array([
0, 1,
-1, -1,
1, -1
]), gl.STATIC_DRAW);
const posAttribLoc = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(posAttribLoc);
gl.vertexAttribPointer(posAttribLoc, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
WebGL bietet Webentwicklern GPU-beschleunigte 3D-Grafik-Rendering-Funktionen und ist eine der Kerntechnologien für moderne Webspiele, digitale Kunst, Simulation und Visualisierung. Obwohl natives WebGL relativ niedrig ist, kann es mit Funktionsbibliotheken höherer Ordnung verwendet werden, um den Entwicklungsprozess zu vereinfachen.
SpirographEs handelt sich um ein geometrisches Muster, mit dem komplexe Formen erstellt werden. Das Prinzip besteht darin, die Drehung zweier Kreise zu nutzen, um mehrere Kreise und Wellenkurven darzustellen. Diese Art von Grafiken wird häufig im künstlerischen Schaffen und in der Ausbildung verwendet, um die geometrische Schönheit der Mathematik zu zeigen.
Hier ist ein Beispiel für die Implementierung eines Spirographen mit HTML5s <canvas> Element und JavaScript:
| Bibliotheksname | grammatikalische Ausdruckskraft | Grafiktyp | Geeignet für Gegenstände | Ob die Interaktion unterstützt werden soll | Ob Animation unterstützt werden soll |
|---|---|---|---|---|---|
| Mermaid.js | Extrem hoch (mit Markdown-ähnlicher Syntax) | Flussdiagramm, Sequenzdiagramm, Gantt-Diagramm, ER-Diagramm, Klassendiagramm | Dokumentenvisualisierung und Rapid Prototyping | Begrenzter Support | Teilweise Unterstützung |
| D3.js | Mittel (muss Datenbindung und DOM-Operationen verstehen) | Fast alle Grafiken (extrem anpassbar) | Fortgeschrittener Datenvisualisierungsentwickler | Volle Unterstützung | Volle Unterstützung |
| Cytoscape.js | Hoch (in JSON definierte Knoten und Kanten) | Netzwerkdiagramm, Flussdiagramm | Bioinformatik, Analyse sozialer Netzwerke | Volle Unterstützung | Teilweise Unterstützung |
| Vega / Vega-Lite | Hoch (deklarative JSON-Beschreibung des Diagramms verwenden) | Statistische Diagramme (Balkendiagramme, Streudiagramme usw.) | Datenwissenschaft, Dashboard-Design | Unterstützung | Teilweise Unterstützung |
| Graphviz via Viz.js | Hoch (DOT-Syntax ähnelt der Textprogrammierung) | Flussdiagramm, Struktur der Graphentheorie | Akademische Nutzung, schnelles Architekturdiagramm | Nicht unterstützt | Nicht unterstützt |
| JSXGraph | Hoch (geometrische Semantik ist klar) | Geometrische Figuren, Koordinatendiagramme | Mathematikunterricht | Unterstützung | Unterstützung |
Chart.js ist eine Open-Source-, leichte und leistungsstarke JavaScript-Funktionsbibliothek zum Zeichnen von Diagrammen.
Verfügbar in HTML5<canvas>Zeichnen Sie verschiedene interaktive Diagramme zu Elementen.
Es ist bekannt für seine einfache API, schöne Standardstile und hochgradig anpassbare Optionen.
Geeignet für die schnelle Visualisierung von Daten auf Websites oder Anwendungen.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
npm install chart.js
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
neues Diagramm(ctx, {
Typ: 'bar',
Daten: {
Beschriftungen: ['rot', 'blau', 'gelb', 'grün', 'lila', 'orange'],
Datensätze: [{
Etikett: 'Stimmen',
Daten: [12, 19, 3, 5, 2, 3],
Hintergrundfarbe: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0,6)'
],
Randbreite: 1
}]
},
Optionen: {
reaktionsfähig: wahr,
Skalen: {
y: { beginAtZero: true }
}
}
});
</script>
---
| Diagrammtyp | Typ festlegen | Gebrauchsanweisung |
|---|---|---|
| Liniendiagramm | line | Zeigen Sie Zeitreihen oder Trenddaten an. |
| Balkendiagramm | bar | Vergleichen Sie Werte aus verschiedenen Kategorien. |
| Kreisdiagramm | pie | Zeigt die gesamte proportionale Verteilung. |
| Donut-Diagramm | doughnut | Eine Variation des Kreisdiagramms. Die Mitte kann leer gelassen werden, um den Titel anzuzeigen. |
| Radarkarte | radar | Vergleich mehrdimensionaler Daten. |
| Karte der Polarregion | polarArea | Der Effekt der Kombination von runden Kuchen und Streifen. |
Sie können die Version von Chart.js überprüfen, indem Sie Folgendes verwenden:
console.log(Chart.version);
---
Das folgende Beispiel zeigt, wie man einen HTML-Code extrahiert<table>Lesen Sie die Daten und zeichnen Sie mithilfe von JavaScript dynamisch ein Kreisdiagramm. Dieses Beispiel verwendetChart.js, einfach zu bedienen und unterstützt automatische Farbanpassung und Animation.
<!-- Tabellendaten -->
<table id="dataTable" border="1" style="margin:10px auto;">
<tr><th>Kategorie</th><th>Wert</th></tr>
<tr><td>Apple</td><td>30</td></tr>
<tr><td>Banane</td><td>15</td></tr>
<tr><td>Cherry</td><td>25</td></tr>
<tr><td>Mango</td><td>20</td></tr>
</table>
<!-- Kreisdiagramm-Container -->
<canvas id="pieChart" width="400" height="400"></canvas>
<!-- Chart.js laden -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
---
//Tabellendaten lesen
const table = document.getElementById("dataTable");
const labels = [];
const-Werte = [];
für (sei i = 1; i< table.rows.length; i++) { // 跳過表頭
const row = table.rows[i];
labels.push(row.cells[0].textContent);
values.push(parseFloat(row.cells[1].textContent));
}
// 建立 Chart.js 圓餅圖
const ctx = document.getElementById("pieChart").getContext("2d");
new Chart(ctx, {
type: "pie",
data: {
labels: labels,
datasets: [{
data: values,
backgroundColor: [
"rgba(255, 99, 132, 0.7)",
"rgba(54, 162, 235, 0.7)",
"rgba(255, 206, 86, 0.7)",
"rgba(75, 192, 192, 0.7)"
],
borderColor: "white",
borderWidth: 2
}]
},
options: {
responsive: true,
plugins: {
legend: { position: "bottom" },
title: { display: true, text: "水果銷售比例" }
}
}
});
---
tableRufen Sie Daten dynamisch ab, ohne dass eine manuelle Definition erforderlich ist.type: "pie"für"doughnut"Kann auf ein Donut-Diagramm umgestellt werden.Wenn Sie in reinem JavaScript zeichnen möchten (ohne eine externe Bibliothek zu verwenden), können Sie verwendenCanvasRenderingContext2D.arc()Zeichnen Sie die Fächerform selbst. Soll ich Ihnen die Version „ohne Chart.js“ zeigen?
In HTML können Sie verwenden<svg>Tags zum Zeichnen grundlegender UML-Klassendiagramme. Hier ist ein Beispiel für die Verwendung eines Rechtecks und Texts zur Darstellung einer einfachen Kategorie.
<svg width="300" height="200">
<rect x="50" y="20" width="200" height="30" fill="lightblue" stroke="black"/>
<text x="60" y="40" font-family="Arial" font-size="16">Class Name</text>
<rect x="50" y="50" width="200" height="50" fill="white" stroke="black"/>
<text x="60" y="70" font-family="Arial" font-size="14">+ attribute1 : Type</text>
<text x="60" y="90" font-family="Arial" font-size="14">+ attribute2 : Type</text>
<rect x="50" y="100" width="200" height="50" fill="white" stroke="black"/>
<text x="60" y="120" font-family="Arial" font-size="14">+ method1() : ReturnType</text>
<text x="60" y="140" font-family="Arial" font-size="14">+ method2() : ReturnType</text>
</svg>
Mithilfe von HTML- und CSS-Stilen können verschiedene UML-Elemente definiert werden. Das folgende Beispiel zeigt die Verwendung<div>UndCSSum ein Kategoriefeld zu zeichnen und seinen Stil so anzupassen, dass er UML nachahmt
Struktur von Kategoriediagrammen.
<style>
.class-box {
width: 200px;
border: 1px solid black;
margin: 10px;
}
.header {
background-color: lightblue;
text-align: center;
font-weight: bold;
}
.attributes, .methods {
padding: 10px;
border-top: 1px solid black;
}
</style>
<div class="class-box">
<div class="header">ClassName</div>
<div class="attributes">
+ attribute1 : Type <br>
+ attribute2 : Type
</div>
<div class="methods">
+ method1() : ReturnType <br>
+ method2() : ReturnType
</div>
</div>
Um komplexere UML-Diagramme in HTML zu zeichnen, können Sie eine externe JavaScript-Bibliothek wie mermaid.js verwenden. Es unterstützt eine Vielzahl von UML-Diagrammen und kann direkt in HTML eingebettet werden. Zuerst müssen Sie auf mermaid.js verweisen und dann verwenden<pre>Tags bilden UML-Diagrammdefinitionen.
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
<pre class="mermaid">
classDiagram
Class01 <|-- Class02 : Inheritance
Class01 : +method1() void
Class02 : +method2() void
Class03 : +attribute int
Class04 : +method() void
</pre>
classDiagram
Class01 <|-- Class02 : Inheritance
Class01 : +method1() void
Class02 : +method2() void
Class03 : +attribute int
Class04 : +method() void
Ein solches Beispiel kann mit mermaid.js problemlos komplexere und klarere UML-Diagramme zeichnen und unterstützt verschiedene Diagrammtypen.
Dieses Beispiel zeigt Vererbung, Zusammensetzung, Aggregation und Zuordnung zwischen Kategorien.
<pre class="mermaid">
classDiagram
Animal <|-- Mammal
Animal <|-- Bird
Mammal o-- Dog : has-a
Bird --> Wing : has-a
class Animal {
+String name
+int age
+eat() void
}
class Mammal {
+hasFur() bool
}
class Dog {
+bark() void
}
class Bird {
+fly() void
}
class Wing {
+wingSpan int
}
</pre>
classDiagram
Animal <|-- Mammal
Animal <|-- Bird
Mammal o-- Dog : has-a
Bird --> Wing : has-a
class Animal {
+String name
+int age
+eat() void
}
class Mammal {
+hasFur() bool
}
class Dog {
+bark() void
}
class Bird {
+fly() void
}
class Wing {
+wingSpan int
}
veranschaulichen:Dieses Beispiel zeigt mehrere Beziehungen:
AnimalJaMammalUndBirdSuperkategorie.MammalUndDogDie Kombinationsbeziehung vono--äußern.BirdUndWingDie Aggregationsbeziehung von-->äußern.Dieses Beispiel zeigt, wie Multiplizität (1..*, 0..1 usw.) und Rollen zwischen Kategorien dargestellt werden.
<pre class="mermaid">
classDiagram
Customer "1" --> "0..*" Order : places
Order "1" --> "1" Payment : includes
class Customer {
+String name
+String email
+placeOrder() void
}
class Order {
+int orderId
+String date
+calculateTotal() float
}
class Payment {
+float amount
+String method
+processPayment() void
}
</pre>
classDiagram
Customer "1" --> "0..*" Order : places
Order "1" --> "1" Payment : includes
class Customer {
+String name
+String email
+placeOrder() void
}
class Order {
+int orderId
+String date
+calculateTotal() float
}
class Payment {
+float amount
+String method
+processPayment() void
}
veranschaulichen:
CustomerKann mehrere habenOrder, jedeOrderAlle entsprechen einemPayment。placesUndincludes)。Dieses Beispiel zeigt, wie Schnittstellen und abstrakte Klassen in Mermaid.js definiert werden.
<pre class="mermaid">
classDiagram
class Shape {
<<_abstract_>>
+area() float
+perimeter() float
}
Shape <|-- Rectangle
Shape <|-- Circle
class Rectangle {
+width float
+height float
+area() float
+perimeter() float
}
class Circle {
+radius float
+area() float
+perimeter() float
}
</pre>
classDiagram
class Shape {
<<_abstract_>>
+area() float
+perimeter() float
}
Shape <|-- Rectangle
Shape <|-- Circle
class Rectangle {
+width : float
+height : float
+area() float
+perimeter() float
}
class Circle {
+radius : float
+area() float
+perimeter() float
}
veranschaulichen:
Shapeist eine abstrakte Kategorie mit<<abstract>>markieren.RectangleUndCirclegeerbtShapeund implementieren Sie seine Methoden.Dieses Beispiel zeigt eine Mischung aus Klassenvererbung und Schnittstellenimplementierung.
<pre class="mermaid">
classDiagram
class Flyable {
<<_interface_>>
+fly() void
}
class Bird {
+String species
+String color
+sing() void
}
class Airplane {
+String model
+int capacity
+takeOff() void
}
Bird ..|> Flyable : implements
Airplane ..|> Flyable : implements
</pre>
classDiagram
class Flyable {
<<_interface_>>
+fly() void
}
class Bird {
+String species
+String color
+sing() void
}
class Airplane {
+String model
+int capacity
+takeOff() void
}
Bird ..|> Flyable : implements
Airplane ..|> Flyable : implements
veranschaulichen:
Flyableist die Schnittstelle und definiertfly()Verfahren.BirdUndAirplaneAlles umgesetztFlyableSchnittstelle, Verwendung..|>Symboldarstellung.Flussdiagramm TD
A[Start] -> B{Müssen Sie fortfahren? }
B – Ja –> C[Vorgang ausführen]
B – Nein –> D[Ende]
C -> D
Mermaid bietet offiziell anMermaid Live Editorkönnen Sie im Handumdrehen Tests durchführen und auf Syntaxfehler prüfen. Nach dem Einfügen der Mermaid-Syntax zeigt der Editor bei Fehlern spezifische Fehlermeldungen an, sodass Sie das Problem schneller beheben können.
Wenn Ihr Mermaid-Diagramm zu komplex ist, werden segmentierte Tests empfohlen. Indem Sie beispielsweise zunächst einige Kategorien oder Beziehungen entfernen, nur die grundlegendste Struktur belassen und nach und nach Elemente hinzufügen, können Sie mögliche Quellen für Grammatikfehler schneller identifizieren.
Verschiedene Versionen von Mermaid.js bieten möglicherweise unterschiedliche Unterstützung für die Syntax. Stellen Sie sicher, dass Sie die neueste Version verwenden, oder überprüfen Sie in einer Testumgebung, ob Ihre Version von Mermaid.js die verwendeten Syntaxfunktionen unterstützt.
+attribute : typeAttribute zu markieren.<|--oder-->) korrekt ist, werden diese Symbole zur Darstellung kategorialer Beziehungen verwendet.<<abstract>>oder andere besondere Markierungen, wird empfohlen, diese einzeln zu entfernen oder zu ändern, um zu überprüfen, ob Fehler verursacht werden.Zeigen Sie die JavaScript-Konsole in den Entwicklertools des Browsers an. Wenn das Mermaid-Diagramm nicht korrekt generiert wird, werden in der Konsole möglicherweise bestimmte Fehlermeldungen oder Tipps angezeigt, die Ihnen bei der Identifizierung von Syntaxfehlern helfen.
Die offizielle Dokumentation von Mermaid enthält detaillierte Grammatikrichtlinien, die Ihnen dabei helfen, zu überprüfen, ob die Grammatik korrekt verwendet wird. Offizielle Dokumente finden Sie unterOffizielle Website von Mermaid.js。
Nachfolgend finden Sie ein einfaches Beispiel für ein Flussdiagramm, das die logische Beziehung zwischen Entscheidungen und Aktionen veranschaulicht.
Flussdiagramm TD
A[Start] -> B{Müssen Sie fortfahren? }
B – Ja –> C[Vorgang ausführen]
B – Nein –> D[Ende]
C -> D
Fügen Sie die obige Flussdiagrammsyntax in ein Mermaid-fähiges Tool ein, z. B. den Markdown-Editor oder das Mermaid-Online-Tool, um das Diagramm zu erstellen.
Diese JavaScript-Bibliothek fügt den Diagrammen von Mermaid.js skalierbare Schiebereglerfunktionen hinzu, die es Benutzern ermöglichen<input type="range">Steuert die Skalierung des Diagramms. Bibliotheksnutzungtransform: scale()Ermöglicht die visuelle Skalierung ohne erneutes Rendern von Mermaid.
// mermaidZoomSlider.js
Exportfunktion setupMermaidZoomSlider({
sliderId = "zoomSlider",
DiagrammContainerId = "mermaidContainer",
min = 0,1,
max = 3,
Schritt = 0,1,
anfänglich=1
} = {}) {
window.addEventListener("load", () => {
const slider = document.getElementById(sliderId);
const container = document.getElementById(diagramContainerId);
if (!slider || !container) {
console.warn("Mermaid-Zoom-Schieberegler: Schieberegler oder Containerelement fehlen");
Rückkehr;
}
//Slider-Eigenschaften initialisieren
slider.min = min;
slider.max = max;
slider.step = Schritt;
slider.value = initial;
//Anfangszoom festlegen
container.style.transformOrigin = "oben links";
container.style.transform = `scale(${initial})`;
//Ereignisüberwachung: Zoom
slider.addEventListener("input", () => {
const scale = parseFloat(slider.value);
container.style.transform = `scale(${scale})`;
});
});
}
<!-- HTML -->
<div>
<input type="range" id="zoomSlider">
</div>
<div id="mermaidContainer">
<pre class="mermaid">
Diagramm TD;
A-->B;
B-->C;
</pre>
</div>
<!-- Einführung in das JavaScript-Modul -->
<script type="module">
Meerjungfrau importieren von „https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs“;
import { setupMermaidZoomSlider } from „./mermaidZoomSlider.js“;
mermaid.initialize({ startOnLoad: true });
setupMermaidZoomSlider({
sliderId: „zoomSlider“,
DiagrammContainerId: „mermaidContainer“,
min: 0,2,
max: 3,
Schritt: 0,1,
Initiale: 1
});
</script>
Wenn Sie erweiterte Funktionen wie Ziehen und Verschieben, Zoom-Reset usw. benötigen, können Sie diese Funktionsbibliothek weiter erweitern, beispielsweise durch die Integration von Maus-Drag- und Zoom-Reset-Buttons.
Wird in Mermaid.js-Diagrammen verwendet-->、===>Markierungen werden verwendet, um Verbindungen zwischen Knoten herzustellen. Verschiedene Symbole repräsentieren unterschiedliche Linienstile.
| Grammatik | Stil | veranschaulichen |
|---|---|---|
--> |
──> | Allgemeiner durchgezogener Pfeil |
---> |
───> | Und-->Identisch (syntaxtolerant) |
-- text --> |
── text ──> | Durchgezogener Pfeil mit Textbeschriftung |
-.-> |
-.-> | gestrichelter Pfeil |
-. text .-> |
-. text .-> | Gepunkteter Pfeil mit Text |
==> |
===> | dicker, solider Pfeil |
== text ==> |
== text ==> | Dicker Pfeil mit Text |
--o |
──○ | Runder Kopf ohne Richtungslinie (häufig in Klassendiagrammen verwendet) |
--|> |
──▷ | Durchgezogener Pfeil (wird häufig in Klassendiagrammen verwendet) |
--> | label | |
──> (mit doppelseitigem Text) | Mermaid unterstützt Stilanmerkungs-Tags |
Diagramm TD
A[Start] -> B[Schritt 1]
B -.-> C [Asynchrone Verarbeitung]
C ==> D[stark abhängig]
D -- Text --> E [Verbindung mit Text]
E --o F[runder Kopf]
F --|> G[durchgezogener Pfeil]
graph), Kategoriekarte (classDiagram), Zustandsdiagramm und andere Stile unterscheiden sich geringfügig.Mermaid.js bietet eine Vielzahl von Zeilensyntaxstilen, die es Benutzern ermöglichen, Prozesse, Logik und Beziehungen klar auszudrücken. Durch die Kombination von durchgezogenen Linien, gepunkteten Linien, dicken Linien und grafischen Endpunkten können einfache und gut strukturierte Diagramme erstellt werden.
D3.js (Data-Driven Documents) ist eine Open-Source-JavaScript-basierte Bibliothek zur Umwandlung von Daten in dynamische und interaktive Visualisierungen. Es nutzt Web-Standardtechnologien wie SVG, HTML und CSS bietet leistungsstarke Tools zum Bearbeiten von Daten und Zeichnen von Grafiken.
d3.select()Undd3.selectAll()。
D3.js wird häufig in verschiedenen Datenvisualisierungsszenarien verwendet, wie zum Beispiel:
Um D3.js zu lernen, können Sie auf die folgenden Ressourcen verweisen:
D3.js ist ein leistungsstarkes und flexibles Datenvisualisierungstool für Entwickler, die hochgradig angepasste Diagramme und interaktive Effekte benötigen. Obwohl die Lernkurve etwas höher ist, ist das Anwendungspotenzial endlos, sobald man es beherrscht.
In diesem Beispiel wird mit D3.js ein einfaches Baumdiagramm gezeichnet, um zu zeigen, wie hierarchische Strukturdaten visualisiert werden. Hier sind die wichtigsten Schritte:
tree()Die Funktion generiert ein Baumlayout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3.js Tree Diagram Example</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.node circle {
fill: steelblue;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script>
const width = 800;
const height = 600;
const treeData = {
name: "CEO",
children: [
{
name: "CTO",
children: [
{ name: "Engineering Manager" },
{ name: "Product Manager" }
]
},
{
name: "CFO",
children: [
{ name: "Accountant" },
{ name: "Finance Analyst" }
]
}
]
};
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,40)");
const treeLayout = d3.tree().size([height - 100, width - 160]);
const root = d3.hierarchy(treeData);
treeLayout(root);
svg.selectAll(".link")
.data(root.links())
.enter()
.append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x)
);
const nodes = svg.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y},${d.x})`);
nodes.append("circle").attr("r", 5);
nodes.append("text")
.attr("dy", 3)
.attr("x", d => d.children ? -10 : 10)
.style("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name);
</script>
</body>
</html>
Nachdem Sie diesen Code ausgeführt haben, sehen Sie ein Baumdiagramm:
CEO)。CTOUndCFO) nach rechts erweitern.Dieses Beispiel kann auf komplexere Hierarchien erweitert oder der Stil an unterschiedliche Anforderungen angepasst werden. Zum Beispiel:
Die rechteckige Baumkarte ist eine Visualisierungstechnik, die verschachtelte Rechtecke verwendet, um hierarchische Daten anzuzeigen. Die Fläche jedes Rechtecks stellt einen numerischen Wert dar, beispielsweise Umsatz oder Archivgröße, und jedes Rechteck kann weiter verschachtelt werden, um Unterkategorien darzustellen.
Cytoscape.js ist eine JavaScript-Bibliothek zum Zeichnen von Netzwerkdiagrammen (Graph). Es verwendet JSON, um Knoten und Kanten zu definieren. Es verfügt über eine einfache Syntax und unterstützt Interaktion und Stilanpassung.
elements: Knoten- und Kantendaten definierenstyle: Steuerstile wie Farben, Pfeile, Beschriftungenlayout: Grafische Anordnung (optional Raster, Kreis, Cosy usw.)classesDefinieren Sie Knotengruppen und weisen Sie verschiedene Stile zu| Bibliotheksname | Anwendbarkeit | Merkmale | Ob die Interaktion unterstützt werden soll | veranschaulichen |
|---|---|---|---|---|
| JointJS | ★★★★★ | Hohe Zeichnungsfreiheit und skalierbare Schaltungskomponentensymbole | ✔️ | Es kann Logikschaltungen und Flussdiagramme zeichnen. Die kostenlose Version verfügt über genügend Funktionen. |
| GoJS | ★★★★☆ | Leistungsstarke Grafik- und Datenmodellunterstützung | ✔️ | Keine kostenlose Software, aber es gibt eine kostenlose Testversion; Wird häufig in Produktionsliniendiagrammen und Schaltplänen verwendet |
| SVG.js | ★★★☆☆ | Leicht und unterstützt präzises Zeichnen | ✔️ | Erfordert selbst entwickelte Komponenten (Widerstände, Kondensatoren usw.), die für eine detaillierte Steuerung geeignet sind |
| Konva.js | ★★★☆☆ | Sowohl Canvas als auch SVG werden unterstützt | ✔️ | Entwerfen Sie Tools, die für interaktive Verhaltensweisen wie Ziehen und Klicken geeignet sind |
| ELK.js | ★★☆☆☆ | Hervorragendes automatisches Layout | ✖️ | Nur für den Layout-Algorithmus verantwortlich (kann mit JointJS gepaart werden) |
Dieses Tool kann als verwendet werdenxUndyals unabhängige Variablez = f(x, y)Gleichungen werden in 3D-Oberflächendiagramme gezeichnet und interaktive Funktionen der Mausbedienung für Drehung, Skalierung und Translation werden bereitgestellt.
<div id="plot3d" style="width:100%; height:600px;"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="module">
// Definiere die Funktion z = f(x, y) (kann durch jede Gleichung ersetzt werden)
Funktion berechneZ(x, y) {
return Math.sin(x) * Math.cos(y); // z = sin(x) * cos(y)
}
const xRange = numeric.linspace(-5, 5, 50);
const yRange = numeric.linspace(-5, 5, 50);
// Z-Daten erstellen
const zValues = xRange.map(x =>
yRange.map(y => berechneZ(x, y))
);
const data = [{
Typ: 'Oberfläche',
x: xRange,
y: yBereich,
z: zWerte,
Farbskala: 'Viridis'
}];
const-Layout = {
Titel: 'z = sin(x) * cos(y)',
automatische Größe: wahr,
Szene: {
xaxis: { Titel: 'X-Achse' },
yaxis: { title: 'Y axis' },
zaxis: { Titel: 'Z-Achse' }
}
};
Plotly.newPlot('plot3d', Daten, Layout);
</script>
<!-- numeric.js wird zum Generieren von Linspace-Arrays verwendet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
z = Math.sin(x * y)→ gewelltz = x * x - y * y→ Satteloberflächez = Math.exp(-(x * x + y * y))→ Gauss-GipfelIn diesem Beispiel wird Plotly.js zur Bereitstellung einer interaktiven 3D-Visualisierung und numeric.js zur Unterstützung bei der Generierung numerischer Gitter verwendet. Sie können es frei änderncomputeZVerwenden Sie den Inhalt der Funktion, um eine beliebige dreidimensionale Oberfläche zu zeichnen.
3Dmol.js ist eine Open-Source-WebGL-Bibliothek zur Visualisierung chemischer Moleküle, die speziell für Browser entwickelt wurde und molekulare Strukturen direkt auf Webseiten zeichnen kann.
<div id="viewer" style="width:400px;height:400px;"></div>
<script src="https://3dmol.org/build/3Dmol-min.js"></script>
<script>
const viewer = $3Dmol.createViewer("viewer", { backgroundColor: "white" });
viewer.addModel("C1=CC=CC=C1", "smi"); // LÄCHELT Struktur von Benzol
viewer.setStyle({}, {stick: {}, sphere: {scale: 0.3}});
viewer.zoomTo();
viewer.render();
</script>
ChemDoodle bietet 2D- und 3D-Strukturzeichnungen, unterstützt eine Vielzahl chemischer Formate und eignet sich für Lehr- und Webanwendungen.
JSmol ist eine JavaScript-Version von Jmol, die sich zur Darstellung großer Moleküle wie Proteine oder Kristallstrukturen eignet.
Mol* (MolStar) ist ein von RCSB PDB entwickeltes Tool zur Visualisierung von Strukturen höherer Ordnung, das speziell für biologische Makromoleküle entwickelt wurde.
| Funktionsbibliothek | Hauptzweck | Ist es Open Source? | Ob eine Genehmigung erforderlich ist |
|---|---|---|---|
| 3Dmol.js | Universelle 3D-Molekularvisualisierung | ✅ | ❌ |
| ChemDoodle | 2D- und 3D-Unterricht und -Anzeige | Teil | ✅ |
| JSmol | Akademische Forschung und Lehre | ✅ | ❌ |
| Mol* | Visualisierung von Proteinen und Biomolekülen | ✅ | ❌ |
Dieses Beispiel verwendet3Dmol.jsund adoptierenXYZ-FormatDefinieren Sie die Atomkoordinaten des Benzolmoleküls, um die 3D-Molekülstruktur korrekt anzuzeigen.
Bei Verwendung des SMILES-Formats („smi“) tritt ein Fehler aufUnknown format: smi, da dieses Format in einigen 3Dmol.js-Versionen nicht unterstützt wird.
benzene.html。python -m http.server) ist eingeschaltet.http://localhost:8000Ergebnisse anzeigen.<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>3Dmol.js rendert Benzolmoleküle</title>
<script src="https://3dmol.org/build/3Dmol-min.js"></script>
<Stil>
#viewer {
Breite: 600px;
Höhe: 600px;
Position: relativ;
Rand: 1px fest #aaa;
}
</style>
</head>
<Körper>
<h2>3Dmol.js Benzolmolekül-Anzeige (XYZ-Format)</h2>
<div id="viewer"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const viewer = $3Dmol.createViewer("viewer", { backgroundColor: "white" });
const xyzData = `
12
Benzol
C 0,0000 1,3968 0,0000
H 0,0000 2,4903 0,0000
C -1,2096 0,6984 0,0000
H -2,1471 1,2451 0,0000
C -1,2096 -0,6984 0,0000
H -2,1471 -1,2451 0,0000
C 0,0000 -1,3968 0,0000
H 0,0000 -2,4903 0,0000
C 1,2096 -0,6984 0,0000
H 2,1471 -1,2451 0,0000
C 1,2096 0,6984 0,0000
H 2,1471 1,2451 0,0000
`;
viewer.addModel(xyzData, „xyz“);
viewer.setStyle({}, {stick: {}, sphere: {scale: 0.3}});
viewer.zoomTo();
viewer.render();
});
</script>
</body>
</html>
file://Aktivieren Sie HTML. Es wird empfohlen, einen lokalen HTTP-Server zu verwenden.Mit der JavaScript-API von Google Maps können Entwickler interaktive Karten in Webseiten einbetten. Und fügen Sie über JavaScript dynamisch benutzerdefinierte Elemente wie Markierungen, Ebenen und Textbeschriftungen hinzu. Das folgende Beispiel zeigt, wie eine Karte angezeigt und benutzerdefinierte Markierungen hinzugefügt werden.
---Gehe zuGoogle Cloud Console, aktivierenMaps JavaScript API,
Und erstellen Sie einen Satz API-Schlüssel (API-Schlüssel).
Nachdem Sie es erhalten haben, hängen Sie es beim Laden des Skripts an?key=YOUR_API_KEY。
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Google Map mit benutzerdefinierten Tags</title>
<Stil>
#map {
Breite: 100 %;
Höhe: 500px;
}
</style>
</head>
<Körper>
<h3>Meine Karte</h3>
<div id="map"></div>
<!-- Google Maps JS API laden -->
<Skript asynchron
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<script>
Funktion initMap() {
//Initialisiere die Karte
const center = { lat: 25.033964, lng: 121.564468 }; // Taipeh 101
const map = new google.maps.Map(document.getElementById("map"), {
Zoom: 14,
Mitte: Mitte
});
//Benutzerdefiniertes Tag erstellen
const myTags = [
{ position: { lat: 25.034, lng: 121.565 }, title: „Mark A“, content: „This is point A“ },
{ position: { lat: 25.036, lng: 121.562 }, title: „Mark B“, content: „This is point B“ },
{ position: { lat: 25.032, lng: 121.568 }, title: „Mark C“, content: „This is point C“ }
];
//Ein Informationsfenster erstellen (InfoWindow)
const infoWindow = new google.maps.InfoWindow();
//Markierungen zur Karte hinzufügen
myTags.forEach(tag => {
const marker = new google.maps.Marker({
Position: tag.position,
Karte: Karte,
Titel: tag.title,
Symbol: {
URL: „https://maps.google.com/mapfiles/ms/icons/blue-dot.png“
}
});
// Klicken Sie, um Informationen anzuzeigen
marker.addListener("click", () => {
infoWindow.setContent("<b>" + tag.title + "</b><br>" + tag.content);
infoWindow.open(map, marker);
});
});
}
</script>
</body>
</html>
---
iconBilder für sich selbst (PNG, SVG).google.maps.PolylineoderPolygonZeichnen Sie Linien und Flächen.map.setMapTypeId('satellite')Wechseln Sie in den Satellitenmodus.| Eigentum | verwenden |
|---|---|
center | Legen Sie die anfänglichen Mittelpunktskoordinaten der Karte fest. |
zoom | Kartenzoomstufe (1–20). |
mapTypeId | Anzeigestil, der sein kannroadmap、satellite、hybrid、terrain。 |
icon | Benutzerdefiniertes Markierungssymbol. |
infoWindow | Zeigt das Informationsfenster nach dem Klicken auf die Markierung an. |
Um einen bestimmten MIDI-Sound (z. B. eine Gitarre) in einem Browser abzuspielen, können Sie die Web-MIDI-API oder einfacher die Web-Audio-API mit einem SoundFont-Player verwenden, zSoundFont PlayerBausatzsoundfont-player。
<script src="https://unpkg.com/[email protected]/dist/soundfont-player.js"></script>
<button onclick="playDoReMi()">Play Do Re Mi</button>
<script>
asynchrone Funktion playDoReMi() {
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const player = wait Soundfont.instrument(audioCtx, 'acoustic_guitar_nylon');
const now = audioCtx.currentTime;
player.play('C4', now); // Tun
player.play('D4', jetzt + 0,5); // Betreff
player.play('E4', jetzt + 1); // Mi
}
</script>
C4, D4, E4:Repräsentiert Do Re Miacoustic_guitar_nylon: Gitarrenklang von SoundFont (kann auch in electric_guitar_jazz usw. geändert werden)acoustic_guitar_nylonacoustic_guitar_steelelectric_guitar_jazzelectric_guitar_cleanelectric_guitar_mutedoverdriven_guitardistortion_guitarguitar_harmonicsverwendensoundfont-playerMit der Web-Audio-API können Sie ganz einfach Instrumentenwiedergabefunktionen auf MIDI-Ebene implementieren, ohne Plug-Ins installieren zu müssen. Geben Sie einfach die Klangfarbe und die Tonhöhe an, und Sie können schnell eine Tonleitermelodie wie „do re mi“ implementieren.
Wenn der Ton nicht über einen externen SoundFont abgespielt werden kann, können wir ihn direkt verwendenWeb Audio APIvonOscillatorNodeDer Synthesizer spielt Do Re Mi und simuliert einen Gitarrenstil (z. B.: kurzer Sound + Pianissimo)
<button onclick="playDoReMi()">Play Do Re Mi</button>
<script>
Funktion playTone(Frequenz, Startzeit, Dauer, Kontext) {
const osc = context.createOscillator();
const Gain = context.createGain();
osc.type = "dreieck"; // Synthetische Wellenform ähnlich dem Gitarrensound, kann in „Rechteck“, „Sägezahn“ geändert werden
osc.frequenz.value = Frequenz;
Gain.gain.setValueAtTime(0.2, startTime);
Gain.gain.exponentialRampToValueAtTime(0.001, Startzeit + Dauer);
osc.connect(gain);
Gain.connect(context.destination);
osc.start(startTime);
osc.stop(startTime + Dauer);
}
Funktion playDoReMi() {
const context = new (window.AudioContext || window.webkitAudioContext)();
const now = context.currentTime;
// Häufigkeit von Do Re Mi (C4, D4, E4)
playTone(261.63, now, 0.4, context); // C4
playTone(293.66, now + 0.5, 0.4, context); // D4
playTone(329.63, now + 1.0, 0.4, context); // E4
}
</script>
osc.typeOder fügen Sie einen Filter hinzu, um einen Gitarrenton zu simulierentriangleodersawtoothWellenformgain.exponentialRampToValueAtTime()) simuliert das KommissionierenDie Verwendung einer reinen Web-Audio-API ist die stabilste und kompatibelste Methode. Wenn Sie erweiterte Anforderungen haben, können Sie Filter hinzufügen, Echos hinzufügen oder MIDI-Klangquellen integrieren.
| osc.type | Chinesischer Name | Klangfarbeneigenschaften | Gängige analoge Instrumente |
|---|---|---|---|
"sine" |
Sinuswelle | Das Reinste, keine Obertöne | Reiner Ton, Stimmgabel, Flöte, elektronisch synthetisierter Ton |
"square" |
Rechteckwelle | Reichhaltige ungerade Harmonische und scharfes Timbre | Synthesizer, 8-Bit-Soundeffekte, elektronische Tastatur |
"sawtooth" |
Sägezahnwelle | Enthält alle Obertöne für einen satten und hellen Ton | Streicher, Gitarre, Blechbläsersimulation |
"triangle" |
Dreieckswelle | Nur ungerade Obertöne, weicherer Klang | Holzbläser, sanfte E-Gitarrenklänge |
"custom" |
Benutzerdefinierte Wellenform | Anpassbare Arbiträrwellenformen | Spezielle synthetisierte Sounds, echte analoge Sounds |
const osc = audioContext.createOscillator();
osc.type = "Sägezahn"; // Kann in „Sinus“, „Quadrat“, „Dreieck“, „Benutzerdefiniert“ geändert werden
osc.frequenz.value = 440; // A4
osc.start();
const real = new Float32Array([0, 1, 0.5, 0.25]);
const imag = new Float32Array(real.length);
const wave = audioContext.createPeriodicWave(real, imag);
osc.setPeriodicWave(wave);
osc.type = "custom";
andersosc.typeKann verschiedene Stile von Musikinstrumentenklängen simulieren. Wenn Sie eine Gitarre simulieren möchten, empfiehlt es sich, mit zu beginnensawtoothodertriangleLegen Sie los und optimieren Sie den Klang mit Hüllkurven, Filtern und Echos.
EmpfohlenWebAudioFontDiese Open-Source-JavaScript-Bibliothek unterstützt mehr als Tausende von MIDI-Sounds, einschließlich Gitarren- und anderen Instrumentensounds, mit besserer Klangqualität und einfacher Integration.
'acoustic_guitar_steel''acoustic_guitar_nylon''electric_guitar_clean' ⋯⋯Durch die Kombination von WebAudioFont mit der Web-Audio-API können Sie ganz einfach echte MIDI-Sounds (z. B. Gitarren) zum Spielen von Noten verwenden, wodurch das Problem eines einzelnen reinen, durch Oszillatoren synthetisierten Sounds gelöst wird und die bisherige Stille-Situation von SoundFont-Playern vermieden wird.
email: [email protected]