Entwicklung multimedialer Programme



Entwicklung multimedialer Programme

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.


Kernkomponenten der Entwicklung

Mainstream-Entwicklungstools und -sprachen

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

Gemeinsame Entwicklungsprozesse

  1. Anforderungsanalyse: Bestimmen Sie Medientypen (z. B. Streaming-Medien, interaktive Spiele, Lernsoftware).
  2. Ressourcenvorbereitung: Materialsammlung und Formatkonvertierung (Optimierung von Dateigröße und Auflösung).
  3. Programmierung: Playback-Logik, Filtereffekte oder interaktive Algorithmen implementieren.
  4. Leistungsoptimierung: Führen Sie eine Speicherverwaltung und Multi-Thread-Optimierung durch, um einen Betrieb mit hoher Bildrate sicherzustellen.
  5. Bereitstellung und Tests: Plattformübergreifende Kompatibilitätstests, um sicherzustellen, dass es unter verschiedenen Bildschirmgrößen und Hardwarespezifikationen betrieben werden kann.
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

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.


Haupt-API-Komponenten

Vergleich der DirectX-Versionsentwicklung

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

Entwicklungsvorteile

  1. Hardware-Abstraktion: Entwickler müssen keinen spezifischen Code für verschiedene Grafikkartenmarken schreiben.
  2. Hohe Leistung: DirectX 12 ermöglicht Entwicklern eine detailliertere Verwaltung der GPU-Ressourcen und eine Reduzierung der Systemlatenz.
  3. Komplettes Ökosystem: eng integriert mit Visual Studio und der Microsoft-Entwicklungstoolkette und reich an Debugging-Tools (wie PIX).
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

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.


Kernarchitekturkomponenten

Die Media Foundation unterteilt den Multimedia-Verarbeitungsprozess in drei Hauptebenen. Dieses Design bietet eine äußerst hohe Flexibilität bei der Steuerung:

Vergleich der technischen Vorteile

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.

Gemeinsame Entwicklungsschnittstelle

  1. Source Reader:Eine vereinfachte API für Entwickler, die nur dekodierte Bilder von einem Archiv oder einer Kamera benötigen.
  2. Sink Writer:Ein schnelles Tool zum Kodieren von Audio- und Videodaten in Dateien in einem bestimmten Format.
  3. Media Session:Ein vollständiger Pipeline-Controller bietet vollständige Kontrolle über Wiedergabe, Pause, Sprung und andere Aktionen.
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

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.


Filterdiagrammmodell

Das Kernkonzept von DirectShow ist der Filtergraph, der Multimediadaten verarbeitet, indem er verschiedene Filter zu Links verbindet:

Kernentwicklungsfunktionen

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.

Entwicklungsvorteile und Herausforderungen

  1. Hochmodular:Entwickler können benutzerdefinierte Filter schreiben und diese in vorhandene Grafiklinks einfügen.
  2. Automatisierte Verkabelung:Es verfügt über einen Intelligent Connect-Mechanismus, der die erforderlichen Filter automatisch finden und kombinieren kann.
  3. Lernkurve:Aufgrund der starken Abhängigkeit von der COM-Schnittstelle ist es für Entwickler, die mit COM-Indikatoren und Speicherverwaltung nicht vertraut sind, komplizierter.
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

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.


Kerndesignmerkmale

Die Designlogik von Vulkan erfordert, dass Entwickler im Austausch für ultimative Leistung mehr Verwaltungsaufgaben übernehmen:

Unterschiede zwischen Vulkan und OpenGL

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.

Schlüsselkomponenten der Entwicklung

  1. Instance & Physical Device:Initialisieren Sie Vulkan und zählen Sie die Grafikkartenhardware auf dem System auf.
  2. Logical Device & Queues:Stellen Sie logische Verbindungen von physischen Geräten her und erhalten Sie Warteschlangen, die Grafik-, Rechen- oder Übertragungsaufgaben verarbeiten.
  3. Pipeline State Objects (PSO):Kapseln Sie den Rendering-Status (z. B. Mischmodus, Tiefentest) vorab, um zu vermeiden, dass sich der Status während des Zeichnens dynamisch ändert, was zu Leistungseinbußen bei Frames führt.
  4. Render Pass:Die klare Definition des Rendering-Ziels und der Betriebsschritte trägt zur Optimierung des Kachel-Renderings (kachelbasiertes Rendering) auf mobilen GPUs bei.
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.


Entwicklung von Bildverarbeitungsprogrammen

OpenCV

1. Was ist OpenCV?

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.

2. Unterstützte Funktionen

3. Unterstützte Plattformen

4. Anwendungsbeispiele

# 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()

5. Ressourcen und Dokumente



cv::imread

1. Grundlegende Grammatik

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):


2. Mechanismus zur Ausnahmeprüfung und -behandlung

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;
}

3. Analyse häufiger Fehlergründe

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.

4. Fortgeschrittene Lösung: Chinesisches Pfadlesen

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();
}


Gruppierung von Oszillationspunktgruppen

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++.


Koordinatenpunktdefinition und Entfernungssortierung

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;
    }
}

Gruppierungsalgorithmus entlang von Linien für Punktgruppen außerhalb der Reihenfolge

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;
}

Erläuterung der Implementierungspunkte



Halcon

Merkmale

Halcon ist eine leistungsstarke industrielle Bildverarbeitungssoftware, die von MVTec speziell für Bildverarbeitungs- und Bildverarbeitungsanwendungen entwickelt wurde.

Funktion

Anwendungsgebiete

Ressource



Entwicklung von Videobearbeitungsprogrammen

Gemeinsame Funktionen

Gemeinsame Tools und Bibliothek

Anwendungsbeispiele



Open-Source-Videobearbeitungssoftware

1. Shotcut

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

2. OpenShot

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

3. Blender

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

4. Kdenlive

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

5. Lightworks

Lightworks bietet kostenlose und kostenpflichtige Versionen an, wobei die kostenlose Version grundlegende Bearbeitungsfunktionen bietet. Zu den Funktionen gehören:

Anwendbare Plattformen: Windows, Mac, Linux

. Avidemux
. Cinelerra
. LiVES
. Losslesscut
. Natron
. Pitivi

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.

Ranking des Google-Suchvolumens

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


Eine nützliche Programmbibliothek für die Videobearbeitung

FFmpeg

MoviePy(Python)

OpenCV(C++/Python)

GStreamer

AVFoundation(macOS/iOS)

Microsoft Media Foundation(Windows)

Kapwing API / Shotstack / Cloudinary

Adobe Premiere Pro API(Adobe UXP)



OpenShot

Projekteinführung

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.

Merkmale

Technische Architektur

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.

Nutzungskontext

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.

Gemeinschaft und Beitrag

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.

So erhalten Sie OpenShot

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.



Python Kdenlive-Automatisierung

So funktionieren Kdenlive-Projektdateien (KDENLIVE).

Die Projektdateien von Kdenlive sind im Wesentlichen reine Textdateien im XML-Format. Um ein „automatisches Öffnen und Importieren“ zu erreichen, besteht der stabilste und effizienteste Weg nicht darin, Mausklicks zu simulieren, sondern Python zum direkten Generieren oder Ändern der XML-Datei zu verwenden und dann das Kdenlive-Programm aufzurufen, um sie zu öffnen. Mit dieser Methode kann die Position von Sprache, Untertiteln (SRT) und Video auf der Timeline genau angegeben werden.

Automatisierte Importskript-Implementierung

Dieses Skript zeigt, wie Sie eine grundlegende XML-Struktur für ein Kdenlive-Projekt erstellen und die von Ihnen angegebenen Ressourcenpfade hineinschreiben.
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)

Erweiterte Automatisierungsvorschläge



MLT-Multimedia-Framework

MLT-Kernarchitektur (Media Lovin' Toolkit).

MLT ist ein Open-Source-Multimedia-Framework und die zugrunde liegende Engine von Bearbeitungssoftware wie Kdenlive und Shotcut. Es übernimmt das Design der nichtlinearen Bearbeitung (NLE), definiert Video, Audio, Filter und Übergänge als XML-Strukturen (MLT-XML genannt) und führt eine Echtzeitvorschau oder ein Rendering über effiziente Pipelines durch.

Komponenten von MLT

Verwenden von Python zum Bearbeiten von MLT-XML-Beispielen

Anstatt dies manuell in Kdenlive zu tun, können Sie mit Python MLT-Skripte generieren, um die Stapelbearbeitung zu automatisieren.
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")

Warum MLT für die Automatisierung wählen?



Python-Clipping-Automatisierung

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.


Vorbereitung

Bitte installieren Sie zuerst die erforderlichen Python-Bibliotheken:

pip install pyautogui pyperclip opencv-python

Beispiele für Automatisierungscodes

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()

Schlüsseldetails zur Implementierung

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.

Optimierungsvorschläge

  1. Auflösungsanpassung:Wenn Sie den Computer ändern und ausführen, müssen Sie ihn erneut erfassen..pngWie in der Abbildung dargestellt, kann die Erkennung aufgrund von Änderungen der Bildschirmauflösung oder des Zoomverhältnisses (DPI) fehlschlagen.
  2. Fenster oben:Empfohlen vor dem KlickenpygetwindowDie Bibliothek erzwingt, dass das Clipping-Fenster das aktive Vordergrundfenster ist.
  3. Mehrere Bestätigungen:Anstatt eine feste Wartezeit zu verwenden, können Sie eine Schleife verwenden, um zu prüfen, ob die Schaltfläche vorhanden ist, und mit dem Klicken warten, bis die Schaltfläche angezeigt wird.
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

Einführung

Gemeinsame Funktionen

Vorteil

Verwendung

Offizielle Website und Download



Automatische FFmpeg-Bereitstellung

Bei 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.


Kernlogikfluss

Der Programmcode ist hauptsächlich in zwei Phasen unterteilt: Erkennen des Systempfads sowie Remote-Download und Dekomprimierung.

Beispiele für Python-Implementierungen

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()

Überlegungen zur Entwicklung

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.

Vorschläge zur Pfadverwaltung

  1. Reihenfolge der Priorität: Das Programm sollte zuerst nach benutzerdefinierten Pfaden suchen, dann nach Systempfaden suchen und schließlich automatische Downloads durchführen.
  2. Persistenz: Es wird empfohlen, das automatisch heruntergeladene FFmpeg in der Anwendung zu platzierenAppDataOder das Stammverzeichnis des Projekts, um wiederholte Downloads zu vermeiden.
  3. Statische Version: Bei veröffentlichten Anwendungen ist eine statisch kompilierte ausführbare FFmpeg-Datei normalerweise stabiler als ein dynamischer Download.
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.


Python-Bildschirmaufzeichnung

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).


1. Vorbereitung

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

2. Kernimplementierungsbeispiele

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.")

3. Beschreibung der Schlüsselkomponenten


4. Häufig gestellte Fragen und Lösungen

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 - Python Animation

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.

Hauptmerkmale von Manim

So verwenden Sie Manim

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).

grundlegendes Beispiel

aus Manim-Import *

Klasse MyFirstScene(Scene):
    def construction(self):
        text = Text("Hallo, Manim!") # Erstellt ein Textobjekt
        self.play(Write(text)) # Animation generieren

Installieren Sie Manim

Manim kann über pip installiert werden:

pip install manim


Entwicklung von 3D-Grafik- und Animationsprogrammen

OpenGL

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.


Zeichnungspipeline-Prozess

OpenGL verwendet eine Pipeline-Architektur, um 3D-Daten in Pixel auf dem Bildschirm umzuwandeln. Der moderne OpenGL-Kernmodus ist stark auf Shader angewiesen:

Technische Merkmale und Vorteile

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.

Kernmodus und Sofortmodus

  1. Sofortmodus:Frühere Versionen verwendeten glBegin/glEnd-Anweisungen, die leicht zu erlernen, aber äußerst ineffizient waren und inzwischen veraltet sind.
  2. Kernprofil:Moderne Entwicklungsstandards schreiben die Verwendung von Pufferobjekten (VBO/VAO) und Shadern vor, um die Leistung der Hardware zu maximieren.
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

Einführung

ManimGL ist eine effiziente Variante von Manim zum Erstellen mathematischer Animationen, die sich auf die OpenGL-Beschleunigung konzentriert, um die Rendering-Geschwindigkeit zu verbessern.

Installieren

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 .

Grundlegende Verwendung

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

Hauptmerkmale

FAQ

Wenn Sie auf Installations- oder Betriebsprobleme stoßen, versuchen Sie Folgendes:

Verwandte Ressourcen



Blender 3D-Erstellungssoftware

Blender 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.


Kerntechnologiemodul

Die Architektur von Blender ist äußerst kompakt und nutzt mehrere dedizierte Engines für die Zusammenarbeit:

Vergleich der technischen Eigenschaften

  • Plattformübergreifende Unterstützung
  • 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.

    Automatisierungspfad für Entwickler

    Für Entwickler, die 3D-Materialien stapelweise verarbeiten oder die Modellierung automatisieren müssen, bietet Blender einen leistungsstarken Hintergrundmodus:

    1. Hintergrunddarstellung:Über die Befehlszeile ausführenblender -b -P script.pykönnen Sie automatisierte Aufgaben ausführen, ohne die grafische Benutzeroberfläche öffnen zu müssen.
    2. bpy-Modul:Die exklusive Python-Bibliothek von Blender kann jeden Scheitelpunkt, jedes Material und jeden Animationsrahmen in der Szene bearbeiten.
    3. Benutzerdefinierte Benutzeroberfläche:Entwickler können mit Python benutzerdefinierte Bedienfelder und Symbolleisten schreiben, um bestimmte Arbeitsabläufe zu optimieren.
    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.


    Blender Python-Mods

    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.

    was istbpy

    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 von

    bpyEnthält mehrere Untermodule, jedes mit einem bestimmten Zweck:

    Einfaches Beispiel: Erstellen Sie einen Würfel

    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))
        

    Warum verwendenbpy

    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.

    Referenzen

    Um mehr darüber zu erfahrenbpyEinzelheiten zum Modul finden Sie in der offiziellen Dokumentation:Blender Python API Documentation



    Entwicklung von Spielprogrammen

    Unity

    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.

    1. Hauptmerkmale von Unity
    2. Die Kernkomponenten von Unity
    3. Anwendungsbereich von Unity
    4. Vorteile der Einheit

    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-Spiel-Engine

    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).


    Kernproduktentwicklung

    Die Cocos-Familie ist hauptsächlich in zwei wichtige Entwicklungsstadien unterteilt, um den Bedürfnissen unterschiedlicher Entwicklungsgewohnheiten gerecht zu werden:

    Technische Vorteile und Features

    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.

    Kernfunktionskomponenten

    1. Szenenmanagement:Mithilfe der Knoten- und Komponentenarchitektur können Entwickler komplexe hierarchische Beziehungen einfach verwalten.
    2. Physik-Engine:Integrierte Unterstützung für eine Vielzahl von Physik-Backends (wie Box2D, Bullet, Cannon.js), die je nach Projektanforderungen gewechselt werden können.
    3. UI-System:Bietet flexible Layoutkomponenten, Koordinatenkonvertierung und automatische Bildkombinationsfunktionen, um die Effizienz des Schnittstellen-Renderings erheblich zu optimieren.
    4. Animationssystem:Unterstützt Skelettanimationen (Spine, DragonBones), Keyframe-Animationen und die selbst entwickelte dynamische Marionette-Zustandsmaschine.
    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.


    Solide Programmentwicklung

    Entwicklung der Sprachsynthese

    Kernentwicklungsprozess

    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.

    Mainstream-Entwicklungsframeworks und -bibliotheken

    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

    Benutzerdefiniertes Modelltraining (Feinabstimmung)

    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.

    Entwicklung der API-Integration

    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.

    Technische Auswahlvorschläge

    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

    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.


    Kerntechnologie-Upgrade

    CosyVoice 2 nutzt „Text-Speech-Sprachmodell“ und „Flow Matching“-Technologie, um eine durchgängige Sprachgenerierung zu erreichen:

    Vergleich der Funktionsmerkmale

    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.

    Anwendungsszenarien und Entwicklungsvorschläge

    1. Intelligenter Kundenservice und virtueller Assistent:Nutzen Sie die extrem niedrige Latenz von 150 ms, um ein reaktionsfähiges und emotionales Dialogsystem zu erstellen.
    2. Hörbücher und Filmsynchronisation:Durch eine fein abgestimmte Ton-Tag-Steuerung können die emotionalen Höhen und Tiefen und Sprechstile verschiedener Charaktere simuliert werden.
    3. Bildung und Dialektschutz:Es verfügt über einen umfangreichen integrierten Dialektdatensatz, der für den digitalen Dialektunterricht oder die Erstellung lokaler kultureller Inhalte verwendet werden kann.
    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).


    Grundlegende Verwendung von CozyVoice 2

    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.


    1. Vorbereitung und Installation der Umgebung

    Bevor Sie beginnen, stellen Sie bitte sicher, dass auf Ihrem System der NVIDIA-Treiber (empfohlen 8 GB oder mehr Videospeicher) und Conda installiert ist.

    1. Erstellen Sie eine virtuelle Umgebung:
      conda create -n cosyvoice2 python=3.10
      conda activate cosyvoice2
    2. Installieren Sie die wichtigsten Abhängigkeiten von Pynini:

      Pynini ist die Kernkomponente, die die Textnormalisierung übernimmt und über Conda installiert werden muss:

      conda install -y -c conda-forge pynini==2.1.5
    3. Kopieren Sie das Projekt und installieren Sie Abhängigkeiten:
      git clone --recursive https://github.com/FunAudioLLM/CosyVoice.git
      cd CosyVoice
      pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/

    2. Modell-Download

    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')

    3. Grundlegende Verwendung

    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.

    4. Beispiele für Entwickler-API-Aufrufe

    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.


    CosyVoice 2 lange Artikelsynthese

    Textsegmentierung und grammatikalische Integrität

    Der Kern der Generierung langer Artikel liegt in der Vorverarbeitung. Da TTS-Modelle normalerweise eine Obergrenze für die Inferenzlänge (Kontextfenster) haben, führt die direkte Eingabe von zu langem Text dazu, dass die Modellausgabe verstümmelt oder direkt abgeschnitten wird. Im Programmcode werden reguläre Ausdrücke verwendet, um die Interpunktion am Ende des Satzes genau zu erfassen. Dadurch wird sichergestellt, dass der Segmentierungspunkt in der Tonpause liegt und die Natürlichkeit der synthetisierten Sprachqualität erhalten bleibt.

    Tensor-Spleißtechnologie

    Dieser Code verwendet die native Methode Torch.cat von PyTorch, um Informationen zu verarbeiten. Im Vergleich zum Speichern jedes Audiosegments in einer Datei und dem anschließenden Zusammenführen kann das direkte Spleißen von Tensoren im GPU-/CPU-Speicher den Festplatten-I/O-Overhead erheblich reduzieren und digitales Rauschen, das zwischen Segmenten auftreten kann, wirksam eliminieren.

    Hardwareressourcen und Leistung

    Das CosyVoice2-Modell ist groß und es wird empfohlen, es in einer Umgebung mit NVIDIA-GPU zu betreiben, um die beste Generationsgeschwindigkeit zu erzielen. Bei der Verarbeitung langer Artikel führt das System die Argumentation Segment für Segment durch. Wenn der Videospeicher (VRAM) klein ist, kann der Grenzwertparameter in der Funktion segment_text entsprechend gesenkt werden, um einen stabileren Ausführungsprozess zu erreichen.
    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')
    


    CosyVoice 2 Untertitel-Synchronisationsgenerierung

    Zeitstempel-Ausrichtungslogik

    Um genaue SRT-Untertitel zu generieren, besteht der Kern darin, die genaue Länge (Dauer) jedes Audiostücks zu ermitteln. Wenn PyTorch Audio-Tensoren verarbeitet, kann die genaue Anzahl der Sekunden anhand der Abtastrate (Sample Rate) und der Tensorlänge berechnet werden, wodurch eine Entsprechung zwischen Text und Zeitleiste hergestellt wird.

    Automatisierter Generierungsprozess

    Während der Sprachsynthese zeichnet dieses Programm die Start- und Endzeit jedes Textes auf und formatiert ihn automatisch in eine Standard-SRT-Datei für den einfachen Import in Kdenlive oder andere Bearbeitungssoftware.
    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')
    

    Was beim Import in Bearbeitungssoftware zu beachten ist

    Bitte beachten Sie bei der Verwendung der generierten SRT- und WAV-Dateien folgende Punkte:

    CozyVoice 2-Befehlssteuerung

    Emotionale und nonverbale symbolische Kontrolle

    CozyVoice 2 unterstützt das Einfügen bestimmter Tags in Text, um den emotionalen Ausdruck der Stimme zu steuern oder nonverbale Aktionen hinzuzufügen. Diese Tags können die Wiedergabetreue synthetisierter Sprache erheblich verbessern, sodass KI nicht mehr nur eine starre Lektüre, sondern ein Ausdruck mit emotionalen Höhen und Tiefen ist.

    Kern-Tag-Liste

    Bitte betten Sie bei der Verwendung den Tag direkt in den Text ein. Es wird empfohlen, vor und nach dem Tag entsprechende Leerzeichen zu lassen, um den besten Verbindungseffekt zu erzielen:

    Lange Artikelverarbeitung und Tag-Einbettung

    Beim Umgang mit langem Text sollte die Logik die Beibehaltung dieser speziellen Tags beinhalten, um sicherzustellen, dass der Segmentierungsalgorithmus die Tags nicht abschneidet. Der folgende Code zeigt, wie diese Anweisungen in einem langen Textfluss angewendet werden.
    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')
    


    Entwicklung der Spracherkennung

    Entwicklungsprozess und Schlüsselphasen

    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.

    Mainstream-ASR-Entwicklungsmodelle und -Frameworks

    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.

    Technische Indikatoren, mit denen Entwickler konfrontiert sind

    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.

    API- und Cloud-integrierte Entwicklung

    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.

    Empfehlungen zur Bereitstellung und Umgebungsauswahl

    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.



    JavaScript-Zeichnung

    Leinwand und Kontext

    Grundlegende Konzepte von Canvas

    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>

    Die Rolle von getContext

    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");

    Grundlegende Zeichenoperationen

    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:

    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

    Klare Leinwand

    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);

    Dynamisches Zeichnen und Animation

    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();

    Was Sie bei der Verwendung von Canvas beachten sollten

    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.transform

    Grundlegende Konzepte

    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:

    ---

    JavaScript-Einstellungsmethode

    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
    ---

    Es hat nichts mit Breite und Höhe zu tun, aber es beeinflusst die visuelle Größe

    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
    ---

    Häufige Anwendungen

    ---

    Beispiel

    
    <style>
      #box {
        width: 100px;
        height: 100px;
        background: skyblue;
        transition: transform 0.3s;
      }
      #box:hover {
        transform: scale(1.5);
      }
    </style>
    
    <div id="box"></div>
    
    ---

    Dinge zu beachten



    Kreisdiagramm zum Zeichnen auf Leinwand

    Beispielbeschreibung

    Das folgende Beispiel stammt aus HTML<table>Daten lesen, nativ verwenden<canvas>APIsarc()Zeichnen Sie Kreisdiagramme ohne externe Pakete.

    ---

    HTML-Struktur

    <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>
    ---

    JavaScript-Programm

    
    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);
    
    ---

    veranschaulichen

    ---

    verlängern

    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

    Konzept

    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.

    Merkmale

    Grundlegendes Grammatikbeispiel

    <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>

    Gemeinsame Elemente

    Ereignisse und Interaktionen

    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="orange" onclick="alert('Sie haben auf den Kreis geklickt')" />
    </svg>

    Animationen und Stile

    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>
    

    Kombiniert mit JavaScript

    
    <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>
    

    Anwendungsbereich

    abschließend

    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.



    SVG-Wiederverwendungsmuster

    Zweck

    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.

    Grundgrammatik

    
    <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>
    

    ausstellen

    veranschaulichen

    Eigentumsvererbung

    <use>Kann geändert werdenfillstrokeund andere Attribute, wodurch die ursprüngliche Definition überschrieben wird.

    Anwendungsbereich

    Kompatibilität

    abschließend

    durch<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

    Konzept

    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.

    Merkmale

    Einfaches Beispiel

    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>

    zeigen

    Anwendungsbereich

    Häufig verwendete Kits

    abschließend

    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.



    Spirograph

    Was ist ein Spirograph?

    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.

    Implementierung von Spirograph in HTML5

    Hier ist ein Beispiel für die Implementierung eines Spirographen mit HTML5s <canvas> Element und JavaScript:



    Vergleich der JavaScript-Bibliotheken für Vektorgrafiken

    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

    Überblick

    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.

    ---

    Hauptmerkmale

    ---

    Installation und Verwendung

    1. CDN-Laden

    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    

    2. NPM-Installation

    
    npm install chart.js
    

    3. Grundlegende Anwendungsbeispiele

    <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>
    ---

    Gängige Diagrammtypen

    DiagrammtypTyp festlegenGebrauchsanweisung
    LiniendiagrammlineZeigen Sie Zeitreihen oder Trenddaten an.
    BalkendiagrammbarVergleichen Sie Werte aus verschiedenen Kategorien.
    KreisdiagrammpieZeigt die gesamte proportionale Verteilung.
    Donut-DiagrammdoughnutEine Variation des Kreisdiagramms. Die Mitte kann leer gelassen werden, um den Titel anzuzeigen.
    RadarkarteradarVergleich mehrdimensionaler Daten.
    Karte der PolarregionpolarAreaDer Effekt der Kombination von runden Kuchen und Streifen.
    ---

    Versionsprüfung

    Sie können die Version von Chart.js überprüfen, indem Sie Folgendes verwenden:

    
    console.log(Chart.version);
    
    ---

    Vor- und Nachteile

    Vorteil:

    Mangel:

    ---

    offizielle Ressourcen



    Zeichnen Sie ein Kreisdiagramm – Chart.js

    Beispielbeschreibung

    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.

    ---

    HTML-Struktur

    <!-- 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>
    ---

    JavaScript-Programm

    //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: "水果銷售比例" }
        }
      }
    });
    
    ---

    veranschaulichen

    ---

    Erweiterte Anwendung

    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?



    Beispiel für das Zeichnen eines UML-Diagramms mit HTML

    1. Zeichnen Sie mit SVG ein einfaches Kategoriediagramm

    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>
    
    Class Name + attribute1 : Type + attribute2 : Type + method1() : ReturnType + method2() : ReturnType

    2. Passen Sie UML-Elemente mithilfe von HTML und CSS an

    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>
    
    ClassName
    + attribute1 : Type
    + attribute2 : Type
    + method1() : ReturnType
    + method2() : ReturnType

    3. Verwenden Sie mermaid.js, um komplexere UML-Diagramme zu zeichnen

    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.



    Mermaid zeichnet komplexe UML-Beispiele

    Beispiel 1: Komplexes Klassendiagramm

    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:

    Beispiel 2: Assoziationen und Multiplizität

    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:

    Beispiel 3: Schnittstellen und abstrakte Klassen

    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:

    Beispiel 4: Komplexe Klassen- und Schnittstellenimplementierung

    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:



    Meerjungfrau-Testtool

    Ergebnisse generieren

    Flussdiagramm TD
        A[Start] -> B{Müssen Sie fortfahren? }
        B – Ja –> C[Vorgang ausführen]
        B – Nein –> D[Ende]
        C -> D


    So prüfen Sie, ob Mermaid-Syntaxfehler vorliegen

    1. Verwenden Sie den Mermaid Live Editor

    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.

    2. Reduzieren Sie die Komplexität beim Testen

    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.

    3. Bestätigen Sie die Version von Mermaid.js

    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.

    4. Suchen Sie nach häufigen Fehlern

    5. Verwenden Sie Entwicklertools, um Fehlermeldungen anzuzeigen

    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.

    6. Sehen Sie sich offizielle Dokumente an

    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



    Flussdiagramm

    Übersicht über das Flussdiagramm

    Nachfolgend finden Sie ein einfaches Beispiel für ein Flussdiagramm, das die logische Beziehung zwischen Entscheidungen und Aktionen veranschaulicht.

    Beispiel für ein Flussdiagramm

    Flussdiagramm TD
        A[Start] -> B{Müssen Sie fortfahren? }
        B – Ja –> C[Vorgang ausführen]
        B – Nein –> D[Ende]
        C -> D

    Beispielbeschreibung

    Wie zu verwenden

    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.



    Mermaid.js Zoom-Slider-Bibliothek

    Funktionsbeschreibung

    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.

    Bibliothekscode (mermaidZoomSlider.js)

    // 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})`;
        });
      });
    }

    Verwendung

    <!-- 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>

    Parameterbeschreibung

    Anregung

    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.



    Verschiedene Stile von Mermaid.js-Zeilen

    grundlegende Zeilensyntax

    Wird in Mermaid.js-Diagrammen verwendet-->===>Markierungen werden verwendet, um Verbindungen zwischen Knoten herzustellen. Verschiedene Symbole repräsentieren unterschiedliche Linienstile.

    Gängige 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

    Anwendungsbeispiele

    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]

    Andere Anweisungen

    abschließend

    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

    Was ist D3.js?

    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.

    Funktionen von D3.js

    Hauptmerkmale von D3.js

    1. Elemente auswählen:Verwenden Sie CSS-ähnliche Selektoren, um DOM-Elemente auszuwählen und zu bearbeiten, wie zum Beispiel:d3.select()Undd3.selectAll()
    2. Datenbindung:Binden Sie Daten an DOM-Elemente und aktualisieren Sie Ansichten basierend auf den Daten.
    3. Zoom und Skalierung:Bietet Skalierungstools und Skalierungsfunktionen, um die Datenzuordnung zu Pixeln zu erleichtern.
    4. Zeichnen Sie die Grafik:Verwenden Sie SVG-Pfad- und Formwerkzeuge, um verschiedene Diagramme wie Kreise, Rechtecke und Kurven zu erstellen.
    5. Übergangseffekte:Die integrierte Animationsfunktion unterstützt reibungslose Datenänderungen.

    Anwendungsbeispiele

    D3.js wird häufig in verschiedenen Datenvisualisierungsszenarien verwendet, wie zum Beispiel:

    Lernressourcen

    Um D3.js zu lernen, können Sie auf die folgenden Ressourcen verweisen:

    abschließend

    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.



    Beispiel für ein D3.js-Baumdiagramm

    Beispielbeschreibung

    In diesem Beispiel wird mit D3.js ein einfaches Baumdiagramm gezeichnet, um zu zeigen, wie hierarchische Strukturdaten visualisiert werden. Hier sind die wichtigsten Schritte:

    Beispielcode

    
    <!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>
    
    

    Ergebnisanzeige

    Nachdem Sie diesen Code ausgeführt haben, sehen Sie ein Baumdiagramm:

    Anwendungen und Erweiterungen

    Dieses Beispiel kann auf komplexere Hierarchien erweitert oder der Stil an unterschiedliche Anforderungen angepasst werden. Zum Beispiel:



    Rechteckige Treemap Treemapping

    Konzeptnotiz

    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.

    Anwendungsszenarien

    Beispiel (erstellt mit D3.js)

    Vorteil

    Dinge zu beachten



    Beispiel für ein Cytoscape.js-Netzwerkdiagramm

    Grundlegende Verwendung

    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.

    Beispiel für ein einfaches Netzwerkdiagramm

    veranschaulichen



    Cytoscape.js verschiedene Anwendungsbeispiele

    1. Kreislayout

    2. Drag-and-Click-Interaktion

    3. Stil nach Klasse

    veranschaulichen



    JavaScript-Bibliothek zum Zeichnen von Schaltplänen

    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)


    JointJS zeigt grundlegende Schaltplankomponenten an



    3D-Gleichungsdarstellung

    Funktionsbeschreibung

    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.

    HTML-Struktur

    <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>

    Bedienungsanleitung

    Beispiel für eine austauschbare Funktion

    veranschaulichen

    In 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.



    JavaScript-Bibliothek für die 3D-Zeichnung chemischer Strukturen

    3Dmol.js

    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 Web Components

    ChemDoodle bietet 2D- und 3D-Strukturzeichnungen, unterstützt eine Vielzahl chemischer Formate und eignet sich für Lehr- und Webanwendungen.

    JSmol

    JSmol ist eine JavaScript-Version von Jmol, die sich zur Darstellung großer Moleküle wie Proteine ​​oder Kristallstrukturen eignet.

    Mol*

    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.

    Vergleichstabelle

    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


    3Dmol.js zeigt Benzolmoleküle an

    Gebrauchsanweisung

    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.

    Nutzungsschritte

    1. Speichern Sie das folgende Programm unterbenzene.html
    2. Verwenden Sie einen lokalen HTTP-Server (z. B. Python).python -m http.server) ist eingeschaltet.
    3. Im Browser eingebenhttp://localhost:8000Ergebnisse anzeigen.

    HTML-Code

    <!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>

    Dinge zu beachten

    3Dmol.js Anzeige von Benzolmolekülen (XYZ-Format)



    Benutzerdefinierte Google-Karten

    Überblick

    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.

    ---

    Schritt 1: Beantragen Sie einen Google Maps-API-Schlüssel

    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

    ---

    Schritt 2: HTML-Struktur erstellen

    <!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>
    ---

    Schritt 3: Erweiterbare Funktionalität

    ---

    Häufig verwendete Einstellungen

    Eigentumverwenden
    centerLegen Sie die anfänglichen Mittelpunktskoordinaten der Karte fest.
    zoomKartenzoomstufe (1–20).
    mapTypeIdAnzeigestil, der sein kannroadmapsatellitehybridterrain
    iconBenutzerdefiniertes Markierungssymbol.
    infoWindowZeigt das Informationsfenster nach dem Klicken auf die Markierung an.
    ---

    offizielle Ressourcen



    Ton im Web

    JavaScript-Wiedergabe erfolgt mithilfe der MIDI-API

    veranschaulichen

    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

    Beispiel: Do Re Mi mit einem Gitarrenton spielen

    <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>

    veranschaulichen

    Unterstützte Gitarrensounds

    abschließend

    verwendensoundfont-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.



    JavaScript-Wiedergabe Do Re Mi mit dem AudioContext-Synthesizer

    veranschaulichen

    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)

    Beispielprogramm: integrierte Soundwiedergabe Do Re Mi

    <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>

    Besonderheit

    Ratschläge zur analogen Gitarrentechnik

    abschließend

    Die 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.



    Beschreibung des Typs und der Klangfarbe von OscillatorNode

    Eingebauter osc.type-Typ

    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

    Demonstration der Nutzung

    const osc = audioContext.createOscillator();
    osc.type = "Sägezahn"; // Kann in „Sinus“, „Quadrat“, „Dreieck“, „Benutzerdefiniert“ geändert werden
    osc.frequenz.value = 440; // A4
    osc.start();

    Ergänzung: Benutzerdefinierte Wellenform

    
    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";
    

    abschließend

    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.



    Spielen Sie die Do Re Mi-Phrase mit WebAudioFont ab

    veranschaulichen

    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.

    Kurzes Beispiel: Do Re Mi spielen (mit Klavier- oder Gitarrenklängen)

    
    
    
    
    
    
    

    Schlüsselerklärung

    Austauschbare Sounds

    Zusammenfassen

    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]
    
    T:0000
    資訊與搜尋 | 回dev首頁
    email: Yan Sa [email protected] Line: 阿央
    電話: 02-27566655 ,03-5924828
    阿央
    泱泱科技
    捷昱科技泱泱企業