Разработка мультимедийных программ

Разработка мультимедийных программ относится к технической области, которая объединяет текст, изображения, аудио, видео и анимацию для реализации интерактивных функций с помощью языка программирования. Его разработка сосредоточена на аппаратном ускорении, эффективности кодирования и плавности взаимодействия с пользователем.

основные компоненты разработки

• Графический рендеринг:Обработка 2D-векторного рисования и рендеринга 3D-моделей. Обычно используемые API включают OpenGL, Vulkan или DirectX.
• Обработка аудио и видео:Приложения, включающие кодеки (кодеки), такие как H.264/AVC, H.265/HEVC, AAC и широко используемый фреймворк FFmpeg.
• Технология синхронизации:Убедитесь, что звук и видео точно выровнены во время воспроизведения, чтобы избежать рассинхронизации видео и звука.
• Интерактивный интерфейс:Обрабатывайте ввод с помощью мыши, сенсорного ввода, жестов или устройств VR/AR с помощью программирования, управляемого событиями.

Основные инструменты и языки разработки

Общие процессы разработки

1. Анализ требований: определение типов мультимедиа (например, потокового мультимедиа, интерактивных игр, образовательного программного обеспечения).
2. Подготовка ресурса: сбор материала и конвертация формата (оптимизация размера и разрешения файла).
3. Программирование: реализация логики воспроизведения, эффектов фильтров или интерактивных алгоритмов.
4. Настройка производительности: выполните управление памятью и многопоточную оптимизацию, чтобы обеспечить работу с высокой частотой кадров.
5. Развертывание и тестирование: тестирование кросс-платформенной совместимости, чтобы убедиться, что оно может работать с экранами разных размеров и характеристиками оборудования.

Примечание. При разработке мультимедийных программ, требующих большого объема вычислений, аппаратному декодированию следует отдавать приоритет, чтобы снизить нагрузку на процессор.

DirectX

DirectX — это серия интерфейсов прикладного программирования (API), разработанных Microsoft, позволяющих программному обеспечению (особенно играм) напрямую взаимодействовать с оборудованием, таким как видеокарты и карты звуковых эффектов. Это основной принцип разработки мультимедиа для платформ Windows и консолей Xbox.

Основные компоненты API

• Direct3D：Основная часть DirectX отвечает за обработку рендеринга 3D-графики и широко используется в 3D-играх и программах для рисования.
• Direct2D：Обеспечивает высокопроизводительные возможности рендеринга 2D-геометрии, растровых изображений и текста.
• DirectWrite：Используется для высококачественной верстки и рендеринга текста, поддерживает аппаратное ускорение.
• DirectSound / XAudio2：Управление воспроизведением звука, записью и специальными эффектами пространственного звука (3D-аудио).
• DirectInput / XInput：Обрабатывая данные с устройств ввода, таких как игровые джойстики, мыши и клавиатуры, XInput оптимизирован для контроллеров Xbox.
• DXGI (DirectX Graphics Infrastructure)：Управляет адаптерами дисплея, перечисляет режимы отображения и обрабатывает фоновую замену буфера.

Сравнение эволюции версий DirectX

Преимущества разработки

1. Аппаратная абстракция: разработчикам не нужно писать специальный код для видеокарт разных марок.
2. Высокая производительность: DirectX 12 позволяет разработчикам более детально управлять ресурсами графического процессора и сокращать задержки системы.
3. Полная экосистема: тесно интегрирована с цепочкой инструментов разработки Visual Studio и Microsoft и богата инструментами отладки (такими как PIX).

Примечание. При разработке современных игр разработчики обычно вызывают DirectX через такие движки, как Unity или Unreal Engine, вместо того, чтобы напрямую писать низкоуровневые инструкции, чтобы повысить эффективность разработки.

Media Foundation

Media Foundation (MF) — это мультимедийная платформа, запущенная Microsoft после Windows Vista и предназначенная для замены старого DirectShow. Он использует новую конструкцию конвейера и оптимизирован для видео высокого разрешения, управления цифровыми правами (DRM) и более эффективного аппаратного ускорения. Это основная технология современных приложений Windows для обработки аудио и видео.

Основные архитектурные компоненты

Media Foundation разбивает процесс обработки мультимедиа на три основных уровня. Такая конструкция обеспечивает чрезвычайно высокую гибкость управления:

• Источники СМИ:Отвечает за чтение необработанных данных, будь то из локальных файлов, сетевых потоков или устройств аппаратного перехвата.
• Медиа-фонд «Трансформации» (MFT):Это наиболее важный процессор, отвечающий за кодирование, декодирование, преобразование цветового пространства или добавление специальных эффектов изображения. MFT имеют обширную поддержку аппаратного ускорения (например, через DXVA).
• Медиа-приемники:Отвечает за вывод обработанных данных, например их отображение на экране (Enhanced Video Renderer), запись файлов или потоковую передачу в сеть.

Сравнение технических преимуществ

Общий интерфейс разработки

1. Source Reader：Упрощенный API для разработчиков, которым нужно только получить декодированные кадры из архива или камеры.
2. Sink Writer：Быстрый инструмент для кодирования аудио и видео данных в файлы определенного формата.
3. Media Session：Полноценный контроллер конвейера обеспечивает полный контроль над воспроизведением, паузой, переходом и другими действиями.

Примечание. Несмотря на превосходную производительность Media Foundation, конструкция его API относительно сложна и строга. Разработчикам рекомендуется использовать инструмент MFTrace, предоставленный Microsoft для отладки, чтобы отслеживать поток событий в медиаконвейере.

DirectShow

DirectShow — это мультимедийная платформа, основанная на модели компонентных объектов (COM), в основном используемая для захвата и воспроизведения аудио и видео на платформе Windows. Хотя позже Microsoft выпустила Media Foundation в качестве своего преемника, DirectShow по-прежнему широко используется в промышленных камерах, устройствах для обработки медицинских изображений и традиционном программном обеспечении для аудио и видео благодаря своей высокой совместимости и гибкости.

модель графа фильтра

Основная концепция DirectShow — это Filter Graph, который обрабатывает мультимедийные данные, соединяя различные фильтры в ссылки:

• Исходные фильтры:Отвечает за чтение файлов или получение необработанных данных с аппаратных устройств (например, сетевых камер).
• Фильтры преобразования:Отвечает за обработку данных, такую ​​как декодирование, преобразование формата, нанесение водяных знаков или обработка изображений.
• Фильтры рендерера:Отвечает за вывод обработанных данных, например отображение изображений на экране или отправку звука на динамики.

Основные функции разработки

Преимущества и проблемы развития

1. Высокая модульность:Разработчики могут писать собственные фильтры и вставлять их в существующие графические ссылки.
2. Автоматизированная проводка:Он имеет механизм Intelligent Connect, который может автоматически находить и комбинировать необходимые фильтры.
3. Кривая обучения:Из-за глубокой зависимости от интерфейса COM он более сложен для разработчиков, которые не знакомы с индикаторами COM и управлением памятью.

Примечание. При проведении современной разработки, если вам не требуется поддержка старых систем, Microsoft рекомендует отдать приоритет использованию Media Foundation, который имеет больше преимуществ при работе с контентом высокого разрешения и управлении цифровыми правами (DRM).

Vulkan

Vulkan — это кроссплатформенный графический и вычислительный API нового поколения, разработанный Khronos Group. В отличие от OpenGL, Vulkan — это низкоуровневый API, предназначенный для обеспечения более прямого управления оборудованием, минимизации накладных расходов драйверов и улучшения использования многоядерных процессоров.

Основные особенности конструкции

Логика проектирования Vulkan требует от разработчиков брать на себя больше управленческих обязанностей в обмен на максимальную производительность:

• Явный контроль:Разработчики должны сами управлять распределением памяти, синхронизацией потоков и жизненным циклом ресурсов, а не позволять драйверу делать это автоматически.
• Многопоточная оптимизация:Поддерживает создание командных буферов (Command Buffers) в нескольких потоках выполнения параллельно, полностью устраняя узкое место традиционных API в одном потоке выполнения.
• Предварительно скомпилированные шейдеры:Используя промежуточный формат SPIR-V, разработчики могут предварительно скомпилировать код шейдера, сокращая время загрузки приложений и улучшая согласованность между оборудованием.
• Единый API:Единый API работает на настольных компьютерах, мобильных устройствах (поддерживается Android 7.0+) и встроенных системах.

Различия между Vulkan и OpenGL

ключевые компоненты развития

1. Instance & Physical Device：Инициализируйте Vulkan и перечислите оборудование видеокарты в системе.
2. Logical Device & Queues：Устанавливайте логические соединения с физическими устройствами и получайте очереди для обработки графики, вычислений или задач передачи.
3. Pipeline State Objects (PSO)：Предварительно инкапсулируйте состояние рендеринга (например, режим наложения, тест глубины), чтобы избежать динамического изменения состояния во время рисования, что приводит к падению производительности кадров.
4. Render Pass：Четкое определение цели рендеринга и этапов операции способствует оптимизации тайлового рендеринга (рендеринг на основе тайлов) на мобильных графических процессорах.

Примечание. Из-за чрезвычайно высокого порога разработки Vulkan обычно рекомендуется для ядер 3D-игровых движков, требующих высочайшей производительности (например, id Tech 7), или для программ научного моделирования, требующих кросс-платформенных высокопроизводительных вычислений.

Разработка программы машинного зрения

OpenCV

1. Что такое OpenCV?

OpenCV (библиотека компьютерного зрения с открытым исходным кодом) — это библиотека программного обеспечения для компьютерного зрения и машинного обучения с открытым исходным кодом для обработки и анализа изображений в реальном времени.

2. Поддерживаемые функции

• Обработка изображений: фильтрация изображений, обнаружение краев, выравнивание гистограмм и т. д.
• Извлечение признаков: обнаружение и описание SIFT, SURF, ORB и других характерных точек.
• Обнаружение и распознавание объектов: обнаружение лиц, отслеживание объектов, сопоставление изображений.
• Преобразование изображения: аффинное преобразование, проекционное преобразование, коррекция перспективы.
• Машинное обучение: встроенная поддержка SVM, KNN, случайного леса и других моделей.

3. Поддерживаемые платформы

• Windows
• Linux
• MacOS
• Android
• iOS

4. Примеры использования

# Прочитайте изображение и отобразите его
импортировать cv2
изображение = cv2.imread("image.jpg")
cv2.imshow("Изображение", изображение)
cv2.waitKey(0)
cv2.destroyAllWindows()

5. Ресурсы и документы

• Официальный сайт:https://opencv.org/
• GitHub：https://github.com/opencv/opencv
• документ:https://docs.opencv.org/

cv::imread

1. Базовая грамматика

В OpenCV основной функцией чтения изображений являетсяcv::imread. Он загрузит файл изображения какcv::MatМатричный формат.

#include <opencv2/opencv.hpp>

// Прототип грамматики
cv::Mat img = cv::imread(const std::string& filename, int flags = cv::IMREAD_COLOR);

Часто используемые теги (Флаги):

• cv::IMREAD_COLOR: Значение по умолчанию, загрузка 3-канального изображения BGR.
• cv::IMREAD_GRAYSCALE: преобразовать изображение в одноканальное изображение в оттенках серого.
• cv::IMREAD_UNCHANGED: Загрузите исходное изображение, содержащее альфа-канал.

2. Механизм проверки и обработки исключений

Ключевые идеи:cv::imreadне удалось иИсключения C++ не создаются., поэтому традиционный метод try-catch для него неэффективен. В случае сбоя чтения (например, ошибка пути, неподдерживаемый формат или недостаточные разрешения) он вернет пустое сообщение.cv::Matобъект.

Следует использовать правильный поток обработки.empty()Функция-член для проверки:

#include <opencv2/opencv.hpp>
#include <iostream>

интервал основной() {
    std::string path = "data/image.jpg";
    cv::Mat img = cv::imread(путь);

    // Необходимо проверить, успешно ли загружено изображение
    если (img.empty()) {
        std::cerr << «Ошибка: невозможно прочитать файл изображения!» << станд::эндл;
        std::cerr << «Пожалуйста, подтвердите правильность пути:» << путь << станд::эндл;
        вернуть -1;
    }

    //Выполняем операцию после успешного чтения
    std::cout << "Ширина изображения: " << img.cols << " Высота: " << img.rows << станд::эндл;
    вернуть 0;
}

3. Анализ распространенных причин отказов

еслиimg.empty()верно, обычно по следующим причинам:

4. Расширенное решение: чтение путей на китайском языке.

Если чтение не удается из-за пути Windows на китайском языке, рекомендуется сначала прочитать файл в буфер памяти, а затемcv::imdecodeЧтобы декодировать:

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

Группировка групп точек колебаний

Если порядок групп точек (например, винтовых кромок или синусоидальных волн) неупорядочен, их необходимо сначала спроецировать в направлении подобранной прямой линии и отсортировать, а затем точки можно правильно сгруппировать в соответствии с их положительными и отрицательными смещениями относительно прямой линии (расстояние со знаком). Ниже приведен план реализации интеграции OpenCV и стандартного C++.

Определение точки координат и сортировка по расстоянию

Сначала реализуйте указанную функцию сортировки по расстоянию между точками, которая вам нужна. Это можно использовать для определения начальной точки или конкретной характерной точки.

#include <vector>
#include <массив>
#include <алгоритм>
#include <opencv2/opencv.hpp>

используя Point2D = std::array<float, 2>;
используя Points = std::vector<Point2D>;

пространство имен GeometryPointsUtil {
    bool FindSortedPointsByDistOfPoint(Points& retPoints, const Points& allPoints, const Point2D& aPoint) {
        if (allPoints.empty()) возвращает 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];
            // Используйте сравнение суммы квадратов, чтобы избежать накладных расходов на операцию sqrt
            return (dx1 * dx1 + dy1 * dy1) < (dx2 * dx2 + dy2 * dy2);
        });
        вернуть истину;
    }
}

Алгоритм группировки вдоль линий для групп точек, находящихся не в порядке

Для колеблющихся линий эта функция автоматически подгоняет прямую линию, сортирует проекцию и сегментирует ее по обеим сторонам прямой линии.

std::vector<Points> SplitOscillatingPoints(const Points& allPoints) {
    if (allPoints.size() < 2) вернуть {allPoints};

    // 1. Примерка прямой линии
    std::vector<cv::Point2f> резюме;
    for (const auto& p: allPoints) cvPts.push_back({p[0], p[1]});
    
    строка cv::Vec4f; // (vx, vy, x0, y0)
    cv::fitLine(cvPts, line, cv::DIST_L2, 0, 0,01, 0,01);
    float vx = строка[0], vy = строка[1], x0 = строка[2], y0 = строка[3];

    // 2. Сортировка проекций: убедитесь, что точки расположены вдоль прямой линии
    структура ProjectedPoint {
        Point2D оригинал;
        плавать т; // длина проекции
        поплавковая сторона; // алгебраическое расстояние до прямой
    };

    std::vector<ProjectedPoint> прогнозируемый;
    поплавок nx = -vy; // вектор нормали x
    поплавок NY = vx; // вектор нормали y

    for (const auto& p : allPoints) {
        float dx = p[0] - x0;
        float dy = p[1] - y0;
        float t = dx * vx + dy * vy; // Смещение, проецируемое на прямую линию
        float s = dx * nx + dy * ny; // Расстояние перпендикулярно прямой (включая знаки плюс и минус)
        projected.push_back({p, t, s});
    }

    std::sort(projected.begin(), projected.end(), [](const ProjectedPoint& a, const ProjectedPoint& b) {
        вернуться в < б.т;
    });

    // 3. Группировка на основе положительных и отрицательных переходов знаков
    std::vector<Points> сегменты;
    if (projected.empty()) возвращает сегменты;

    Очки текущей группы;
    bool LastSide = (projected[0].side >= 0);

    for (const auto& item: спроектировано) {
        bool currentSide = (item.side >= 0);

        if (currentSide != LastSide && !currentGroup.empty()) {
            сегменты.push_back(currentGroup);
            текущаягруппа.очистить();
        }
        
        currentGroup.push_back(item.original);
        LastSide = CurrentSide;
    }

    if (!currentGroup.empty()) elements.push_back(currentGroup);
    возвратные сегменты;
}

Пояснение моментов реализации

• Сортировка проекции: используйте скалярное произведение (Dot Product) вектора направления и точки для расчета величины проекции t, что решает проблему хаотического порядка входной группы точек.
• Алгебраическое расстояние: значение стороны, рассчитанное с использованием вектора нормали, знак которого показывает, на какой стороне прямой линии находится точка, является ключом к различению областей пика и впадины.
• Обработка шума: если результаты слишком тривиальны, рекомендуется проверить сегменты [i].size() после группировки и исключить аномальные небольшие группы со слишком малым количеством точек.

Halcon

Функции

Halcon — это мощное программное обеспечение для промышленного машинного зрения, разработанное MVTec и специально предназначенное для обработки изображений и приложений машинного зрения.

• Поддерживает несколько языков программирования: таких как C, C++, C# и Python.
• Кроссплатформенная поддержка: Windows, Linux и встроенные платформы.
• Обеспечивает более 2000 операторов обработки изображений.
• Эффективное аппаратное ускорение: поддержка графического процессора и многоядерной обработки.

Функция

• Обработка изображений: фильтрация, морфологические операции, сегментация изображений.
• Обнаружение функций: обнаружение краев, подгонка окружностей и линий.
• Распознавание объектов: сопоставление шаблонов, определение формы, анализ цвета.
• 3D-приложения: обработка облаков точек, стереозрение, создание карт глубины.
• Распознавание штрих-кода и QR-кода.

Области применения

• Промышленная автоматизация: дефектоскопия, измерение размеров.
• Медицинская визуализация: клеточный анализ, тестирование органов.
• Производство автомобилей: проверка деталей, анализ точности сборки.
• Продукты питания и упаковка: классификация продукции, проверка упаковки.

ресурс

• Официальный сайт:https://www.mvtec.com/products/halcon/
• документ:https://www.mvtec.com/documentation/

Разработка программы для редактирования видео

Общие функции

• Редактируйте и объединяйте: удаляйте ненужные клипы или объединяйте несколько клипов.
• Эффекты перехода: визуальные эффекты, такие как появление и исчезновение, скольжение, масштабирование, перелистывание страниц и т. д.
• Субтитры и текст: добавляйте файлы субтитров или встроенные текстовые эффекты.
• Обработка звука: фоновая музыка, наложение звуковых эффектов, шумоподавление, регулировка громкости.
• Фильтры и спецэффекты: цветокоррекция, размытие, компоновка спецэффектов.
• Многодорожечное редактирование: многодорожечное микширование видео, аудио и изображений.
• Вывод и преобразование: вывод в различных разрешениях и форматах (MP4, MOV, GIF и т. д.).

Общие инструменты и библиотека

• FFmpeg: Кроссплатформенный инструмент и библиотека командной строки, самая мощная
• MoviePy（Python）: основан на FFmpeg, поддерживает автоматическое редактирование, синтез и субтитры.
• OpenCV: Обработка видео покадрово, подходит для создания специальных эффектов изображения и приложений компьютерного зрения.
• GStreamer: Модульная платформа аудио и видео, поддерживающая потоковую передачу и обработку видео.
• AVFoundation（Apple）: API обработки видео для приложений macOS/iOS.
• Media Foundation（Windows）:Официальный API видео для платформы Windows.
• Shotstack / Cloudinary / Kapwing API: Облачные сервисы редактирования и автоматизации видео.
• Adobe Premiere Pro API:Профессиональная автоматизация редактирования видео и разработка плагинов.

Примеры применения

• Автоматическое редактирование и создание субтитров для платформ коротких видео (таких как TikTok и Reels)
• Производство обучающего видео: объединение слайдов и аудиопояснений
• Реклама и маркетинг: добавляйте переходы, фильтры и фоновую музыку.
• Наблюдение и распознавание изображений: объединение искусственного интеллекта для обнаружения и анализа изображений

Программное обеспечение для редактирования видео с открытым исходным кодом

Shotcut — это бесплатное программное обеспечение для редактирования видео с открытым исходным кодом, которое поддерживает несколько форматов и имеет множество мощных инструментов редактирования. Особенности включают в себя:

• Поддерживает редактирование видео 4K.
• Многодорожечная временная шкала позволяет редактировать многоуровневое видео и аудио.
• Он имеет богатые визуальные эффекты и эффекты перехода.
• in C++

Применимые платформы: Windows, Mac, Linux.

OpenShot — это простой в использовании инструмент для редактирования видео с открытым исходным кодом, который является мощным и поддерживает несколько форматов. Его основные особенности включают в себя:

• Поддерживает редактирование перетаскиванием, простое и удобное в использовании.
• Богатые эффекты кат-сцены и функции анимированных титров.
• Временная шкала полностью функциональна и поддерживает несколько слоев и регулировку скорости видео.
• in Python

Применимые платформы: Windows, Mac, Linux.

Blender — это известное программное обеспечение для 3D-моделирования и анимации с открытым исходным кодом и встроенным мощным видеоредактором, подходящим для редактирования видео и создания спецэффектов. Его особенности включают в себя:

• Расширенные возможности редактирования и композитинга видео.
• Поддерживает 3D-модели, анимацию и визуальные эффекты.
• Идеально подходит для профессионального производства фильмов и анимации.
• in C/C++ for kernel, Python for plugins

Применимые платформы: Windows, Mac, Linux.

Kdenlive — это широко используемое программное обеспечение для редактирования видео с открытым исходным кодом в Linux, которое также поддерживает Windows. К его основным функциям относятся:

• Многодорожечное редактирование поддерживает несколько видео- и аудиоформатов.
• Богатые встроенные эффекты перехода и фильтры.
• Редактирование временной шкалы осуществляется плавно и подходит для долгосрочных проектов.
• in C++

Применимые платформы: Windows, Mac, Linux.

Lightworks предлагает бесплатную и платную версии, причем бесплатная версия предлагает базовые возможности редактирования. Особенности включают в себя:

• Инструмент профессионального уровня для редактирования видео, широко используемый в кинопроизводстве.
• Поддерживает редактирование в реальном времени и редактирование аудио.
• Бесплатная версия поддерживает экспорт 720p.
• in C++

Применимые платформы: Windows, Mac, Linux.

Вышеупомянутое программное обеспечение для редактирования видео с открытым исходным кодом предоставляет мощные функции, которые подходят для различных уровней редактирования видео, от простого редактирования домашнего видео до профессионального видеопроизводства.

Рейтинг Google по объему поиска

Полезная библиотека программ для редактирования видео.

FFmpeg

• Мощный кроссплатформенный инструмент и библиотека для обработки видео.
• Поддерживает преобразование формата, редактирование, объединение, специальные эффекты, субтитры, запись, потоковую передачу и т. д.
• Вы можете работать через командную строку или использовать языки программирования (такие как Python, C/C++, Java) для вызова API.
• Открытый исходный код, активное сообщество, богатая документация.

MoviePy（Python）

• Библиотека Python, основанная на FFmpeg, простая и удобная в использовании.
• Поддерживает такие функции, как редактирование, объединение, добавление субтитров, добавление музыки и преобразование видео в GIF.
• Подходит для автоматической обработки видео и генерации сценариев.

OpenCV（C++/Python）

• В основном библиотека обработки изображений, но также поддерживает операции с видео.
• Может обрабатывать видео покадрово, например, распознавание лиц, отслеживание объектов, визуальные эффекты и т. д.
• Можно использовать в сочетании с FFmpeg для расширения функций.

GStreamer

• Модульная мультимедийная платформа, поддерживающая редактирование, потоковую передачу и запись видео.
• Поддерживает Linux, Windows, macOS
• Подходит для создания пользовательских конвейеров обработки видео.

AVFoundation（macOS/iOS）

• Официальный API обработки мультимедиа Apple
• Может использоваться для редактирования видео, обработки звука, записи и создания специальных эффектов в реальном времени.
• Поддержка Swift, Objective-C

Microsoft Media Foundation（Windows）

• Мультимедийный API Windows
• Поддерживает редактирование, транскодирование и потоковую передачу видео.
• Подходит для разработки настольных приложений или приложений UWP для платформ Windows.

Kapwing API / Shotstack / Cloudinary

• API-сервис облачного редактирования видео
• Подходит для веб-приложений и интеграции сервисов SaaS.
• Поддерживает синтез видео, субтитры, переходы, форматы преобразования и т. д.
• Большинство из них являются платными сервисами, предоставляющими RESTful API.

Adobe Premiere Pro API（Adobe UXP）

• API расширения для редактирования видео, предоставленный Adobe
• Плагины Premiere можно разрабатывать с помощью JavaScript.
• Идеально подходит для автоматизации профессиональных рабочих процессов редактирования видео.

OpenShot

Введение в проект

OpenShot — бесплатный видеоредактор с открытым исходным кодом, название проекта:OpenShot/openshot-qt, в основном на основеPythonиQtразработка. Целью проекта является создание простого в использовании и многофункционального инструмента для редактирования видео, подходящего для пользователей всех уровней.

Функции

• Многодорожечное редактирование:Поддерживает несколько временных дорожек, позволяя пользователям накладывать видео, аудио и изображения.
• Спецэффекты и переходы:Предоставляет множество специальных эффектов и эффектов перехода, помогающих пользователям создавать видеоролики профессионального качества.
• Анимация и ключевые кадры:Поддерживает анимационные эффекты и ключевые кадры, чтобы сделать изображение более динамичным.
• Поддержка многоформатного вывода:Можно экспортировать различные форматы видео, подходящие для различных устройств воспроизведения.

Техническая архитектура

OpenShot используетPyQtв качестве графического интерфейса пользователя и в сочетании сlibopenshot(реализация C++) для реализации основной логики редактирования видео. Кроме того, OpenShot используетFFmpegДля поддержки декодирования и кодирования нескольких форматов.

Контекст использования

OpenShot подходит для пользователей, которым нужны простые, но мощные возможности редактирования видео. OpenShot предоставляет гибкие инструменты и плагины, упрощающие редактирование и создание видео как для любительских создателей видео, так и для образовательных целей.

сообщество и вклад

Проект OpenShot имеет активное сообщество открытого исходного кода, и пользователи и разработчики могут вносить свой код, сообщать о проблемах или предлагать новые функции через GitHub. Приглашаем всех принять участие и помочь улучшить функциональность и стабильность OpenShot.

Пользователи могут загрузить исходный код через страницу GitHub или загрузить исполняемый файл с официального сайта OpenShot. Подробные инструкции по установке и документация также доступны на GitHub.

Автоматизация Python Kdenlive

Как работают файлы проекта Kdenlive (KDENLIVE)

Реализация сценария автоматического импорта

импортировать ОС
подпроцесс импорта

def create_kdenlive_project(project_path, video_path, audio_path, srt_path):
    """
    Создайте базовый XML-файл проекта Kdenlive и импортируйте ресурсы.
    """
    # Получите абсолютный путь к файлу, чтобы Kdenlive мог его правильно прочитать
    video_abs = os.path.abspath(video_path)
    audio_abs = os.path.abspath(audio_path)
    srt_abs = os.path.abspath(srt_path)

    # Базовая структура Kdenlive MLT (упрощенная версия)
    kdenlive_xml = f"""<?xml version="1.0"coding="UTF-8"?>
<mlt version="7.24.0" title="Автоматически созданный проект">
  <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">
    <entry Producer="video_main"/>
    <entry Producer="audio_main"/>
    <entry Producer="subtitle_main"/>
  </плейлист>

  <трактор id="main_timeline">
    <многодорожечный>
      <track name="Видео-трек">
        <entry Producer="video_main" in="0" out="1000"/>
      </трек>
      <track name="Аудиодорожка">
        <entry Producer="audio_main" in="0" out="1000"/>
      </трек>
    </многодорожечный>
  </трактор>
</млт>
"""

    с open(project_path, "w",coding="utf-8") как f:
        f.write(kdenlive_xml)
    print(f"Файл проекта создан: {project_path}")

def open_with_kdenlive(project_path, kdenlive_exe_path):
    """
    Запустите Kdenlive и загрузите сгенерированный проект.
    """
    попробуйте:
        # Используйте подпроцесс, чтобы открыть программу и ввести параметры файла
        subprocess.Popen([kdenlive_exe_path, project_path])
        print("Запускаем Kdenlive...")
    кроме исключения как e:
        print(f"Ошибка запуска: {e}")

если __name__ == "__main__":
    # Установить путь к файлу
    МОЕ_ВИДЕО = "input_video.mp4"
    MY_AUDIO = "output_voice.wav"
    MY_SRT = "output_subtitle.srt"
    SAVE_PROJECT = "auto_project.kdenlive"
    
    # Путь к исполняемому файлу Kdenlive (пример для Windows, Linux обычно напрямую использует «kdenlive»)
    KDENLIVE_PATH = r"C:\Program Files\kdenlive\bin\kdenlive.exe"

    # 1. Создать файл проекта
    create_kdenlive_project(SAVE_PROJECT, MY_VIDEO, MY_AUDIO, MY_SRT)
    
    # 2. Запустите Kdenlive
    open_with_kdenlive (SAVE_PROJECT, KDENLIVE_PATH)

Расширенные предложения по автоматизации

• MLT Framework：Kdenlive разработан на основе движка MLT. Если вам необходимо выполнить чрезвычайно сложное автоматическое редактирование (например, автоматическое переключение изображений в зависимости от амплитуды звука), рекомендуется выполнить поискmelt cliИнструмент, который визуализирует фильмы напрямую, не открывая графический интерфейс.
• Обработка субтитров:В версиях после Kdenlive 23.x дорожки субтитров обрабатываются более независимо. Если субтитры не отображаются после импорта XML, вручную выберите «Проект» > «Субтитры» > «Импорт файла SRT» в интерфейсе Kdenlive.
• Выход из пути:При использовании Python для обработки путей в системах Windows обязательно используйте необработанные строки (r"path") или замените обратную косую черту косой чертой, чтобы избежать ошибок анализа XML.

Мультимедийная платформа MLT

Базовая архитектура MLT (Media Lovin' Toolkit)

Компоненты МЛТ

• Продюсеры:Отвечает за чтение оригинальных материалов (таких как видео в формате MP4, аудио в формате WAV, изображения).
• Фильтры:Воздействие на производителя, например регулировка яркости, громкости или поворота.
• Потребители:Ответственный за выпуск. Это может быть область просмотра SDL (предварительный просмотр) или кодировщик FFMPEG (отрисованный архив).
• Тракторы:Контейнер, используемый для управления несколькими треками и обработки синтеза и переходов между треками.

Использование Python для управления примерами XML MLT

подпроцесс импорта

# Определить простую XML-структуру MLT
# Этот XML определяет порядок воспроизведения двух фрагментов материала.
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" />
  </плейлист>
</млт>
"""

#Записываем содержимое в файл
с open("auto_edit.mlt", "w",coding="utf-8") как f:
    f.write(mlt_xml_content)

Защиту render_video(mlt_file, выходной_файл):
    """
    Используйте инструмент командной строки Melt для прямой рендеринга видео (не открывая графический интерфейс).
    """
    # Melt — это инструмент интерфейса командной строки для MLT.
    команда = [
        «растопить»,
        млт_файл,
        "-consumer", f"avformat:{output_file}",
        "acodec=aac", "vcodec=libx264", "preset=fast"
    ]
    
    попробуйте:
        print(f"Начать фоновый рендеринг: {output_file}...")
        subprocess.run(команда, проверка=True)
        print("Рендеринг завершен!")
    кроме FileNotFoundError:
        print("Ошибка: исполняемый файл Melt не найден, пожалуйста, подтвердите, установлена ли платформа MLT.")

если __name__ == "__main__":
    #Выполняем рендеринг
    render_video("auto_edit.mlt", "final_result.mp4")

Почему стоит выбрать MLT для автоматизации?

• Межплатформенная согласованность:MLT XML очень универсален для Windows, Linux и macOS.
• Редактирование без потерь:XML записывает только точки и параметры редактирования и не изменяет исходный файл материала.
• Преимущества производительности:черезmeltИнструмент командной строки выполняет фоновый рендеринг, который намного быстрее и стабильнее, чем ручной экспорт Kdenlive.
• Идеальное сочетание с CosyVoice:Вы можете позволить Python сначала вызвать CosyVoice для генерации голоса и SRT, затем автоматически рассчитать момент времени и записать его в MLT XML и, наконец, сгенерировать полное короткое видео одним щелчком мыши.

Автоматизация обрезки Python

Этот скрипт использует распознавание изображений для позиционирования элементов пользовательского интерфейса. Перед выполнением запишите маленькие значки кнопок «Изображение и текст в фильмы» и «Создать видео» в интерфейсе редактирования и сохраните их какbtn_start.pngиbtn_generate.pngСохраните его в том же каталоге, что и код программы.

Подготовка

Сначала установите необходимые библиотеки Python:

pip install pyautogui pyperclip opencv-python

Примеры кода автоматизации

импортировать ОС
время импорта
импортпиавтогуи
импортировать пайперклип

# Установить параметры
JIANYING_PATH = r"C:\Users\YourName\AppData\Local\JianyingPro\Apps\JianyingPro.exe" # Замените его фактическим путем
SCRIPT_FILE = "my_script.txt" # Предварительно подготовленный файл сценария
CONFIDENCE_LEVEL = 0,8 # Точность распознавания изображений (0-1)

защита run_automation():
    # 1. Прочтите содержание документа
    если нет os.path.exists(SCRIPT_FILE):
        print("Ошибка: файл документа не найден")
        возвращение
    с open(SCRIPT_FILE, "r",coding="utf-8") как f:
        содержимое = f.read()

    # 2. Включите обрезку
    print("Начинаем обрезку...")
    os.startfile(JIANYING_PATH)
    time.sleep(8) # Подождите, пока программное обеспечение полностью загрузится

    попробуйте:
        # 3. Найдите и нажмите кнопку «Изображение и текст в пленку».
        start_btn = pyautogui.locateCenterOnScreen('btn_start.png', доверие=CONFIDENCE_LEVEL)
        если start_btn:
            pyautogui.click(start_btn)
            print("Вы ввели изображение и текстовый интерфейс")
            время.сон(2)
        еще:
            print("Невозможно найти кнопку "Изображение и текст в пленку"")
            возвращение

        # 4. Обработка ввода документа
        pyperclip.copy(content) # Копируем документ в буфер обмена
        pyautogui.click(x=pyautogui.size().width//2, y=pyautogui.size().height//2) # Щелкните по центру окна, чтобы обеспечить фокус
        pyautogui.hotkey('ctrl', 'v')
        print("Рукопись вставлена")
        время.сон(1)

        # 5. Найдите и нажмите «Создать видео».
        gen_btn = pyautogui.locateCenterOnScreen('btn_generate.png', доверие=CONFIDENCE_LEVEL)
        если gen_btn:
            pyautogui.click(gen_btn)
            print("Генерируем проект...")
        еще:
            print("Невозможно найти кнопку "Создать видео")

    кроме исключения как e:
        print(f"Произошла ошибка: {e}")

если __name__ == "__main__":
    run_automation()

Ключевые детали реализации

Предложения по оптимизации

1. Адаптация разрешения:Если вы меняете компьютер и выполняете его, вам необходимо его повторно захватить..pngКак показано на рисунке, распознавание может не удаться из-за изменения разрешения экрана или коэффициента масштабирования (DPI).
2. Окно сверху:Рекомендуется перед нажатиемpygetwindowБиблиотека заставляет окно обрезки быть активным окном переднего плана.
3. Несколько подтверждений:Вместо использования фиксированного времени ожидания вы можете использовать цикл, чтобы проверить, существует ли кнопка, и дождаться ее появления, прежде чем нажать.

Примечание. Частая автоматизация пользовательского интерфейса может стать недействительной из-за обновлений программного обеспечения (изменения местоположения интерфейса). Если требуется долгосрочная стабильная работа, изучение «Пути 2: изменение черновика JSON» будет более надежным решением.

FFmpeg

Введение

• FFmpeg — это кроссплатформенная платформа обработки видео и аудио с открытым исходным кодом.
• Поддерживает преобразование, кодирование, декодирование, редактирование, объединение, запись, потоковую передачу и другие функции большинства аудио- и видеоформатов.
• Основные инструменты включают в себя:ffmpeg、ffprobe、ffplay
• Он также предоставляет API языка C, который можно интегрировать в приложения.

Общие функции

• Преобразование формата:ffmpeg -i input.avi output.mp4
• Видеоклип (фрагмент):ffmpeg -ss 00:00:10 -i input.mp4 -t 5 output.mp4
• Объедините несколько видео: используйте демультиплексор concat или фильтр concat.
• Захват звука:ffmpeg -i input.mp4 -q:a 0 -map a output.mp3
• Добавьте субтитры:ffmpeg -i input.mp4 -vf subtitles=sub.srt output.mp4

преимущество

• Кроссплатформенная поддержка: Linux, Windows, macOS.
• Высокая производительность, возможность пакетной обработки большого количества видео.
• Активное сообщество, богатая документация и примеры ресурсов.
• Многие другие библиотеки (например, MoviePy, OpenCV) основаны на FFmpeg.

Использование

• Операции командной строки (подходят для сценариев и пакетной обработки)
• Интеграция программы:
  • C/C++ может напрямую использовать библиотеку функций libav*.
  • Python можно использовать с ffmpeg-python, MoviePy и другими пакетами.
  • Node.js может использовать fluent-ffmpeg

Официальный сайт и загрузка

• https://ffmpeg.org
• Поддерживает установочный пакет Windows, macOS Homebrew, установку Linux apt/yum.

автоматическое развертывание FFmpeg

При разработке мультимедиа основным требованием является наличие в среде выполнения FFmpeg. Через PythonsubprocessМодули иurllib, мы можем реализовать автоматизированный процесс настройки среды.

Основной логический поток

Программный код в основном разделен на два этапа: определение системного пути и удаленная загрузка и распаковка.

• Экологическая инспекция:использоватьshutil.which()Найдите исполняемые файлы. Это наиболее стабильный способ определения PATH на разных платформах.
• Решение платформы:в соответствии сsys.platformОпределитесь со ссылкой для скачивания (обычно .zip для Windows, .tar.xz для Linux).
• Автоматическое развертывание:После загрузки он автоматически распаковывается в каталог проекта и временно добавляется путь к нему.os.environ["PATH"]。

Примеры реализации Python

импортировать ОС
импортировать Shutil
импортная платформа
импортировать urllib.request
импортировать zip-файл

защита обеспечения_ffmpeg():
    # 1. Проверьте, есть ли в системном PATH уже ffmpeg
    если Shutil.который("ffmpeg"):
        print("FFmpeg уже существует в системном пути.")
        вернуть истину

    print("FFmpeg не обнаружен, можно начать загрузку...")
    
    #2. Загрузить информацию согласно настройкам операционной системы (на примере Windows)
    если платформа.система() == "Windows":
        url = "https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.zip"
        target_zip = "ffmpeg.zip"
        extract_dir = "ffmpeg_bin"
        
        # Скачать файл
        urllib.request.urlretrieve(url, target_zip)
        
        # распаковать
        с zipfile.ZipFile(target_zip, 'r') в качестве zip_ref:
            zip_ref.extractall(extract_dir)
            
        # Найдите распакованный каталог bin и добавьте переменные среды
        # Фактический путь зависит от структуры сжатого пакета.
        ffmpeg_path = os.path.abspath(os.path.join(extract_dir, "ffmpeg-release-essentials", "bin"))
        os.environ["PATH"] += os.pathsep + ffmpeg_path
        
        print(f"FFmpeg был развернут в: {ffmpeg_path}")
        вернуть истину
    еще:
        print("Текущий пример поддерживает автоматическую загрузку только для Windows, для других систем установите вручную.")
        вернуть ложь

# Выполняем проверки
обеспечения_ffmpeg()

Соображения развития

Рекомендации по управлению путями

1. Порядок приоритета: программа должна сначала искать определяемые пользователем пути, затем искать системный PATH и, наконец, выполнять автоматическую загрузку.
2. Постоянство: рекомендуется поместить автоматически загруженный FFmpeg в приложение.AppDataИли корневой каталог проекта, чтобы избежать повторных загрузок.
3. Статическая версия: для опубликованных приложений статически скомпилированный исполняемый файл FFmpeg обычно более стабилен, чем динамическая загрузка.

Примечание. В производственной среде частая загрузка больших двоичных файлов может повлиять на взаимодействие с пользователем. Рекомендуется запрашивать это у пользователя при первом запуске или предварительно загрузить его в установочный пакет.

Запись экрана Python

Самый распространенный и стабильный метод записи экрана в Python — комбинированиеPyAutoGUI(для захвата изображений),OpenCV(для кодирования и хранения видео) иNumPy(для обработки данных изображения).

1. Подготовка

Для начала вам необходимо установить необходимые пакеты. Откройте терминал и выполните следующие команды:

pip install opencv-python pyautogui numpy

2. Основные примеры реализации

Следующий код захватит полноэкранное изображение и сохранит его как файл output.mp4. Нажмите клавишу q на клавиатуре, чтобы остановить запись.

импортировать cv2
импортпиавтогуи
импортировать numpy как np

# Получить разрешение экрана
SCREEN_SIZE = кортеж(pyautogui.size())

# Определить формат кодирования видео (FourCC)
fourcc = cv2.VideoWriter_fourcc(*"mp4v")

# Создать объект VideoWriter (имя файла, кодировка, частота кадров, разрешение)
out = cv2.VideoWriter("output.mp4", fourcc, 20.0, SCREEN_SIZE)

print("Запись... Нажмите клавишу 'q', чтобы остановить.")

попробуйте:
    пока правда:
        # Захват экрана
        img = pyautogui.screenshot()
        
        # Преобразование в массив NumPy
        кадр = np.array(img)
        
        # Преобразование цвета из RGB в BGR (стандартный формат OpenCV)
        рамка = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)
        
        # Запись кадров в видеофайл
        out.write(кадр)
        
        # Показать предварительный просмотр видео (необязательно)
        # cv2.imshow("Предварительный просмотр", кадр)
        
        # Обнаружение ввода с клавиатуры
        если cv2.waitKey(1) == ord("q"):
            сломать
наконец:
    # Освободите ресурсы и закройте окно
    out.release()
    cv2.destroyAllWindows()
    print("Запись окончена, файл сохранен.")

3. Описание ключевых компонентов

• VideoWriter_fourcc:Определяет кодировку сжатия видео. mp4v подходит для формата MP4, а XVID обычно используется для формата AVI.
• Преобразование цвета (cvtColor):Изображения, снятые PyAutoGUI, имеют формат RGB, но OpenCV по умолчанию использует формат BGR при сохранении видео. Без преобразования цвет видео будет выглядеть ненормальным (например, красный станет синим).
• Частота кадров (FPS):20,0 в примере означает сохранение 20 изображений в секунду. Если производительность компьютерного оборудования низкая, фактическая скорость записи может не соответствовать этому параметру, в результате чего видео во время воспроизведения будет отображаться слишком быстро.

4. Часто задаваемые вопросы и решения

Manim - Python Animation

Manim (Mathematical Animation Engine) — это библиотека анимации, написанная на Python и специально используемая для создания математических изображений и анимации. Маним Его можно использовать для создания высококачественной анимации, иллюстрирующей математические концепции, процессы выполнения кода или что-либо еще, представленное изображениями и анимацией.

Основные особенности Манима

• Поддержка векторных изображений: используйте Manim для создания высококачественных векторных изображений SVG, чтобы они не искажались при масштабировании.
• поддержка анимации: Manim поддерживает плавные анимационные переходы, такие как движение объекта, изменение размера, изменение цвета и т. д.
• поддержка LaTeX: Manim имеет встроенную поддержку LaTeX, что делает отображение математических формул простым и легким.
• 3D-изображения и анимация: Помимо 2D-анимации, Manim также может создавать 3D-изображения и анимацию.

Как использовать Маним

Анимация Manim обычно завершается написанием сценариев Python и последующим созданием видеофайлов. Каждая анимация обычно содержит одну или несколько сцен (Scene), и каждая сцена состоит из разных объектов (Mobject).

базовый пример

из импорта маним *

класс MyFirstScene(Сцена):
    конструкция защиты (я):
        text = Text("Привет, Маним!") # Создаём текстовый объект
        self.play(Write(text)) # Генерируем анимацию

Установить Маним

Manim можно установить через pip:

pip install manim

Разработка программ для 3D графики и анимации

OpenGL

OpenGL (открытая графическая библиотека) — это межъязыковой кроссплатформенный интерфейс прикладного программирования (API) для рендеринга 2D и 3D векторной графики. Он поддерживается группой Khronos и широко используется в системах автоматизированного проектирования (САПР), виртуальной реальности, научной визуализации и разработке видеоигр.

Процесс рисования конвейера

OpenGL использует конвейерную архитектуру для преобразования 3D-данных в пиксели на экране. Современный основной режим OpenGL во многом зависит от шейдеров:

• Вершинный шейдер:Управляет преобразованием координат каждой вершины, проецируя координаты трехмерного пространства в двухмерное экранное пространство.
• Примитивная сборка:Объедините вершины в точки, линии или треугольники.
• Растеризация:Преобразуйте геометрию во фрагменты пикселей (Fragments).
• Фрагментный шейдер:Рассчитайте окончательный цвет каждого пикселя и выполните операции с освещением, материалом и текстурой.

Технические особенности и преимущества

Основной режим и немедленный режим

1. Немедленный режим:В ранних версиях использовались инструкции glBegin/glEnd, которые были просты в освоении, но крайне неэффективны и теперь устарели.
2. Основной профиль:Современные стандарты разработки требуют использования буферных объектов (VBO/VAO) и шейдеров для максимизации производительности оборудования.

Примечание. Хотя Vulkan считается преемником OpenGL, обеспечивающим аппаратное управление более низкого уровня, OpenGL по-прежнему остается лучшим выбором для изучения разработки графических программ из-за его относительно простого входного барьера и богатой документации.

ManimGL

Введение

ManimGL — это эффективный вариант Manim для создания математической анимации, ориентированный на ускорение OpenGL для повышения скорости рендеринга.

Установить

Установите с помощью pip:

pip install manimgl

Или получите последнюю версию с GitHub:

git clone https://github.com/ManimCommunity/ManimGL.git
cd ManimGL
pip install -e .

Основное использование

Отрисуйте простую сцену с помощью ManimGL:

from manimlib import *

class HelloManim(Scene):
    def construct(self):
        text = Text("Hello, ManimGL!")
        self.play(Write(text))
        self.wait(2)

Запустить команду:

manimgl script.py HelloManim

Основные особенности

• Обеспечивает более быстрый рендеринг на основе OpenGL.
• Поддержка предварительного просмотра в реальном времени
• Совместим с оригинальным Manim, но имеет другой API.

Часто задаваемые вопросы

Если у вас возникли проблемы с установкой или эксплуатацией, попробуйте:

• Убедитесь, что версия Python – 3.7 или выше.
• Обновить пип:pip install --upgrade pip
• Проверьте, правильно ли установлен OpenGL

Связанные ресурсы

• GitHub
• Китайская документация

Программа для создания 3D-изображений Blender

Blender — это универсальное программное обеспечение для создания 3D-изображений с открытым исходным кодом, охватывающее полный цикл операций: от моделирования, анимации, рендеринга до композитинга и редактирования видео. Известный своим мощным механизмом рендеринга Cycles и гибким API Python, он является основным инструментом для независимых разработчиков, а также малых и средних студий.

Основной технологический модуль

Архитектура Blender чрезвычайно компактна и использует несколько выделенных движков для совместной работы:

• Механизм рендеринга Cycles:Средство рендеринга с физической трассировкой конвейера (Path Tracing) поддерживает ускорение графического процессора (CUDA/OptiX/Metal) и обеспечивает кинематографические эффекты света и тени.
• Движок реального времени Eevee:Физический рендеринг в реальном времени (PBR) использует шейдеры видеокарты для быстрого предварительного просмотра и высококачественного вывода анимации.
• Узлы геометрии:Система процедурного моделирования на основе узлов позволяет разработчикам создавать сложные сцены и спецэффекты посредством логических связей.
• Смазочный карандаш:Уникальные инструменты 2D-анимации позволяют художникам создавать 2D-рисунки и анимацию в 3D-пространстве.

Сравнение технических характеристик

Путь автоматизации разработчика

Для разработчиков, которым необходимо пакетно обрабатывать 3D-материалы или автоматизировать моделирование, Blender предоставляет мощный фоновый режим:

1. Фоновый рендеринг:Выполнить через командную строкуblender -b -P script.py, вы можете выполнять автоматизированные задачи, не открывая графический интерфейс.
2. модуль bpy:Эксклюзивная библиотека Python от Blender может управлять каждой вершиной, материалом и кадром анимации в сцене.
3. Пользовательский интерфейс:Разработчики могут использовать Python для написания пользовательских панелей и панелей инструментов для оптимизации конкретных рабочих процессов.

Примечание: Blender обновляется очень быстро (примерно одна версия каждые три месяца). При разработке скриптов необходимо обращать внимание на изменения совместимости API между разными версиями.

Моды Python для Blender

bpyМодуль представляет собой API Python, разработанный специально для Blender, который позволяет пользователям создавать, изменять и управлять 3D-изображениями и анимацией с помощью кода внутри Blender.

что такоеbpy？

bpy— это аббревиатура Blender Python, который представляет собой набор библиотек функций, позволяющих использовать сценарии Python для управления основными функциями Blender. черезbpy, пользователи могут:

• Автоматизируйте создание 3D-моделей
• Изменить свойства объекта
• Управляйте освещением сцены и камерами
• Рендеринг и экспорт
• Даже создавайте полноценные анимации и спецэффекты.

bpyОсновные модули и возможности

bpyСодержит несколько подмодулей, каждый из которых имеет определенную цель:

• bpy.data: Доступ ко всем данным в Blender (таким как объекты, материалы, сцены и т. д.).
• bpy.ops: Класс операции, выполнение операций (таких как перемещение, вращение, масштабирование объектов).
• bpy.context: Доступ к текущему состоянию Blender (например, выбранным объектам или включенным инструментам).
• bpy.types: Определить все структуры данных в Blender (например, сетку, камеру, материал).
• bpy.utils: Предоставляет некоторые вспомогательные функции (например, загрузку и выгрузку скриптов).

Простой пример: создание куба

Используется следующееbpyПростой пример создания куба:

импортировать bpy

# Удалить существующие объекты
bpy.ops.object.select_all(action='SELECT')
bpy.ops.object.delete(use_global=False)

#Добавить куб
bpy.ops.mesh.primitive_cube_add(size=2, enter_editmode=False, align='МИР', location=(0, 0, 0))
    

Зачем использоватьbpy？

использоватьbpyПозволяет автоматизировать повторяющиеся задачи и создавать сложные модели, анимацию и визуализацию. Для таких профессионалов, как игровые дизайнеры, архитекторы и аниматоры,bpyПредоставляются мощные инструменты для оптимизации рабочего процесса.

Ссылки

Чтобы узнать больше оbpyПодробную информацию о модуле можно найти в официальной документации:Blender Python API Documentation

Разработка игровой программы

Unity

Unity — это мощный движок и платформа для разработки игр, предназначенная для создания 2D- и 3D-игр, интерактивных приложений, а также возможностей виртуальной реальности (VR) и дополненной реальности (AR). Он предоставляет простой в использовании интерфейс и богатый набор инструментов, подходящий как новичкам, так и профессиональным разработчикам.

• Кроссплатформенная поддержка: Unity поддерживает более 20 различных платформ, включая iOS, Android, Windows, Mac, Linux, WebGL, PlayStation, Xbox. и т. д., чтобы облегчить разработчикам публикацию своих работ на нескольких устройствах и платформах.
• Мощный графический движок: Unity предоставляет эффективные 2D- и 3D-графические движки с несколькими встроенными конвейерами рендеринга, такими как встроенный конвейер, URP (универсальный конвейер рендеринга) и HDRP. (конвейер рендеринга высокой четкости) для удовлетворения различных уровней графических потребностей.
• Магазин активов: Unity Asset Store — это торговая площадка с богатыми ресурсами, из которой разработчики могут загружать разнообразные 3D-модели, звуковые эффекты, плагины и инструменты, что значительно сокращает время разработки.
• Среда разработки программы: поддерживает программирование на языке C# и имеет встроенные редакторы MonoDevelop и Visual Studio, упрощающие разработчикам написание сценариев и управление логикой.
• Поддержка сообщества и документов: Unity имеет большое сообщество разработчиков и полную официальную документацию, а разработчики могут получить помощь и поддержку.

• Сцена: сцена игры или приложения, состоящая из различных объектов и компонентов.
• GameObject: базовый объект для всех видимых и невидимых объектов в Unity. Игровые объекты могут быть смонтированы с различными компонентами для реализации функций.
• Компонент: используется для добавления к игровым объектам элементов с различными функциями, таких как рендеринг сетки, физические свойства и т. д.
• Скрипт: Обычно пишется на языке C# и используется для управления игровой логикой и поведением объектов.
• Камера: компонент, используемый для представления игрового экрана и управления перспективой и эффектами стрельбы.
• Свет: компонент, обеспечивающий световые эффекты, помогающие создать атмосферу и реалистичность сцены.

• разработка игр: Unity — это платформа, которую выбирают многие разработчики 2D- и 3D-игр, от независимых разработчиков игр до крупных игровых студий.
• Виртуальная реальность (VR) и дополненная реальность (AR): поддерживает разработку приложений VR и AR, подходящих для образования, медицинского обслуживания, обучения и других сценариев.
• Симуляционное обучение: Может использоваться для симуляционного обучения, такого как моделирование полета и вождения транспортного средства, чтобы обеспечить безопасную среду моделирования.
• интерактивная выставка: используется для создания интерактивных впечатлений на выставках и повышения активности аудитории.

• Легко начать: Unity предоставляет интуитивно понятный рабочий интерфейс и богатые учебные ресурсы, позволяющие новичкам быстро приступить к работе.
• Высокая гибкость: поддерживает несколько моделей разработки и масштабируемость, подходит для проектов разных размеров.
• поддержка сообщества: Unity имеет большое сообщество разработчиков, где вы можете быстро получить помощь и поддержку.

Unity — это мощный и гибкий механизм разработки, который предоставляет разработчикам широкий спектр сценариев приложений и поддержку инструментов. Независимо от того, новичок вы или профессиональный разработчик, вы можете использовать Unity для быстрого создания высококачественных 2D- и 3D-игр и интерактивных приложений.

Игровой движок Cocos

Cocos — это ведущая в мире среда разработки мобильных игр с открытым исходным кодом, включающая ранний чисто управляемый кодом Cocos2d-x и современный полнофункциональный редактор Cocos Creator. Известный своей легкой, эффективной и кроссплатформенной поддержкой, он является предпочтительным инструментом для разработки 2D и 3D мобильных игр и мини-игр (таких как мини-игры WeChat и мини-игры TikTok).

Эволюция основного продукта

Семья Кокос в основном разделена на два важных этапа развития, отвечающих потребностям различных привычек развития:

• Cocos2d-x：A framework developed based on C++, using a program code-driven model. Он обеспечивает мощные возможности рендеринга и производительность, а разработчики могут использовать C++, Lua или JavaScript для разработки логики.
• Cocos Creator：Универсальный инструмент для разработки игр на основе JavaScript/TypeScript. Он предоставляет визуальный редактор, аналогичный Unity, и реализует процессы разработки на основе данных и компонентов.

Технические преимущества и особенности

Основные функциональные компоненты

1. Управление сценой:Используя архитектуру узлов и компонентов, разработчики могут легко управлять сложными иерархическими отношениями.
2. Физический движок:Встроенная поддержка различных физических бэкендов (таких как Box2D, Bullet, Cannon.js), которые можно переключать в соответствии с потребностями проекта.
3. Система пользовательского интерфейса:Предоставляет гибкие компоненты макета, функции преобразования координат и автоматического объединения изображений для значительной оптимизации эффективности рендеринга интерфейса.
4. Система анимации:Поддерживает скелетную анимацию (Spine, DragonBones), анимацию ключевых кадров и динамический конечный автомат Marionette собственной разработки.

Примечание. Cocos Creator теперь усовершенствован до версии 3.x, которая полностью объединяет основные технологии 2D и 3D. Разработчики могут смешивать и создавать 2D-интерфейс и 3D-сцены в одном проекте.

Разработка звуковой программы

Разработка синтеза речи

основной процесс разработки

Разработку системы синтеза речи обычно разделяют на три этапа. сначала этоФронтальная обработка, преобразовывать исходный текст в лингвистические функции (такие как сегментация слов, преобразование фонетических символов, предсказание просодии); с последующимакустическая модельотобразить эти особенности в акустическом представлении (например, в мел-спектре); окончательноВокодер, отвечающий за преобразование акустического представления в звуковой сигнал, слышимый человеком.

Основные платформы разработки и библиотеки

Обучение индивидуальной модели (тонкая настройка)

Чтобы разработать TTS с определенным тембром, вам необходимо подготовить высококачественный набор данных (обычно от 1 до 10 часов записей и соответствующего текста). Часто используется разработчикамиТрансферное обучениеТехнология, тонкая настройка на больших базовых моделях, значительно снижает требования к объему данных и повышает сходство и естественность звучания.

Разработка интеграции API

Для большинства разработчиков приложений прямой вызов зрелых облачных API является наиболее эффективным решением. НапримерElevenLabs APIОбеспечить сильное эмоциональное выражение,Microsoft Azure Speech SDKОбеспечивает наиболее полную поддержку SSML (языка разметки синтеза речи), позволяя разработчикам точно контролировать паузы, ударение и тон с помощью тегов. также,OpenAI TTS APIБлагодаря простому интерфейсу и чрезвычайно низкой задержке рассуждения он очень популярен в интерактивных приложениях реального времени.

Предложения по техническому выбору

На ранних этапах разработки рекомендуется отдавать приоритет балансу между «задержкой (RTF)» и «качеством звука». Если это применяется к обслуживанию клиентов в режиме реального времени, ключевым моментом является потоковая передача с малой задержкой (Streaming); если это применимо к аудиокнигам, приоритет следует отдать модели с возможностями обработки длинного текста и богатым чувством ритма. Кроме того, необходимо обратить внимание на статус поддержки G2P (символ-фонема) каждого языка, который напрямую определяет правильное понимание произношения.

CosyVoice 2

CosyVoice 2 — это усовершенствованная версия модели синтеза речи (TTS) с открытым исходным кодом Alibaba. По сравнению с первым поколением, он достиг значительных успехов в точности произношения, более детальном контроле эмоций и задержке потокового рассуждения. Он не только поддерживает высококачественное клонирование тонов, но также представляет технологию, управляемую командами, которая делает речь ИИ более «человечной».

Обновление базовой технологии

CosyVoice 2 использует «языковую модель текста и речи» и технологию «Flow Matching» для обеспечения сквозной генерации речи:

• Вывод потоковой передачи со сверхнизкой задержкой:Поддерживает синтез двунаправленной потоковой передачи с минимальной задержкой первого пакета150ms, что значительно повышает плавность разговоров в реальном времени.
• Улучшена точность произношения:По сравнению с версией 1.0 уменьшен процент ошибок произношения (WER).от 30% до 50%, может более точно обрабатывать многофонетические символы и специальные символы.
• Оригинальный текст читать прямо:Традиционный интерфейс G2P (от графемы к фонеме) отменен, и исходный текст можно вводить напрямую для обучения и синтеза, что упрощает процесс развертывания.
• Размер модели:В основном рекомендуется использоватьCosyVoice2-0.5Bмодель с более глубоким пониманием контекста и возможностями моделирования тембра.

Сравнение функциональных возможностей

Сценарии применения и предложения по развитию

1. Интеллектуальное обслуживание клиентов и виртуальный помощник:Используйте сверхнизкую задержку в 150 мс, чтобы создать отзывчивую и эмоциональную диалоговую систему.
2. Аудиокниги и озвучивание фильмов:Благодаря детальному управлению метками тона можно моделировать эмоциональные взлеты и падения, а также стили речи разных персонажей.
3. Образование и защита диалекта:Он имеет богатый встроенный набор данных о диалектах, который можно использовать для цифрового обучения диалектам или создания местного культурного контента.

Примечание. При локальном развертывании CosyVoice 2 рекомендуется оснастить видеокарту NVIDIA объемом видеопамяти не менее 8 ГБ и использовать официально рекомендованную версию.vLLMУскорьте платформу для достижения оптимальной производительности RTF (скорость в реальном времени).

Базовое использование CozyVoice 2

CosyVoice 2 разработан на основе Python. Поскольку он включает в себя сложную обработку звука и среду глубокого обучения, настоятельно рекомендуется его использовать.CondaВиртуальная среда для изолированной установки. В настоящее время Linux имеет самую высокую официальную поддержку, а пользователям Windows рекомендуется выполнять развертывание через WSL2 или определенные версии сообщества.

1. Подготовка и установка среды.

Прежде чем начать, убедитесь, что в вашей системе установлен драйвер NVIDIA (рекомендуется 8 ГБ или более видеопамяти) и установлена ​​Conda.

1. Создайте виртуальную среду:

   conda create -n cosyvoice2 python=3.10
   conda activate cosyvoice2

2. Установите ключевые зависимости Pynini:

   Pynini — это основной компонент, который отвечает за нормализацию текста и должен быть установлен через conda:

   conda install -y -c conda-forge pynini==2.1.5

3. Скопируйте проект и установите зависимости:

   git clone --recursive https://github.com/FunAudioLLM/CosyVoice.git
   cd CosyVoice
   pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/

2. Загрузка модели

CosyVoice 2 требует загрузки предварительно обученных весов модели. Вы можете автоматизировать загрузку с помощью скрипта Python:

из modelscope import snapshot_download
# Загрузите основную модель 0.5B
snapshot_download('iic/CosyVoice2-0.5B', local_dir='pretrained_models/CosyVoice2-0.5B')
# Загрузите ресурсы по нормализации текста
snapshot_download('iic/CosyVoice-ttsfrd', local_dir='pretrained_models/CosyVoice-ttsfrd')

3. Основное использование

CozyVoice 2 предлагает множество режимов в соответствии с вашими потребностями: от быстрого перезаписи до профессионального клонирования:

4. Примеры вызова API разработчика

Если вы хотите интегрировать CosyVoice 2 в свой собственный проект Python (например, сценарий автоматизации Kdenlive):

из cosyvoice.cli.cosyvoice импорт CosyVoice2
import torchaudio

#Инициализируем модель
cosyvoice = CosyVoice2('pretrained_models/CosyVoice2-0.5B')

# Выполняем вывод (на примере предварительно обученного тембра)
output = cosyvoice.inference_sft('Здравствуйте, я голосовой помощник с искусственным интеллектом.', 'Китаянка')

# Сохранить сообщение
torchaudio.save('output.wav', выход['tts_speech'], cosyvoice.sample_rate)

Примечание. Если вы устанавливаете в Windows и столкнулисьsoxили ошибка компиляции, обратитесь к GitHub Issue #1046 или попробуйте использовать пакет установки в один клик.

Синтез длинных статей CosyVoice 2

Сегментация текста и грамматическая целостность

Технология тензорного сплайсинга

Аппаратные ресурсы и производительность

импортировать ОС
импортный фонарь
импорт торчаудио
импортировать повторно
из cosyvoice.cli.cosyvoice импортировать CosyVoice

#Инициализировать модель CosyVoice2
# Убедитесь, что путь указывает на папку, содержащую основные веса и файлы конфигурации.
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')

Защиту сегмент_текст (текст, предел = 80):
    """
    Разделяйте длинные статьи на сегменты соответствующей длины на основе знаков препинания, чтобы избежать прерываний в генерации речи или переполнения памяти.
    """
    # Блокировка распространённой пунктуации в конце предложения на китайском и английском языках.
    шаблон = r'([.!?;!\?\n])'
    части = re.split(шаблон, текст)
    
    куски = []
    текущий = ""
    для i в диапазоне (0, len(parts)-1, 2):
        предложение = части[i] + части[i+1]
        если len(текущий) + len(предложение) <= предел:
            текущее += предложение
        еще:
            если текущий:
                куски.append(current.strip())
            текущий = предложение
    
    если текущий:
        куски.append(current.strip())
    вернуть [c для c частями, если c]

def run_tts_pipeline (текст, spk_id, имя_файла):
    """
    Выполняйте вывод длинного текста и объединяйте информацию на уровне тензора.
    """
    text_list = сегмент_текста (текст)
    комбинированные_тензоры = []
    
    print(f"Обработка, статья разделена на разделы {len(text_list)}")
    
    для idx, сегмент в перечислении (text_list):
        # Вызов интерфейса вывода CosyVoice2
        # Можно переключиться на inference_zero_shot для использования эталонного звука
        результат = cosyvoice.inference_sft(сегмент, spk_id)
        комбинированные_тензоры.append(результат['tts_speech'])
        print(f"Завершено: {idx + 1}/{len(text_list)}")

    если комбинированные_тензоры:
        # Используйте torch.cat для бесшовного сращивания
        Final_audio = torch.cat(комбинированные_тензоры, dim=1)
        # Сохраняем в формате wav, рекомендуемая частота дискретизации 22050Гц
        torchaudio.save(имя_файла, Final_audio, 22050)
        print(f"Задача выполнена успешно! Файл сохранен в: {file_name}")

если __name__ == "__main__":
    long_content = "Вставьте сюда содержимое вашей длинной статьи, и этот код автоматически выполнит сегментацию и объединение."
    run_tts_pipeline(long_content, 'Китаянка', 'output_v2.wav')

Генерация синхронизации субтитров CosyVoice 2

Логика выравнивания временных меток

Автоматизированный процесс генерации

импортный фонарь
импорт торчаудио
импортировать повторно
из cosyvoice.cli.cosyvoice импортировать CosyVoice

#Инициализировать CosyVoice 2
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')

Защиту format_srt_time (секунды):
    """Преобразовать секунды в формат времени SRT ЧЧ:ММ:СС,ммм"""
    миллисекунды = int((секунды - int(секунды)) * 1000)
    секунды = целое число (секунды)
    минуты, секунды = divmod(секунды, 60)
    часы, минуты = divmod(минуты, 60)
    return f"{часы:02}:{минуты:02}:{секунды:02},{миллисекунды:03}"

Защиту генерировать_аудио_and_srt (full_text, динамик_id, выход_wav, выход_srt):
    # Разделить длинные статьи по знакам препинания
    сегменты = re.split(r'([.!?;!\?\n])', полный_текст)
    куски = []
    для i в диапазоне (0, len(сегменты)-1, 2):
        текст = (сегменты[i] + сегменты[i+1]).strip()
        если текст: chunks.append(текст)

    audio_list = []
    srt_entries = []
    текущее_время = 0,0
    sample_rate = 22050

    print(f"Начать обработку текста {len(chunks)}...")

    для i, фрагмент в перечислении (куски):
        # Рассуждение для генерации речевого тензора
        вывод = cosyvoice.inference_sft(кусок,peaker_id)
        audio_tensor = вывод['tts_speech']
        audio_list.append(audio_tensor)

        # Вычислить количество секунд, в течение которых длится этот аудиосегмент (длина тензора / частота дискретизации)
        продолжительность = audio_tensor.shape[1] / частота_выборки
        конечное_время = текущее_время + продолжительность

        # Создание записей SRT
        srt_entries.append(
            f"{i+1}\n"
            f"{format_srt_time(current_time)} --> {format_srt_time(end_time)}\n"
            f"{кусок}\n"
        )

        текущее_время = конечное_время
        print(f"Выравнивание сегмента {i+1} завершено")

    # Объединить и сохранить аудио
    комбинированный_аудио = torch.cat(audio_list, dim=1)
    torchaudio.save(output_wav, комбинированный_аудио, частота_сэмплирования)

    # Сохранить файл SRT
    с open(output_srt, 'w',coding='utf-8') как f:
        f.write("\n".join(srt_entries))

    print(f"Завершено! Аудио: {output_wav}, субтитры: {output_srt}")

если __name__ == "__main__":
    article = «Это пример длинной статьи. [смех] Мы можем точно рассчитать время каждого предложения. Таким образом, оно будет автоматически выровнено при импорте в Kdenlive».
    генерировать_аудио_and_srt(статья, «Китаянка», «output.wav», «output.srt»)

На что следует обратить внимание при импорте в программное обеспечение для редактирования

• Согласование частоты кадров:Убедитесь, что частота кадров проекта Kdenlive соответствует привычке отображения субтитров. Обычно на SRT не влияет частота кадров, но в очень длинных статьях (более 30 минут) небольшие отклонения частоты дискретизации могут привести к рассинхронизации звука и видео.
• Теги эмоций:Если текст содержит такую ​​команду, как [смех], длина речи будет включать продолжительность действия, и приведенный выше код автоматически учтет это, чтобы гарантировать, что субтитры отображаются синхронно со смехом.
• Частота выборки:Значение по умолчанию CosyVoice — 22050 Гц. Если ваша версия модели отличается, измените параметр sample_rate в коде программы, иначе расчет времени будет необъективным.

Командное управление CozyVoice 2

Эмоциональный и невербальный символический контроль

Основной список тегов

• [смех]: Добавьте в предложение смех.
• [злой]: переключитесь на злой, поспешный или резкий тон голоса.
• [страх]: Проявление страха, дрожи или беспокойства.
• [сюрприз]: представляет эффект удивления и повышения интонации.
• [грусть]: вызывает грустный, тихий или сдавленный тон.
• [speech_noise]: имитирует фоновый шум окружающей среды или тонкий шум во время разговора.

Обработка длинных статей и встраивание тегов

импортировать ОС
импортный фонарь
импорт торчаудио
импортировать повторно
из cosyvoice.cli.cosyvoice импортировать CosyVoice

#Инициализируем модель
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')

Защиту сегмент_текст_с_тегами (текст, лимит = 100):
    """
    Разделите длинный текст, следя за тем, чтобы такие теги, как [смех], не обрезались.
    """
    # Сопоставление китайских знаков препинания и новой строки
    шаблон = r'([.!?;!\?\n])'
    части = re.split(шаблон, текст)
    
    куски = []
    текущий = ""
    для i в диапазоне (0, len(parts)-1, 2):
        предложение = части[i] + части[i+1]
        если len(текущий) + len(предложение) <= предел:
            текущее += предложение
        еще:
            если текущий:
                куски.append(current.strip())
            текущий = предложение
    
    если текущий:
        куски.append(current.strip())
    возвращать куски

Защиту генерировать_expressive_audio (текст, spk_id, выходной_путь):
    """
    Создавайте длинную речь, содержащую эмоциональные инструкции.
    """
    сегменты = сегмент_текст_с_тегами(текст)
    аудио_данные = []

    для idx сегментируйте в перечислении (сегменты):
        # Используйте режим инструкций для лучшего выполнения тегов
        # Если вы используете режим sft, базовые теги также поддерживаются, но режим инструкций более точен для эмоционального контроля.
        вывод = cosyvoice.inference_instruct(seg, spk_id, 'Контрольный тон и эмоции')
        audio_data.append(выход['tts_speech'])
        print(f"Обработка абзацев {idx+1}/{len(segments)}")

    если аудио_данные:
        Final_wav = torch.cat(audio_data, dim=1)
        torchaudio.save(output_path, Final_wav, 22050)
        print(f"Сообщение, содержащее команду эмоции, было сохранено: {output_path}")

если __name__ == "__main__":
    #Пример: встраивание длинных текстовых тегов эмоций
    rich_text = "Это отличная новость! [смех] Я не могу в это поверить. [удивление] Но если что-то пойдет не так, [злится] Я очень разозлюсь."
    генерировать_expressive_audio(rich_text, 'Китайская женщина', 'expressive_output.wav')

Разработка распознавания речи

Процесс разработки и ключевые этапы

Разработка системы ASR (автоматического распознавания речи) обычно следует следующему основному пути. сначала этопредварительная обработка звука(например, шумоподавление, обнаружение голосовой активности VAD и извлечение функций); затем введитеМодельный вывод, преобразующий акустические сигналы в текстовую вероятность; наконец до концаПостобработка(например, восстановление пунктуации, обратная нормализация текста ITN) для получения окончательного текста. Современные тенденции развития сместились от традиционного HMM к «сквозной» архитектуре нейронных сетей, что значительно упрощает разработку.

Основные модели и основы разработки ASR

Технические индикаторы, с которыми сталкиваются разработчики

При разработке системы ASR сосредоточьтесь на мониторингеCER (коэффициент ошибок символов)чтобы оценить точность. Для немедленного применения,RTF (коэффициент реального времени)иЗадержкаКрайне важно обеспечить, чтобы обработка речи происходила намного быстрее, чем речь. В 2026 году акцент в разработке сместился на «длинную текстовую память» и «ориентацию на контекст», например, интеграцию LLM для исправления ошибок идентификации в профессиональной терминологии или конкретных отраслях.

Интегрированная разработка API и облака

Если разработчики стремятся к быстрому запуску, они обычно используют облачные API.DeepgramиAssemblyAIВ 2026 году ему будут отдавать предпочтение из-за низкой задержки и богатых метаданных (таких как обнаружение эмоций, ключевые сводки).Microsoft Azure Speech SDKОн предоставляет наиболее полный интерфейс тонкой настройки пользовательской модели (Custom Speech), позволяющий разработчикам загружать текстовые данные в определенные поля для решения проблемы неточного распознавания специальной лексики, например медицинской и юридической.

Рекомендации по развертыванию и выбору среды

Индивидуальным разработчикам рекомендуется использоватьHugging Face TransformersСопоставление с библиотекойPyTorchПроведите быстрый эксперимент. Если сценарий приложения предполагает конфиденциальность (например, медицинские записи), вам следует использоватьWhisper.cppилиVoskВыполните полностью автономное локальное развертывание. Если вам необходимо построить масштабный голосовой сервис, рекомендуется использоватьTriton Inference ServerилиDockerТехнология контейнеризации обеспечивает эффективное планирование и расширение модели ASR.

Рисование JavaScript

Холст и контекст

Основные понятия Canvas

HTML5<canvas>Элемент — это область, которую можно нарисовать с помощью JavaScript, что позволяет отображать 2D и 3D на веб-странице. изображения. Это контейнер, который может выполнять операции рисования с помощью программного кода, такие как рисование линий, графики и изображений. Он подходит для таких приложений, как игры и редактирование графики, требующих генерации в реальном времени.

Ниже приводитсяcanvasОсновной синтаксис элементов:

<canvas id="myCanvas" width="500" height="500"></canvas>

Роль getContext

быть вcanvasЧтобы нарисовать содержимое элемента, вы должны использоватьgetContextметод. Этот метод позволяет получить контекст рисования, в настоящее время наиболее часто используемым вариантом является «2d». он вернетCanvasRenderingContext2DОбъект, предоставляющий множество методов рисования.

Например, следующий код JavaScript получаетcanvasКонтекст 2D-чертежа для:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Основные операции рисования

использоватьgetContext("2d")Полученный контекст рисования может выполнять основные операции рисования, такие как рисование линий, рисование прямоугольников и заливка цветами. Например:

• Нарисуйте линии:использоватьmoveTo(x, y)иlineTo(x, y)метод для определения сегментов линий и использованияstroke()Нарисуйте линии.
• Нарисуйте прямоугольник:использоватьfillRect(x, y, width, height)нарисуйте закрашенный прямоугольник илиstrokeRect(x, y, width, height)Нарисуйте полый прямоугольник.
• Цвет заливки:Можно использоватьfillStyleЗадайте цвет заливки, напримерctx.fillStyle = "blue";

Пример кода:

ctx.fillStyle = "синий";
ctx.fillRect(50, 50, 100, 100); // Рисуем синий прямоугольник
ctx.strokeStyle = "красный";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke(); // рисуем красную линию

Очистить холст

Чтобы очиститьcanvasИзображения можно использоватьclearRect(x, y, width, height)метод. Например, код для очистки всего холста:

ctx.clearRect(0, 0, canvas.width, canvas.height);

Динамическое рисование и анимация

использоватьrequestAnimationFrame()Можно добиться плавных анимационных эффектов. Динамические эффекты можно нарисовать, очистив содержимое предыдущего кадра перед каждым обновлением экрана. Вот простой пример анимации:

функция рисования() {
ctx.clearRect(0, 0, холст.ширина, холст.высота);
ctx.fillRect(x, y, 50, 50); // Рисуем квадрат
х += 1; // обновляем позицию
requestAnimationFrame (рисовать);
}
рисовать();

На что следует обратить внимание при использовании Canvas

Размер Canvas должен быть установлен в HTML. Изменение размера с помощью CSS может привести к искажению изображения. также,canvasНе предназначен для замены изображений с высоким разрешением, а предназначен для мгновенного создания и динамического рисования.

style.transform

Основные понятия

style.transformЭто одно из свойств CSS, которое можно использовать для выполнения операций 2D- или 3D-преобразования, таких как вращение, масштабирование, смещение и наклон элементов.

scale()Это функция «масштабирования», синтаксис следующий:

transform: scale(sx [, sy]);

в:

• sx:Коэффициент масштабирования по горизонтали
• sy: Коэффициент вертикального масштабирования (может быть опущен, при его отсутствии он равенsx）

Метод настройки JavaScript

const el = document.getElementById("цель");
el.style.transform = "масштаб (1,5)"; // И x, и y увеличиваются в 1,5 раза

el.style.transform = "масштаб(1,5, 0,5)"; // Увеличение масштаба в 1,5 раза по горизонтали и уменьшение вдвое по вертикали

Это не имеет ничего общего с шириной и высотой, но повлияет на визуальный размер.

scale()— это «визуальное преобразование», которое не меняет фактические свойства DOM элемента (например,offsetWidthилиclientWidth), но изменитсяgetBoundingClientRect()возвращаемое значение.

el.getBoundingClientRect().width // Будет отражать влияние масштаба
el.offsetWidth //Исходная ширина, не зависящая от масштаба

Общие приложения

• Анимация масштабирования изображения
• Такие компоненты, как карты и блок-схемы, которые можно увеличить для просмотра.
• Эффект увеличения при наведении мыши

пример

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

<div id="box"></div>

На что следует обратить внимание

• масштаб повлияет на расположение и интерактивное поведение элементов на экране.
• Если вам нужно сохранить логику макета неизменной, используйте Transform-Origin или Контейнер для управления прокруткой.

Круговая диаграмма рисования на холсте

Пример описания

Следующий пример взят из HTML<table>Чтение данных, использование родного<canvas>APIarc()Рисуйте круговые диаграммы без каких-либо внешних пакетов.

HTML-структура

<table id="dataTable" border="1" style="margin:10px auto;">
  <tr><th>Категория</th><th>Значение</th></tr>
  <tr><td>Apple</td><td>30</td></tr>
  <tr><td>Банан</td><td>15</td></tr>
  <tr><td>Вишня</td><td>25</td></tr>
  <tr><td>Манго</td><td>20</td></tr>
</таблица>

<canvas id="pieCanvas" width="400" height="400" style="display:block; Margin:auto; border:1px Solid #aaa;"></canvas>

Программа JavaScript

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) =>а + б, 0);

//Рисуем круговую диаграмму
пусть startAngle = 0;
const centerX = холст.ширина/2;
const centerY = холст.высота/2;
константный радиус = 120;

// Автоматическое сопоставление цветов
const Colors = ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40"];

для (пусть я = 0; я< values.length; i++) {
  const sliceAngle = (values[i] / total) * 2 * Math.PI;
  const endAngle = startAngle + sliceAngle;

  // 畫圓餅區塊
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.arc(centerX, centerY, radius, startAngle, endAngle);
  ctx.closePath();
  ctx.fillStyle = colors[i % colors.length];
  ctx.fill();

  // 標示文字
  const midAngle = startAngle + sliceAngle / 2;
  const textX = centerX + Math.cos(midAngle) * (radius + 20);
  const textY = centerY + Math.sin(midAngle) * (radius + 20);
  ctx.fillStyle = "black";
  ctx.font = "14px sans-serif";
  ctx.textAlign = "center";
  ctx.fillText(labels[i], textX, textY);

  startAngle = endAngle;
}

// 標題
ctx.font = "16px bold sans-serif";
ctx.textAlign = "center";
ctx.fillText("水果銷售比例", centerX, centerY - radius - 30);

иллюстрировать

• кarc()Нарисуйте каждый сектор.
• Автоматически рассчитывать соотношение углов на основе суммы данных.
• Поместите текстовую метку за пределами круга.
• Не полагается на какие-либо внешние библиотеки, полностью собственный JavaScript.

продлевать

Вы можете добавить события мыши (например, наведение курсора для увеличения или отображения процентов) или использоватьrequestAnimationFrame()Добавьте анимационные эффекты. Хотите, чтобы я помог вам добавить версию при наведении курсора мыши, которая отображает процент данных?

SVG

концепция

SVG (масштабируемая векторная графика) — это формат векторной графики на основе XML, который позволяет рисовать линии, графику и текст на веб-страницах, а также поддерживает масштабирование и анимацию. В отличие от растровых изображений, SVG не искажается при увеличении или уменьшении масштаба, что делает его пригодным для таких приложений, как диаграммы, значки, карты и блок-схемы.

Функции

• Обычный текстовый формат, редактируемый и сжимаемый.
• Доступные операции CSS/JavaScript
• Поддержка обработки событий и анимации
• Может быть интегрирован с HTML5.

Базовый пример грамматики

<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" штрих="красный" штрих-ширина="2" />
  <text x="10" y="90" font-size="14" fill="black">Это SVG</text>
</svg>

Общие элементы

• <rect>:прямоугольник
• <circle>: круглый
• <ellipse>: овал
• <line>: сегмент линии
• <polyline>、<polygon>: Полилиния и многоугольник
• <path>: Свободный путь рисования (можно рисовать кривые и сложные формы).
• <text>:текст

события и взаимодействия

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="orange" onclick="alert('Вы нажали на кружок')" />
</svg>

Анимации и стили

проницаемыйCSSили<animate>Анимация этикетки:

<circle cx="30" cy="50" r="20" fill="blue">
  <animate attributeName="cx" from="30" to="170" dur="2s" repeatCount="indefinite" />
</circle>

В сочетании с 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>

Область применения

• Диаграммы (можно использовать в сочетании с D3.js)
• Значок пользовательского интерфейса (iconfont, адаптивный значок)
• Блок-схема, UML, диаграмма топологии сети
• Карты и анимированные иллюстрации

в заключение

SVG — один из очень важных графических стандартов в веб-интерфейсах. Он имеет высокое разрешение, интерактивность и анимацию и может быть легко интегрирован с HTML/CSS/JavaScript. Подходит для сценариев графического представления, требующих точной и масштабируемой производительности.

Шаблон повторного использования SVG

Цель

Доступно в SVG через<symbol>или<defs>Определите шаблон один раз и используйте его снова<use>Повторяйте ссылки в других местах, сохраняя код и улучшая согласованность.

базовая грамматика

<svg width="0" height="0" style="position:absolute">
  <symbol id="star" viewBox="0 0 100 100">
    <polygon points="50,5 61,39 98,39 68,59 79,91 50,70 21,91 32,59 2,39 39,39"
             fill="gold" stroke="black" stroke-width="2"/>
  </symbol>
</svg>

<svg width="200" height="100">
  <use href="#star" x="0" y="0" width="50" height="50"/>
  <use href="#star" x="60" y="0" width="50" height="50" fill="red"/>
  <use href="#star" x="120" y="0" width="50" height="50" fill="blue"/>
</svg>

выставка

иллюстрировать

• <symbol>: Определить содержимое шаблона и можно использовать повторно.
• <use>: Можно указать шаблон вставки, положение и размер.
• href: Указывает на идентификатор символа (старый способ записи —xlink:href）

Наследование собственности

<use>Можно изменитьfill、strokeи другие атрибуты, перезаписывающие исходное определение.

Область применения

• библиотека компонентов значков
• Иллюстрированная карта (ориентиры, повторы узлов)
• Повторное использование графических элементов в блок-схемах и архитектурных диаграммах.

совместимость

• <use href="#id">Для современного письма (используется старыми браузерамиxlink:href）
• Рекомендуется определить его в HTML.<symbol>Разместите его вверху DOM или полностью скройте.

в заключение

через<symbol> + <use>SVG может реализовать компонентную и модульную разработку графики, которую можно повторно использовать и удобно управлять стилями и позициями. Он очень подходит для приложений графического дизайна и визуализации данных.

WebGL

концепция

WebGL (библиотека веб-графики) — это набор API-интерфейсов JavaScript на основе OpenGL ES, которые могут использовать HTML5 в браузере.<canvas>Элементы выполняют аппаратное ускорение рисования 2D и 3D графики без каких-либо плагинов.

Функции

• На основе стандарта OpenGL ES 2.0.
• Используйте графический процессор напрямую для рисования с хорошей производительностью.
• Интегрируется с HTML, CSS, JavaScript
• Поддерживает язык шейдеров GLSL.

Простой пример

Нарисуйте цветной треугольник:

<canvas id="glCanvas" width="300" height="300"></canvas>
<скрипт>
  const Canvas = document.getElementById('glCanvas');
  const gl = Canvas.getContext('webgl');

  если (!гл) {
    alert("Ваш браузер не поддерживает WebGL");
  }

  const vertexShaderSource = `
    атрибут vec2 a_position;
    недействительный основной () {
      gl_Position = vec4(a_position, 0, 1);
    }
  `;

  const фрагментShaderSource = `
    недействительный основной () {
      gl_FragColor = vec4 (1, 0, 0, 1); // красный
    }
  `;

  функция createShader(gl, type, source) {
    константный шейдер = gl.createShader(тип);
    gl.shaderSource(шейдер, источник);
    gl.compileShader(шейдер);
    возврат шейдера;
  }

  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  const фрагментShader = createShader(gl, gl.FRAGMENT_SHADER, фрагментShaderSource);

  константная программа = gl.createProgram();
  gl.attachShader(программа, vertexShader);
  gl.attachShader(программа, фрагментШадер);
  gl.linkProgram(программа);

  gl.useProgram(программа);

  const PositionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, новый Float32Array([
    0, 1,
   -1, -1,
    1, -1
  ]), gl.STATIC_DRAW);

  const posAttribLoc = gl.getAttribLocation(программа, "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);
</скрипт>

показывать

Область применения

• 3D-модели и игровые движки (например, Three.js, Babylon.js)
• Научная визуализация, диаграммы данных (например: 3D-модели Plotly.js)
• Интеграция AR/VR, основа технологии WebXR

Часто используемые комплекты

• Three.js: Высокоуровневый движок 3D-графики, инкапсулирующий WebGL.
• Babylon.js: Полнофункциональный 3D-игровой движок.
• regl / TWGL.js:Облегченная библиотека вспомогательных функций WebGL

в заключение

WebGL предоставляет веб-разработчикам возможности рендеринга 3D-графики с ускорением на графическом процессоре и является одной из основных технологий для современных веб-игр, цифрового искусства, моделирования и визуализации. Хотя собственный WebGL является относительно низкоуровневым, его можно использовать с библиотеками функций высокого порядка для упрощения процесса разработки.

Spirograph

Что такое спирограф?

SpirographЭто геометрический узор, используемый для создания сложных фигур. Принцип состоит в том, чтобы использовать вращение двух кругов для изображения нескольких кругов и волнистых кривых. Этот тип графики часто используется в художественном творчестве и образовании, чтобы показать геометрическую красоту математики.

Реализация спирографа в HTML5

Вот пример реализации спирографа с использованием HTML5 <canvas> элемент и JavaScript:

Сравнение библиотек JavaScript векторной графики

Chart.js

Обзор

Chart.js — это легкая и мощная библиотека функций рисования диаграмм JavaScript с открытым исходным кодом. Доступно в HTML5<canvas>Рисуйте различные интерактивные схемы по элементам. Он известен своим простым API, красивыми стилями по умолчанию и широкими возможностями настройки. Подходит для быстрой визуализации данных на веб-сайтах или в приложениях.

Основные особенности

• Поддерживает несколько типов диаграмм:Линейная диаграмма (Line), гистограмма (Bar), круговая диаграмма (Pie), радиолокационная диаграмма (Radar), диаграмма полярных зон (Polar Area), пузырьковая диаграмма (Bubble), точечная диаграмма (Scatter) и т. д.
• Интерактивность:Поддерживает подсказки при наведении мыши, события щелчка и эффекты анимации.
• Адаптивный дизайн:Автоматически масштабируйте диаграммы в соответствии с размером экрана.
• Масштабируемость:Поддерживает пользовательские плагины (Плагины), стили (Темы) и анимацию.
• Кроссплатформенная поддержка:Поддерживает все современные браузеры и мобильные устройства.

Установка и использование

1. Загрузка CDN

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

2. Установка НПМ

npm install chart.js

3. Основные примеры использования

<canvas id="myChart"></canvas>

<скрипт>
const ctx = document.getElementById('myChart').getContext('2d');

новая диаграмма(ctx, {
  тип: 'бар',
  данные: {
    метки: ['красный', 'синий', 'желтый', 'зеленый', 'фиолетовый', 'оранжевый'],
    наборы данных: [{
      метка: «голоса»,
      данные: [12, 19, 3, 5, 2, 3],
      Цвет фона: [
        '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)'
      ],
      ширина границы: 1
    }]
  },
  варианты: {
    отзывчивый: правда,
    весы: {
      y: {beginAtZero: true}
    }
  }
});
</скрипт>

Распространенные типы диаграмм

проверка версии

Вы можете проверить версию Chart.js, используя:

console.log(Chart.version);

Преимущества и недостатки

преимущество:

• API прост и удобен в использовании.
• Стиль по умолчанию красив и никакого дополнительного дизайна не требуется.
• Поддерживает взаимодействие и анимационные эффекты.
• Интегрированные фреймворки, такие как React, Vue и Angular.

недостаток:

• Производительность ниже для больших наборов данных.
• Пользовательский внешний вид не такой гибкий, как D3.js.
• Основанный на Canvas, он не поддерживает прямое манипулирование DOM.

официальные ресурсы

• Официальный сайт:https://www.chartjs.org/
• Официальные документы:Chart.js Documentation
• Проекты GitHub:https://github.com/chartjs/Chart.js

Нарисуйте круговую диаграмму — Chart.js

Пример описания

В следующем примере показано, как извлечь HTML-код.<table>Прочитайте данные и используйте JavaScript для динамического построения круговой диаграммы. В этом примере используетсяChart.js, прост в использовании и поддерживает автоматическое сопоставление цветов и анимацию.

HTML-структура

<!-- Данные таблицы -->
<table id="dataTable" border="1" style="margin:10px auto;">
  <tr><th>Категория</th><th>Значение</th></tr>
  <tr><td>Apple</td><td>30</td></tr>
  <tr><td>Банан</td><td>15</td></tr>
  <tr><td>Вишня</td><td>25</td></tr>
  <tr><td>Манго</td><td>20</td></tr>
</таблица>

<!-- Контейнер круговой диаграммы -->
<canvas id="pieChart" width="400" height="400"></canvas>

<!-- Загрузить Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Программа JavaScript

//Читаем данные таблицы
const table = document.getElementById("dataTable");
константные метки = [];
константные значения = [];

ибо (пусть я = 1; я< 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: "水果銷售比例" }
    }
  }
});

иллюстрировать

• отtableДинамическое получение данных без ручного определения.
• Chart.js автоматически обрабатывает сопоставление цветов и анимацию.
• Исправлятьtype: "pie"для"doughnut"Можно переключиться на кольцевую диаграмму.

Расширенное приложение

Если вы хотите рисовать на чистом JavaScript (без использования внешней библиотеки), вы можете использоватьCanvasRenderingContext2D.arc()Нарисуйте форму веера самостоятельно. Хотите, я покажу вам версию «без Chart.js»?

Пример рисования диаграммы UML с использованием HTML

1. Используйте SVG, чтобы нарисовать простую диаграмму категорий.

В HTML вы можете использовать<svg>теги для рисования основных диаграмм классов UML. Вот пример того, как использовать прямоугольник и текст для представления простой категории.

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

2. Настройте элементы UML с помощью HTML и CSS.

Различные элементы UML могут быть определены с использованием стилей HTML и CSS. В следующем примере показано, как использовать<div>иCSSнарисовать поле категории и настроить его стиль, чтобы имитировать UML Структура диаграмм категорий.

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

3. Используйте mermaid.js для рисования более сложных UML-диаграмм.

Чтобы нарисовать более сложные диаграммы UML в HTML, вы можете использовать внешнюю библиотеку JavaScript, например mermaid.js. Он поддерживает множество диаграмм UML и может быть непосредственно встроен в HTML. Сначала вам нужно сослаться на mermaid.js, а затем использовать<pre>Теги составляют определения диаграмм UML.

<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

В таком примере можно легко использовать mermaid.js для рисования более сложных и понятных диаграмм UML, а также поддерживать различные типы диаграмм.

Русалка рисует сложные примеры UML

Пример 1: Сложная диаграмма классов

В этом примере показано наследование, состав, агрегирование и связь между категориями.

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

проиллюстрировать:В этом примере показано несколько отношений:

• наследовать：AnimalдаMammalиBirdкатегория супер.
• комбинация：MammalиDogСочетанные отношенияo--выражать.
• полимеризация：BirdиWingАгрегационные отношения-->выражать.
• Свойства и методы: каждая категория содержит свойства и методы, имеющие более четкую структуру.

Пример 2: Ассоциации и множественность

В этом примере показано, как представлять кратность (1..*, 0..1 и т. д.) и роли между категориями.

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

проиллюстрировать:

• множественность：CustomerМожет иметь несколькоOrder, каждыйOrderВсе соответствуют одномуPayment。
• Роль: каждое отношение имеет описание роли (например,placesиincludes）。

Пример 3: Интерфейсы и абстрактные классы

В этом примере показано, как определять интерфейсы и абстрактные классы в Mermaid.js.

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

проиллюстрировать:

• абстрактная категория：Shapeпредставляет собой абстрактную категорию, в которой<<abstract>>отметка.
• наследовать：RectangleиCircleунаследованныйShapeи реализовать его методы.

Пример 4: Сложная реализация класса и интерфейса

В этом примере показано сочетание наследования классов и реализации интерфейса.

<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

проиллюстрировать:

• интерфейс：Flyableявляется интерфейсом и определяетfly()метод.
• Реализация интерфейса：BirdиAirplaneВсе реализованоFlyableинтерфейс, использовать..|>Представление символа.

Инструмент тестирования русалки

Генерация результатов

блок-схема ТД
    A[Начало] --> B{Нужно ли продолжать? }
    B -- Да --> C[Выполнить операцию]
    Б -- Нет --> D[Конец]
    С --> Д

Как проверить синтаксические ошибки Mermaid

1. Используйте Live Editor Mermaid

Русалка предлагает официальноеMermaid Live Editor, вы можете тестировать и проверять наличие синтаксических ошибок на лету. Если после вставки синтаксиса Mermaid возникнут ошибки, редактор отобразит конкретные сообщения об ошибках, что позволит вам быстрее устранить проблему.

2. Уменьшите сложность тестирования.

Если ваша диаграмма Русалки слишком сложна, рекомендуется сегментированное тестирование. Например, сначала удалив некоторые категории или отношения, оставив только самую базовую структуру и постепенно добавляя элементы, вы сможете быстрее выявить возможные источники грамматических ошибок.

3. Подтвердите версию Mermaid.js.

Различные версии Mermaid.js могут иметь разную поддержку синтаксиса. Убедитесь, что вы используете последнюю версию, или проверьте в тестовой среде, что ваша версия Mermaid.js поддерживает используемые функции синтаксиса.

4. Проверьте распространенные ошибки

• Формат свойства или метода: Убедитесь, что свойства и методы правильно сформированы, например. с использованием+attribute : typeдля обозначения атрибутов.
• пространства и символы: проверка наличия пробелов, специальных символов (например,<|--или-->) верно, эти символы используются для обозначения категориальных отношений.
• Избегайте недействительных тегов: Например, некоторые редакторы могут не поддерживать<<abstract>>или другие специальные отметки, рекомендуется удалять или изменять их одну за другой, чтобы убедиться в отсутствии ошибок.

5. Используйте инструменты разработчика для просмотра сообщений об ошибках.

Просмотрите консоль JavaScript в инструментах разработчика браузера. Если диаграмма «Русалка» создана неправильно, в консоли могут отображаться определенные сообщения об ошибках или подсказки, которые помогут вам выявить синтаксические ошибки.

6. Обратитесь к официальным документам.

Официальная документация Mermaid содержит подробные инструкции по грамматике, которые помогут вам убедиться, что грамматика используется правильно. Официальные документы находятся по адресуОфициальный сайт Mermaid.js。

блок-схема

Обзор блок-схемы

Ниже приведен простой пример блок-схемы, иллюстрирующий логическую связь между решениями и действиями.

Пример блок-схемы

блок-схема ТД
    A[Начало] --> B{Нужно ли продолжать? }
    B -- Да --> C[Выполнить операцию]
    Б -- Нет --> D[Конец]
    С --> Д

Пример описания

• начинать:Процесс начинается со «стартового» узла.
• принятие решений:Проверьте, нужно ли вам продолжать.
• Выполните действия:Если ответ «да», выполните соответствующее действие.
• Заканчивать:В конечном итоге процесс завершается независимо от того, выполнено действие или нет.

Как использовать

Вставьте приведенный выше синтаксис блок-схемы в инструмент с поддержкой Mermaid, например редактор Markdown или онлайн-инструмент Mermaid, чтобы создать график.

Библиотека слайдеров масштабирования Mermaid.js

Описание функции

Эта библиотека JavaScript добавляет в диаграммы Mermaid.js функции масштабируемого слайдера, позволяя пользователям<input type="range">Управляет масштабированием диаграммы. Использование библиотекиtransform: scale()Включает визуальное масштабирование без повторного рендеринга Русалки.

Код библиотеки (mermaidZoomSlider.js)

// русалкаZoomSlider.js
функция экспорта setupMermaidZoomSlider({
  SliderId = "zoomSlider",
  DiagramContainerId = "РусалкаКонтейнер",
  мин = 0,1,
  макс = 3,
  шаг = 0,1,
  начальный = 1
} = {}) {
  window.addEventListener("load", () => {
    const слайдер = document.getElementById(sliderId);
    константный контейнер = document.getElementById(diagramContainerId);

    if (!slider || !container) {
      console.warn("Ползунок масштабирования "Русалка: отсутствует ползунок или элемент контейнера");
      возврат;
    }

    //Инициализируем свойства ползунка
    слайдер.мин = мин;
    слайдер.макс = макс;
    слайдер.шаг = шаг;
    слайдер.значение = начальное;

    //Устанавливаем начальный масштаб
    Container.style.transformOrigin = "вверху слева";
    Container.style.transform = `scale(${initial})`;

    //Прослушивание событий: масштабирование
    слайдер.addEventListener("input", () => {
      const Scale = parseFloat(slider.value);
      Container.style.transform = `scale(${scale})`;
    });
  });
}

Использование

<!-- HTML -->
<див>
  <input type="range" id="zoomSlider">
</div>
<div id="mermaidContainer">
  <pre class="русалка">
    график ТД;
      А-->Б;
      Б-->С;
  </пре>
</div>

<!-- Знакомство с модулем JavaScript -->
<тип сценария="модуль">
  импортировать русалку из «https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs»;
  импортировать { setupMermaidZoomSlider } из "./mermaidZoomSlider.js";

  mermaid.initialize({ startOnLoad: true });

  setupMermaidZoomSlider({
    SliderId: "zoomSlider",
    DiagramContainerId: "mermaidContainer",
    мин: 0,2,
    макс: 3,
    шаг: 0,1,
    начальное: 1
  });
</скрипт>

Описание параметра

• sliderId: указывает идентификатор HTML-элемента ползунка.
• diagramContainerId: Идентификатор контейнера карты Русалки.
• min / max / step: диапазон и интервал ползунка.
• initial: Начальный коэффициент масштабирования.

предположение

Если вам нужны расширенные функции, такие как перетаскивание, сброс масштаба и т. д., вы можете дополнительно расширить эту библиотеку функций, например, интегрировать кнопки перетаскивания мышью и кнопки сброса масштаба.

Различные стили линий Mermaid.js

базовый синтаксис строки

Используется в диаграммах Mermaid.js.-->、===>Маркеры используются для установления связей между узлами. Разные символы обозначают разные стили линий.

Общие стили линий

Примеры использования

график ТД
  A[Начало] --> B[Шаг 1]
  B ---> C [Асинхронная обработка]
  C ==> D[сильно зависимо]
  D -- текст --> E [связь с текстом]
  E --o F[круглая голова]
  F --|> G[сплошная стрелка]

Прочие инструкции

• Между узлами можно добавить пояснительный текст для улучшения читаемости.
• Линии также можно настроить с помощью CSS, используя стили (с помощью classDef).
• блок-схема(graph), карта категорий (classDiagram), диаграмма состояний и другие стили немного отличаются.

в заключение

Mermaid.js предоставляет различные стили синтаксиса строк, позволяющие пользователям четко выражать процессы, логику и отношения. Благодаря сочетанию сплошных, пунктирных, толстых линий и графических конечных точек можно создавать простые и хорошо структурированные диаграммы.

D3.js

Что такое D3.js?

D3.js (Документы, управляемые данными) — это библиотека с открытым исходным кодом на основе JavaScript для преобразования данных в динамические и интерактивные визуализации. Он использует стандартные веб-технологии, такие как SVG, HTML и CSS предоставляет мощные инструменты для управления данными и рисования графики.

Возможности D3.js

• На основе данных:Предоставляет набор мощных API-интерфейсов, которые позволяют разработчикам создавать элементы DOM на основе данных и динамически обновлять диаграммы.
• гибкость:Поддерживает различные типы визуализации, включая гистограммы, линейные диаграммы, древовидные диаграммы, карты и т. д., а также позволяет полностью настроить стиль.
• На основе стандартов:Работает со всеми современными браузерами, использующими стандартные технологии, такие как SVG и Canvas.
• Анимация и интерактивность:Поддерживает эффекты плавного перехода и возможность добавлять интерактивные функции, такие как масштабирование, перетаскивание и события щелчка.

Ключевые особенности D3.js

1. Выберите элементы:Используйте селекторы в стиле CSS для выбора элементов DOM и манипулирования ими, например:d3.select()иd3.selectAll()。
2. Привязка данных:Привязывайте данные к элементам DOM и обновляйте представления на основе данных.
3. Масштабирование и масштабирование:Предоставляет инструменты масштабирования и функции масштабирования для облегчения сопоставления данных с пикселями.
4. Нарисуйте график:Используйте инструменты контуров и фигур SVG для создания различных диаграмм, таких как круги, прямоугольники и кривые.
5. Эффекты перехода:Встроенная функция анимации поддерживает плавное изменение данных.

Примеры применения

D3.js широко используется в различных сценариях визуализации данных, таких как:

• Линейные и гистограммы для отображения статистических данных.
• Визуализация карты используется для отображения данных географической информации.
• Сетевая диаграмма, используемая для анализа ассоциаций или социальных сетей.
• Динамически обновляемые информационные панели для мониторинга изменений данных.

учебные ресурсы

Чтобы изучить D3.js, вы можете обратиться к следующим ресурсам:

• Официальный сайт D3.js- Предоставить полную документацию по API и примеры.
• Observable- Платформа, предназначенная для обмена кодом и примерами D3.js.
• Онлайн-курсы и книги, например.《Interactive Data Visualization for the Web》。

в заключение

D3.js — это мощный и гибкий инструмент визуализации данных для разработчиков, которым требуются настраиваемые диаграммы и интерактивные эффекты. Хотя кривая обучения немного выше, после освоения потенциал его применения безграничен.

Пример древовидной диаграммы D3.js

Пример описания

В этом примере D3.js используется для рисования простой древовидной диаграммы, показывающей, как визуализировать данные иерархической структуры. Вот основные шаги:

• Создайте иерархическую структуру информации.
• Использование D3.jstree()Функция генерирует древовидную структуру.
• Нарисуйте узлы (круги) и связи (пути) между узлами.

Пример кода

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

Отображение результатов

После запуска этого кода вы увидите древовидную диаграмму:

• Корневой узел дерева находится слева (CEO）。
• дочерние узлы (например,CTOиCFO) развернуть вправо.
• Каждый узел представлен кружком, рядом с которым отображается имя узла.

Приложения и расширения

Этот пример можно распространить на более сложные иерархии или настроить стиль в соответствии с различными потребностями. Например:

• Измените стиль узла (например, цвет или размер).
• Добавьте интерактивные функции (например, щелчок по узлу, чтобы развернуть дочерние узлы).
• Обработка динамических данных из внешних источников.

Прямоугольная древовидная карта

Концептуальная записка

Rectangular treemap is a visualization technique that uses nested rectangles to display hierarchical data. Площадь каждого прямоугольника представляет собой числовое значение, например объем продаж или размер архива, и каждый прямоугольник может быть дополнительно вложен для представления подкатегорий.

Сценарии применения

• Сравнение размеров файлов или папок в файловой системе
• Бюджет компании или распределение расходов
• Доля рынка или распределение продаж продукции
• Анализ трафика веб-сайта или классификации контента

Пример (сделано с использованием D3.js)

преимущество

• Эффективное использование пространства для отображения больших объемов информации
• Сравните числовые значения с первого взгляда
• Простая для понимания иерархическая структура и распределение

На что следует обратить внимание

• Если уровней слишком много или блоки слишком малы, текстовая метка может быть нечеткой.
• Не подходит для точного сравнения очень близких значений.
• Рекомендуется использовать интерактивные инструменты для улучшения читаемости.

Пример сетевой диаграммы Cytoscape.js

Основное использование

Cytoscape.js — это библиотека JavaScript, используемая для рисования сетевых графиков (Graph). Он использует JSON для определения узлов и ребер. It has simple syntax and supports interaction and style customization.

Пример простой сетевой диаграммы

иллюстрировать

• elements: Определить данные узлов и ребер.
• style: стили управления, такие как цвета, стрелки, метки.
• layout: Графическое расположение (дополнительная сетка, круг, косой и т. д.)

Cytoscape.js различные примеры применения

1. Макет круга

2. Перетащите взаимодействие

3. Стиль по классам

иллюстрировать

• circle layout: Подходит для диаграммы взаимоотношений с одним центральным узлом.
• интерактивные мероприятия: Обнаруживает щелчки мышью и перетаскивание.
• Стиль классификации: можно пройтиclassesОпределите группы узлов и назначьте разные стили.

Библиотека рисования принципиальных схем JavaScript

JointJS отображает основные компоненты принципиальной схемы

Построение 3D-уравнений

Описание функции

Этот инструмент можно использовать какxиyкак независимая переменнаяz = f(x, y)Уравнения рисуются в трехмерных поверхностных диаграммах, а также предоставляются интерактивные функции управления мышью для вращения, масштабирования и перемещения.

HTML-структура

<div id="plot3d" style="width:100%; height:600px;"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<тип сценария="модуль">
  // Определим функцию z = f(x, y) (можно заменить любым уравнением)
  функция вычисленияZ(x, y) {
    вернуть 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-данные
  const zValues = xRange.map(x =>
    yRange.map(y => ComputeZ(x, y))
  );

  константные данные = [{
    тип: 'поверхность',
    х: хдиапазон,
    y: yRange,
    z: zЗначения,
    цветовая гамма: «Виридис»
  }];

  константный макет = {
    title: 'z = sin(x) * cos(y)',
    авторазмер: правда,
    сцена: {
      xaxis: { title: 'Ось X' },
      yaxis: { title: 'Ось Y' },
      zaxis: { title: 'Ось Z' }
    }
  };

  Plotly.newPlot('plot3d', данные, макет);
</скрипт>

<!-- numeric.js используется для создания массивов linspace -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>

Инструкция по эксплуатации

• Перетаскивание левой кнопкой мыши: поворот перспективы
• Щелкните правой кнопкой мыши и перетащите: панорамирование экрана.
• Колесо мыши: увеличение и уменьшение масштаба

Пример замены функции

• z = Math.sin(x * y)→ гофрированный
• z = x * x - y * y→ Седловидная поверхность
• z = Math.exp(-(x * x + y * y))→ Пик Гаусса

иллюстрировать

В этом примере Plotly.js используется для интерактивной трехмерной визуализации, а numeric.js — для создания числовых сеток. Вы можете изменить его свободноcomputeZИспользуйте содержимое функции для рисования любой трехмерной поверхности.

Библиотека JavaScript для трехмерного рисования химической структуры

3Dmol.js

3Dmol.js — это библиотека визуализации химических молекул WebGL с открытым исходным кодом, разработанная специально для браузеров и позволяющая рисовать молекулярные структуры непосредственно на веб-страницах.

• Поддерживаемые форматы:УЛЫБКИ, PDB, SDF, XYZ, Mol2 и т. д.
• Функции:Легкий вес, не требуются внешние плагины и хорошая интерактивность.
• URL-адрес:https://3dmol.org

<div id="viewer" style="width:400px;height:400px;"></div>
<script src="https://3dmol.org/build/3Dmol-min.js"></script>
<скрипт>
  const просмотрщик = $3Dmol.createViewer("просмотрщик", {backgroundColor: "белый" });
  viewer.addModel("C1=CC=CC=C1", "smi"); // SMILES структура бензола
  viewer.setStyle({}, {stick: {}, сфера: {масштаб: 0,3}});
  просмотрщик.zoomTo();
  просмотрщик.render();
</скрипт>

ChemDoodle Web Components

ChemDoodle предоставляет 2D и 3D чертежи структур, поддерживает множество химических форматов и подходит для обучения и веб-приложений.

• Поддерживаемые форматы:МОЛ, СДФ, СМАЙЛС, ИнЧИ и т.д.
• Функции:Полный набор функций, возможность интеграции спектральных диаграмм и структурных чертежей (требуется разрешение)
• URL-адрес:https://web.chemdoodle.com

JSmol

JSmol — это версия Jmol на JavaScript, подходящая для отображения больших молекул, таких как белки или кристаллические структуры.

• Поддерживаемые форматы:PDB, CIF, XYZ и т. д.
• Функции:Мощный, может выполнять полный командный язык Jmol.
• URL-адрес:http://wiki.jmol.org/index.php/JSmol

Mol*

Mol* (MolStar) — это инструмент визуализации структур высокого порядка, разработанный RCSB PDB и специально разработанный для биологических макромолекул.

• Поддерживаемые форматы:PDB, mmCIF и т. д.
• Функции:Может представлять карты электронной плотности, структурные сравнения и изображения с высоким разрешением.
• URL-адрес:https://molstar.org

сравнительная таблица

3Dmol.js отображает молекулы бензола

Инструкция по применению

В этом примере используется3Dmol.jsи принятьФормат XYZОпределите координаты атомов молекулы бензола, чтобы правильно отобразить трехмерную молекулярную структуру.

Ошибка возникает, если используется формат SMILES ("smi").Unknown format: smi, поскольку этот формат не поддерживается в некоторых версиях 3Dmol.js.

Этапы использования

1. Сохраните следующую программу какbenzene.html。
2. Используйте локальный HTTP-сервер (например, Pythonpython -m http.server) включен.
3. Войдите в браузерhttp://localhost:8000Посмотреть результаты.

HTML-код

<!DOCTYPE html>
<html>
<голова>
  <мета-кодировка="utf-8">
  <title>3Dmol.js визуализирует молекулы бензола</title>
  <script src="https://3dmol.org/build/3Dmol-min.js"></script>
  <стиль>
    #просмотрщик {
      ширина: 600 пикселей;
      высота: 600 пикселей;
      положение: относительное;
      граница: 1 пиксель, сплошная #aaa;
    }
  </стиль>
</голова>
<тело>

<h2>3Dmol.js отображение молекул бензола (формат XYZ)</h2>
<div id="viewer"></div>

<скрипт>
  document.addEventListener("DOMContentLoaded", function () {
    const просмотрщик = $3Dmol.createViewer("просмотрщик", {backgroundColor: "белый" });

    const xyzData = `
12
бензол
С 0,0000 1,3968 0,0000
Н 0,0000 2,4903 0,0000
С -1,2096 0,6984 0,0000
Н -2,1471 1,2451 0,0000
С -1,2096 -0,6984 0,0000
Н -2,1471 -1,2451 0,0000
С 0,0000 -1,3968 0,0000
Н 0,0000 -2,4903 0,0000
С 1,2096 -0,6984 0,0000
Н 2,1471 -1,2451 0,0000
С 1,2096 0,6984 0,0000
Н 2,1471 1,2451 0,0000
`;

    просмотрщик.addModel(xyzData, "xyz");
    viewer.setStyle({}, {stick: {}, сфера: {масштаб: 0,3}});
    просмотрщик.zoomTo();
    просмотрщик.render();
  });
</скрипт>

</тело>
</html>

На что следует обратить внимание

• 3Dmol.js не обязательно поддерживает формат SMILES («smi»). Вместо этого рекомендуется использовать XYZ или SDF.
• В браузере должен быть включен WebGL, иначе экран может быть пустым.
• Пожалуйста, не делайте этого напрямуюfile://Включите HTML. Рекомендуется использовать локальный HTTP-сервер.

Отображение молекул бензола 3Dmol.js (формат XYZ)

Пользовательские карты Google

Обзор

API JavaScript Карт Google позволяет разработчикам встраивать интерактивные карты в веб-страницы. И динамически добавляйте пользовательские элементы, такие как маркеры, слои и текстовые метки, с помощью JavaScript. В следующем примере показано, как отобразить карту и добавить пользовательские маркеры.

Шаг 1. Подайте заявку на получение ключа API Карт Google.

Перейти кGoogle Cloud Console, давать возможностьMaps JavaScript API, И создайте набор ключей API (API Key).
После его получения добавьте его при загрузке скрипта.?key=YOUR_API_KEY。

Шаг 2. Создайте структуру HTML

<!DOCTYPE html>
<html>
<голова>
  <мета-кодировка="utf-8">
  <title>Карта Google с пользовательскими тегами</title>
  <стиль>
    #карта {
      ширина: 100%;
      высота: 500 пикселей;
    }
  </стиль>
</голова>
<тело>

<h3>Моя карта</h3>
<div id="map"></div>

<!-- Загрузить JS API Google Maps -->
<асинхронный сценарий
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</скрипт>

<скрипт>
функция initMap() {
  //Инициализируем карту
  const center = { lat: 25.033964, lng: 121.564468 }; // Тайбэй 101
  const map = new google.maps.Map(document.getElementById("карта"), {
    масштаб: 14,
    центр: центр
  });

  //Создаем собственный тег
  const myTags = [
    { позиция: { широта: 25.034, длина: 121.565 }, заголовок: «Отметка А», содержание: «Это точка А» },
    { позиция: { широта: 25.036, длина: 121.562 }, заголовок: «Отметка Б», содержание: «Это точка Б» },
    { позиция: { широта: 25.032, длина: 121.568 }, title: «Отметка C», содержание: «Это точка C» }
  ];

  //Создаем информационное окно (InfoWindow)
  const infoWindow = новый google.maps.InfoWindow();

  //Добавляем маркеры на карту
  myTags.forEach(tag => {
    const маркер = новый google.maps.Marker({
      позиция: тег.позиция,
      карта: карта,
      заголовок: тег.заголовок,
      значок: {
        URL: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
      }
    });

    // Нажмите, чтобы отобразить информацию
    маркер.addListener("клик", () => {
      infoWindow.setContent("<b>" + tag.title + "</b><br>" + tag.content);
      infoWindow.open(карта, маркер);
    });
  });
}
</скрипт>

</тело>
</html>

Шаг 3. Расширяемая функциональность

• СменныйiconКартинки для себя (PNG, SVG).
• доступныйgoogle.maps.PolylineилиPolygonРисуйте линии и области.
• доступныйmap.setMapTypeId('satellite')Переключитесь в спутниковый режим.
• Динамическая информация может отображаться на маркерах, например местоположение в реальном времени или данные API.

Часто используемые настройки

официальные ресурсы

• Официальная документация Google Maps JavaScript API
• Учебное пособие по маркерам и информационным окнам

Звук в сети

JavaScript play do re mi с использованием MIDI API

иллюстрировать

Чтобы воспроизвести определенный MIDI-звук (например, гитару) в браузере, вы можете использовать Web MIDI API или, проще говоря, Web Audio API с проигрывателем SoundFont, напримерSoundFont Playerнаборsoundfont-player。

Пример: игра До Ре Ми под гитарный тон.

<script src="https://unpkg.com/[email protected]/dist/soundfont-player.js"></script>
<button onclick="playDoReMi()">Играть в До Ре Ми</button>

<скрипт>
асинхронная функция playDoReMi() {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const player = ждут Soundfont.instrument(audioCtx, 'acoustic_guitar_nylon');

  const now = audioCtx.currentTime;
  player.play('C4', сейчас); // Делаем
  player.play('D4', теперь + 0,5); // Ре
  player.play('E4', теперь + 1); // Ми
}
</скрипт>

иллюстрировать

• C4, D4, E4: Представляет До Ре Ми
• acoustic_guitar_nylon: гитарный тон SoundFont (также можно изменить на electric_guitar_jazz и т. д.)
• Каждый тон воспроизводится последовательно с задержкой 0,5 секунды.

Поддерживаемые звуки гитары

• acoustic_guitar_nylon
• acoustic_guitar_steel
• electric_guitar_jazz
• electric_guitar_clean
• electric_guitar_muted
• overdriven_guitar
• distortion_guitar
• guitar_harmonics

в заключение

использоватьsoundfont-playerС помощью API веб-аудио вы можете легко реализовать функции воспроизведения инструментов на уровне MIDI без установки каких-либо плагинов. Просто укажите тембр и высоту звука, и вы сможете быстро реализовать масштабную мелодию, например «до ре ми».

Воспроизведение JavaScript Do Re Mi с использованием синтезатора AudioContext

иллюстрировать

Если звук невозможно воспроизвести через внешний SoundFont, мы можем использовать его напрямую.Web Audio APIизOscillatorNodeСинтезатор воспроизводит До Ре Ми и имитирует стиль гитары (например: короткий звук + пианиссимо).

Пример программы: встроенное воспроизведение звука Do Re Mi

<button onclick="playDoReMi()">Играть в До Ре Ми</button>

<скрипт>
функция playTone(частота, startTime, продолжительность, контекст) {
  const osc = context.createOscillator();
  константное усиление = context.createGain();

  osc.type = "треугольник"; // Синтетическая форма волны, близкая к звуку гитары, может быть изменена на «квадратную», «пилообразную»
  osc.частота.значение = частота;

  Gain.gain.setValueAtTime(0,2, startTime);
  Gain.gain.exponentialRampToValueAtTime(0,001, startTime + продолжительность);

  osc.connect (усиление);
  Gain.connect(context.destination);

  osc.start(startTime);
  osc.stop(startTime + продолжительность);
}

функция playDoReMi() {
  константный контекст = новый (window.AudioContext || window.webkitAudioContext)();
  const now = context.currentTime;

  // Частота До Ре Ми (C4, D4, E4)
  playTone(261.63, сейчас, 0,4, контекст); // С4
  playTone(293.66, теперь + 0,5, 0,4, контекст); // Д4
  playTone(329.63, теперь + 1.0, 0.4, контекст); // Е4
}
</скрипт>

особенность

• Используйте встроенный генератор звука, не полагаясь на внешние файлы.
• Звук может быть сгенерирован мгновенно без задержек при загрузке.
• можно изменитьosc.typeИли добавьте фильтр для имитации гитарного тона.

Советы по технике аналоговой гитары

• использоватьtriangleилиsawtoothформа волны
• Плюс быстрое затухание громкости(gain.exponentialRampToValueAtTime()) имитирует сбор
• Для дальнейшего украшения можно добавить фильтры (низкочастотный, полосовой).

в заключение

Использование чистого веб-аудио API — наиболее стабильный и совместимый способ. Если у вас есть дополнительные потребности, вы можете добавить фильтры, эхо или интегрировать источники звука MIDI.

Тип типа и описание тембра OscillatorNode

Встроенный тип osc.type

Демонстрация использования

const osc = audioContext.createOscillator();
osc.type = "пилообразный"; // Можно изменить на «синус», «квадрат», «треугольник», «пользовательский»
osc.частота.значение = 440; // А4
оск.старт();

Дополнение: Пользовательская форма волны

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

в заключение

другойosc.typeМожет имитировать различные стили звуков музыкальных инструментов. Если вы хотите смоделировать гитару, рекомендуется начать сsawtoothилиtriangleНачните работу и настройте звук с помощью огибающих, фильтров и эха.

Воспроизведите фразу До Ре Ми, используя WebAudioFont

иллюстрировать

РекомендуетсяWebAudioFontЭта библиотека JavaScript с открытым исходным кодом поддерживает более тысячи MIDI-звуков, включая звуки гитары и других инструментов, с лучшим качеством звука и простой интеграцией.

Быстрый пример: игра в До Ре Ми (с использованием звуков фортепиано или гитары)

Нажмите здесь, чтобы гарантировать игру

Ключевое объяснение

• Используя WebAudioFont, вы можете выбирать из множества звуков MIDI-инструментов, которые можно заменить фортепиано, электрогитарой, акустической гитарой и т. д. :contentReference[oaicite:0]{index=0}.
• Используйте `queueWaveTable()` для воспроизведения указанного шага номера MIDI (60=C4, 62=D4, 64=E4).
• Добавление audioContext.resume() может решить проблему тишины, возникающую из-за того, что многие браузеры приостанавливаются перед взаимодействием с пользователем.

Сменные звуки

• 'acoustic_guitar_steel'
• 'acoustic_guitar_nylon'
• 'electric_guitar_clean' ⋯⋯

Подвести итог

Объединив WebAudioFont с API веб-аудио, вы можете легко использовать настоящие MIDI-звуки (например, гитары) для воспроизведения нот, решая проблему одного чистого синтезированного звука осциллятора и избегая предыдущей ситуации молчания проигрывателей SoundFont.

email: [email protected]

T:0000

資訊與搜尋 | 回dev首頁
email: Yan Sa [email protected] Line: 阿央
電話: 02-27566655 ,03-5924828

阿央
泱泱科技
捷昱科技泱泱企業