diff --git a/DEPS b/DEPS index 21241aab50..c133543409 100644 --- a/DEPS +++ b/DEPS @@ -7,12 +7,12 @@ "common": [ { "url": "${PAG_GROUP}/vendor_tools.git", - "commit": "b3125b9cf13bcc70e63212de1d0ed95e7beaa2a9", + "commit": "4e331972e2e828655b1901dccd5081cc995b32fc", "dir": "third_party/vendor_tools" }, { "url": "${PAG_GROUP}/tgfx.git", - "commit": "861d79ed1926accea903200af36f1c2be0c99567", + "commit": "b062b9a779e481e99f0e1da1f0951f0f5a9f431f", "dir": "third_party/tgfx" }, { diff --git a/README.md b/README.md index da8bc80974..c7e4005c24 100644 --- a/README.md +++ b/README.md @@ -14,16 +14,16 @@ English | [简体中文](./README.zh_CN.md) | [Homepage](https://pag.io) ## Introduction -libpag is a real-time rendering library for PAG (Portable Animated Graphics) files that renders both -vector-based and raster-based animations across most platforms, such as iOS, Android, OpenHarmony, macOS, -Windows, Linux, and Web. +libpag is a real-time rendering library for PAG (Portable Animated Graphics) files, capable of +rendering both vector-based and raster-based animations across various platforms, including iOS, +Android, OpenHarmony, macOS, Windows, Linux, and the Web. -PAG is an open-source file format for recording animations. PAG files can be created and exported -from Adobe After Effects with the PAGExporter plugin and previewed in the PAGViewer app, which you -can get from [pag.io](https://pag.io), and both of them are available on both macOS and Windows. +PAG is an open-source file format designed for recording animations. You can create and export PAG +files from Adobe After Effects using the PAGExporter plugin and preview them in the PAGViewer app, +both available on macOS and Windows. -PAG is now being used by 40+ Tencent apps, such as WeChat, Mobile QQ, Honor of Kings Mobile Game, -Tencent Video, QQ Music, and so on, reaching hundreds of millions of users. +PAG is widely used in major Tencent apps like WeChat, Mobile QQ, Honor of Kings, Tencent Video, and +QQ Music, as well as in thousands of third-party apps, reaching hundreds of millions of users. ## Advantages @@ -31,36 +31,38 @@ Tencent Video, QQ Music, and so on, reaching hundreds of millions of users. intro_1 -Benefiting from the highly efficient binary format design, PAG files can be decoded 10x faster than -JSON files but also are about 50% smaller in file size when exporting the same animations. Designers -can also ship beautiful animations with bitmaps or audiovisual media integrated into a single file -easily without other attachments. +Benefiting from its highly efficient binary format, PAG files decode 10 times faster than JSON files +and are about 50% smaller in file size for the same animations. Designers can also easily include +beautiful animations with bitmaps or audiovisual media in a single file without needing additional +attachments. - **All AE features supported** intro_2 -While other solutions may only support exporting limited vector-based AE features, PAG supports -exporting all AE animations into a single file by combining vector-based exporting with raster-based -exporting techniques. Therefore, third-party plugin effects in AE can be exported as well. +While other solutions may only support exporting limited vector-based AE features, PAG combines +vector-based and raster-based exporting techniques to support all AE animations in a single file. +This means third-party plugin effects in AE can also be exported. - **Measurable performance** intro_4 -PAG provides a monitoring panel in PAGViewer that shows normalized performance data for PAG files, -which helps designers to examine and optimize performance easily without developers. Along with -dozens of automatic optimization techniques from the PAGExporter plugin, animations with cool visual -effects and excellent performance now can be created more effectively. +PAG provides a monitoring panel in PAGViewer that displays normalized performance data for PAG files, +making it easy for designers to review and optimize performance without needing developers. With +numerous automatic optimization techniques from the PAGExporter plugin, you can create animations +with impressive visual effects and excellent performance more efficiently. + +PAGViewer includes a monitoring panel - **Runtime editable animations** intro_5 -With the flexible editing APIs from PAG SDK, developers can easily change the layer structure of a -single PAG file, mix multiple PAG files into one composition, or replace texts and images with all -pre-designed animation effects applied at runtime. It reduces tons of coding work for product -features like video templates. +With the flexible editing APIs from the PAG SDK, developers can easily modify the layer structure of +a single PAG file, combine multiple PAG files into one composition, or replace text and images with +all pre-designed animation effects applied at runtime. This significantly reduces the coding work +required for features like video templates. ## System Requirements @@ -74,15 +76,14 @@ features like video templates. ## Getting Started -We currently only publish precompiled libraries for iOS, Android, and Web. You can build libraries of -other platforms from the source code. The latest releases can be downloaded +We currently only publish precompiled libraries for iOS, Android, macOS, Web, and OpenHarmony. You +can build libraries of other platforms from the source code. The latest releases can be downloaded from [here](https://github.com/Tencent/libpag/releases). ### iOS Integration -You can use the framework downloaded from the release page, or add libpag to your project by -CocoaPods: -Add the pod to your Podfile: +You can download the framework from the release page or add `libpag` to your project using CocoaPods. +To add the pod to your Podfile, include: ``` pod 'libpag' @@ -94,7 +95,7 @@ And then run: pod install ``` -After installing the cocoapod into your project import libpag with +After installing the CocoaPod, import `libpag` into your project with: ``` #import @@ -102,9 +103,9 @@ After installing the cocoapod into your project import libpag with ### Android Integration -You can use the aar downloaded from the release page, or add libpag to your project by Maven: +You can download the AAR from the release page or add `libpag` to your project using Maven: -Edit the `build.gradle` file in the root of your project, add `mavenCentral()` to `repositories`: +Edit the `build.gradle` file in the root of your project and add `mavenCentral()` to the `repositories` section: ``` buildscript { @@ -125,38 +126,42 @@ dependencies { } ``` -Add the following rule to your proguard rules to avoid the wrong obfuscation. +Add the following rule to your proguard rules to prevent incorrect obfuscation: ``` -keep class org.libpag.** {*;} -keep class androidx.exifinterface.** {*;} ``` -Finally, run gradle sync and then build the project. +Finally, run gradle sync and build your project. ### OpenHarmony Integration -You can use the har downloaded from the [release](https://github.com/Tencent/libpag/releases) page, or add libpag to your project by -OHPM: + +You can download the HAR file from the [release](https://github.com/Tencent/libpag/releases) page, +or add `libpag` to your project using OHPM: ``` ohpm install @tencent/libpag ``` -Or, you can add it to your project manually. -Add the following lines to oh-package.json5 on your app module. +Alternatively, you can add it to your project manually. Add the following lines to `oh-package.json5` +in your app module. + ``` "dependencies": { "@tencent/libpag": "^1.0.1", } ``` -Then run + +Then run: + ``` ohpm install ``` ### Web Integration -Simply copy the following code into an HTML file and open it in your browser: +Copy the following code into an HTML file and open it in your browser: ```html @@ -178,7 +183,7 @@ More information：[Web SDK Guide](./web/README.md) ### Example -Check out the following projects to learn how to use the APIs of libpag: +Explore these projects to learn how to use the libpag APIs: - [https://github.com/libpag/pag-ios](https://github.com/libpag/pag-ios) - [https://github.com/libpag/pag-android](https://github.com/libpag/pag-android) @@ -190,21 +195,21 @@ Check out the following projects to learn how to use the APIs of libpag: - [Android API Reference](https://pag.io/apis/android/index.html) - [Web API Reference](https://pag.io/apis/web/index.html) -You can find other docs on [pag.io](https://pag.io/docs/home.html) +You can find additional documentation on [pag.io](https://pag.io/docs/home.html) ## Development -We recommend using CLion IDE on the macOS platform for development. +We recommend using the CLion IDE on macOS for development. ### Branch Management -- The `main` branch is our active developing branch which contains the latest features and bugfixes. -- The branches under `release/` are our stable milestone branches which are fully tested. We will -periodically cut a `release/{version}` branch from the `main` branch. After one `release/{version}` -branch is cut, only high-priority fixes are checked into it. +- The `main` branch is our active development branch, containing the latest features and bug fixes. +- The `release/` branches are our stable milestone branches, fully tested. We periodically create a + `release/{version}` branch from the `main` branch. After a `release/{version}` branch is created, + only high-priority fixes are checked into it. -**Note: This repository only contains the latest code since PAG 4.0. To use the legacy PAG 3.0 -versions, you can download the precompiled libraries from [here](https://github.com/Tencent/libpag/releases).** +**Note: This repository only contains the latest code since PAG 4.0. For legacy PAG 3.0 versions, +you can download the precompiled libraries from [here](https://github.com/Tencent/libpag/releases).** ### Build Prerequisites @@ -220,57 +225,58 @@ versions, you can download the precompiled libraries from [here](https://github. ### Dependency Management -libpag uses [depsync](https://github.com/domchen/depsync) tool to manage third-party dependencies. +libpag uses the [depsync](https://github.com/domchen/depsync) tool to manage third-party dependencies. **For macOS platform：** -Run the script in the root of the project: +Run the script located in the root directory of the project: ``` ./sync_deps.sh ``` -This script will automatically install the necessary tools and synchronize all third-party repositories. +This script will automatically install the necessary tools and sync all third-party repositories. **For other platforms：** -First, make sure you have installed the latest version of node.js (You may need to restart your -computer after this step). And then run the following command to install depsync tool: +First, ensure you have the latest version of Node.js installed (you may need to restart your +computer afterward). Then, run the following command to install the depsync tool: ``` npm install -g depsync ``` -And then run `depsync` in the root directory of the project. +Then, run `depsync` in the root directory of the project. ``` depsync ``` -Git account and password may be required during synchronizing. Please make sure you have enabled the -`git-credential-store` so that `CMakeList.txt` can trigger synchronizing automatically next time. +You might need to enter your Git account and password during synchronization. Ensure you have +enabled the `git-credential-store` so that `CMakeList.txt` can automatically trigger synchronization +next time. ### Build -After the synchronization, you can open the project with CLion and build the pag library. +After synchronization, you can open the project with CLion and build the PAG library. -**For macOS platform：** +**For macOS:** -There are no extra configurations of CLion required. +No additional CLion configuration is needed. -**For Windows platform：** +**For Windows:** -Please follow the following steps to configure the CLion environment correctly: +Follow these steps to configure CLion correctly: -- Make sure you have installed at least the **[Desktop development with C++]** and **[Universal Windows Platform development]** components for VS2019. -- Open the **File->Setting** panel, and go to **Build, Execution, Deployment->ToolChains**, then set the toolchain of CLion to **Visual Studio** with **amd64 (Recommended)** or **x86** architecture. +- Ensure you have installed the **[Desktop development with C++]** and **[Universal Windows Platform development]** components for VS2019. +- Open the **File->Settings** panel, go to **Build, Execution, Deployment->Toolchains**, and set the toolchain to **Visual Studio** with **amd64 (Recommended)** or **x86** architecture. -**Note: If anything goes wrong during cmake building, please update the cmake commandline tool to the latest -version and try again.** +**Note: If you encounter issues during the CMake build, update to the latest version of the CMake +command-line tool and try again.** ## Support Us -If you find libpag is helpful, please give us a **Star**. We sincerely appreciate your support :) +If you find libpag helpful, please give us a **Star**. We truly appreciate your support :) [![Star History Chart](https://api.star-history.com/svg?repos=Tencent/libpag&type=Date)](https://star-history.com/#Tencent/libpag&Date) @@ -282,13 +288,12 @@ libpag is licensed under the [Apache Version 2.0 License](./LICENSE.txt) ## Privacy Policy -Please comply with [the personal information processing rules of PAG SDK](https://privacy.qq.com/document/preview/01e79d0cc7a2427ba774b88c6beff0fd) while using libpag SDK +Please refer to the [PAG SDK Personal Information Processing Rules](https://privacy.qq.com/document/preview/01e79d0cc7a2427ba774b88c6beff0fd) when using the libpag SDK. ## Contribution -If you have any ideas or suggestions to improve libpag, welcome to submit -an [issue](https://github.com/Tencent/libpag/issues/new/choose) -/ [pull request](https://github.com/Tencent/libpag/pulls). Before making a pull request or issue, -please make sure to read [Contributing Guide](./CONTRIBUTING.md). +If you have any ideas or suggestions to improve libpag, feel free to submit an +[issue](https://github.com/Tencent/libpag/issues/new/choose) or a [pull request](https://github.com/Tencent/libpag/pulls). +Before doing so, please read our [Contributing Guide](./CONTRIBUTING.md). diff --git a/README.zh_CN.md b/README.zh_CN.md index 70ea26b902..f8e3b48a67 100644 --- a/README.zh_CN.md +++ b/README.zh_CN.md @@ -18,7 +18,8 @@ Windows, Linux, 以及 Web 端。 PAG 方案是一套完善的动效工作流。提供从 AE（Adobe After Effects）导出插件，到桌面预览工具 PAGViewer，再到各端的跨平台渲染 SDK。 目标是降低或消除动效研发相关的成本，打通设计师创作到素材交付上线的极简流程，不断输出运行时可编辑的高质量动效内容。 -PAG 方案目前已经接入了腾讯系 40 余款应用，包括微信，手机QQ，王者荣耀，腾讯视频，QQ音乐等头部产品，稳定性经过了海量用户的持续验证，可以广泛应用于UI动画、贴纸动画、视频编辑、模板设计等场景。典型应用场景可以参考[官网案例](https://pag.io/case.html)。 +PAG 方案目前已经接入了腾讯系几乎所有主流应用以及外部几千个业务，包括微信，手机QQ，王者荣耀，腾讯视频，QQ音乐等头部产品， +稳定性经过了海量用户的持续验证，可以广泛应用于UI动画、贴纸动画、视频编辑、模板设计等场景。典型应用场景可以参考[官网案例](https://pag.io/case.html)。 详细介绍可以参考相关报道： @@ -63,8 +64,8 @@ PAG 方案目前已经接入了腾讯系 40 余款应用，包括微信，手机 ## 快速接入 -由于大部分平台没有统一的上层业务框架，目前我们暂时只为 iOS, Android 和 Web 平台定期发布预编译的二进制库，其他平台的库需要通过 -源码根据自己的实际需求调整参数进行编译。移动端最新的release库可以在 [这里](https://github.com/Tencent/libpag/releases) +由于大部分平台没有统一的上层业务框架，目前我们暂时只为 iOS, Android，macOs, Web 和鸿蒙平台定期发布预编译的二进制库， +其他平台的库需要通过源码根据自己的实际需求调整参数进行编译。移动端最新的release库可以在 [这里](https://github.com/Tencent/libpag/releases) 下载。 详细的 SDK接入文档可以参考 [SDK 接入](https://pag.io/docs/sdk.html) 。Web 平台的接入文档可以参考 [Web SDK 接入](./web/README.md) @@ -267,7 +268,7 @@ libpag 基于 [Apache-2.0](./LICENSE.txt) 协议开源. ## 隐私政策 -使用 libpag SDK 时请遵守 [PAG SDK个人信息保护规则](https://privacy.qq.com/document/preview/01e79d0cc7a2427ba774b88c6beff0fd). +使用 libpag SDK 时请参考 [PAG SDK个人信息保护规则](https://privacy.qq.com/document/preview/01e79d0cc7a2427ba774b88c6beff0fd). ## 贡献 diff --git a/qt/CMakeLists.txt b/qt/CMakeLists.txt index 3a975e5383..bc21659b6f 100644 --- a/qt/CMakeLists.txt +++ b/qt/CMakeLists.txt @@ -36,13 +36,15 @@ if (NOT CMAKE_PREFIX_PATH) include("./QTCMAKE.cfg") endif () -find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core) -if (${QT_VERSION_MAJOR} LESS 6) - message("The QT version is less than 6.0, force to use x86_64 architecture.") - SET(CMAKE_SYSTEM_PROCESSOR x86_64) - SET(CMAKE_OSX_ARCHITECTURES x86_64) +string(REGEX MATCH "([0-9]+)\\.[0-9]+\\.[0-9]+" QT_VERSION ${CMAKE_PREFIX_PATH}) +if (QT_VERSION) + string(REGEX MATCH "^[0-9]+" QT_VERSION_MAJOR ${QT_VERSION}) + if (QT_VERSION_MAJOR GREATER_EQUAL 6 AND CMAKE_SIZEOF_VOID_P EQUAL 4) + message(FATAL_ERROR "QT has dropped support for 32-bit builds since version 6.0.0") + endif () endif () +find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core) find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Widgets OpenGL Qml Quick) list(APPEND PAG_VIEWER_PLATFORM_LIBS Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Widgets Qt${QT_VERSION_MAJOR}::OpenGL Qt${QT_VERSION_MAJOR}::Qml Qt${QT_VERSION_MAJOR}::Quick) diff --git a/qt/README.md b/qt/README.md index f4e8c72f53..e780895657 100644 --- a/qt/README.md +++ b/qt/README.md @@ -2,18 +2,18 @@ English | [简体中文](./README.zh_CN.md) # QT Demo -Please make sure you have built the libpag library successfully before building the QT demo project. +Before building the QT demo project, make sure you have successfully built the libpag library. ## macOS -Open the `qt` folder with CLion, and then open the `qt/QTCMAKE.cfg` file to modify the QT path to -your local QT installation path. Then you can build and run the `PAGViewer` target. +Open the `qt` folder in CLion, then open the `qt/QTCMAKE.cfg` file and update the QT path to your +local QT installation path. After that, you can build and run the `PAGViewer` target. ## Windows -- Please refer to the build guide in [README.md](./../README.md) to install the necessary modules of VS2019 and make sure the ToolChain of CLion is Visual Studio with **amd64** architecture. -- Open the `qt` folder with CLion, and then open the `qt/QTCMAKE.cfg` file to modify the QT path to your local QT installation path. For example: `C:/Qt/Qt5.13.0/5.13.0/msvc2017_64/lib/cmake`. -- Open the configuration panel of `PAGViewer` target in CLion, and then fill in the local QT DLL library path in the `Environment Variables` row. For example: `PATH=C:\Qt\Qt5.13.0\5.13.0\msvc2017_64\bin`. +- Follow the build guide in [README.md](./../README.md) to install the necessary VS2019 modules and ensure the CLion ToolChain is set to Visual Studio with **amd64** architecture. +- Open the `qt` folder in CLion, then open the `qt/QTCMAKE.cfg` file and update the QT path to your local QT installation path. For example: `C:/Qt/Qt5.13.0/5.13.0/msvc2017_64/lib/cmake`. +- In CLion, open the configuration panel for the `PAGViewer` target and set the local QT DLL library path in the `Environment Variables` field. For example: `PATH=C:\Qt\Qt5.13.0\5.13.0\msvc2017_64\bin`. - Finally, build and run the `PAGViewer` target. diff --git a/src/platform/web/PAGWasmBindings.cpp b/src/platform/web/PAGWasmBindings.cpp index 4fcb431eec..a24fc2a732 100644 --- a/src/platform/web/PAGWasmBindings.cpp +++ b/src/platform/web/PAGWasmBindings.cpp @@ -31,6 +31,26 @@ using namespace emscripten; namespace pag { + +std::unique_ptr CopyDataFromUint8Array(const val& emscriptenData) { + if (!emscriptenData.as()) { + return nullptr; + } + auto length = emscriptenData["length"].as(); + if (length == 0) { + return nullptr; + } + auto buffer = ByteData::Make(length); + if (!buffer) { + return nullptr; + } + auto memory = val::module_property("HEAPU8")["buffer"]; + auto memoryView = + val::global("Uint8Array").new_(memory, reinterpret_cast(buffer->data()), length); + memoryView.call("set", emscriptenData); + return buffer; +} + bool PAGBindInit() { class_("_PAGLayer") .smart_ptr>("_PAGLayer") @@ -215,8 +235,13 @@ bool PAGBindInit() { class_>("_PAGFile") .smart_ptr>("_PAGFile") .class_function("_MaxSupportedTagLevel", PAGFile::MaxSupportedTagLevel) - .class_function("_Load", optional_override([](uintptr_t bytes, size_t length) { - return PAGFile::Load(reinterpret_cast(bytes), length); + .class_function("_Load", + optional_override([](const val& emscriptenData) -> std::shared_ptr { + auto data = CopyDataFromUint8Array(emscriptenData); + if (data == nullptr) { + return nullptr; + } + return PAGFile::Load(data->data(), data->length()); })) .function("_tagLevel", &PAGFile::tagLevel) .function("_numTexts", &PAGFile::numTexts) @@ -274,30 +299,55 @@ bool PAGBindInit() { .function("_updateSize", &PAGSurface::updateSize) .function("_clearAll", &PAGSurface::clearAll) .function("_freeCache", &PAGSurface::freeCache) - .function("_readPixels", - optional_override([](PAGSurface& pagSurface, int colorType, int alphaType, - uintptr_t dstPixels, size_t dstRowBytes) { - return pagSurface.readPixels(static_cast(colorType), - static_cast(alphaType), - reinterpret_cast(dstPixels), dstRowBytes); + .function("_readPixels", optional_override([](PAGSurface& pagSurface, int colorType, + int alphaType, size_t dstRowBytes) -> val { + auto dataSize = dstRowBytes * pagSurface.height(); + if (dataSize == 0) { + return val::null(); + } + std::unique_ptr uint8Array(new (std::nothrow) uint8_t[dataSize]); + if (uint8Array && pagSurface.readPixels(static_cast(colorType), + static_cast(alphaType), + uint8Array.get(), dstRowBytes)) { + auto memory = val::module_property("HEAPU8")["buffer"]; + auto memoryView = + val::global("Uint8Array") + .new_(memory, reinterpret_cast(uint8Array.get()), dataSize); + auto newArrayBuffer = val::global("ArrayBuffer").new_(dataSize); + auto newUint8Array = val::global("Uint8Array").new_(newArrayBuffer); + newUint8Array.call("set", memoryView); + return newUint8Array; + } + return val::null(); })); class_("_PAGImage") .smart_ptr>("_PAGImage") - .class_function("_FromBytes", optional_override([](uintptr_t bytes, size_t length) { - return PAGImage::FromBytes(reinterpret_cast(bytes), length); + .class_function("_FromBytes", + optional_override([](const val& emscriptenData) -> std::shared_ptr { + auto data = CopyDataFromUint8Array(emscriptenData); + if (data == nullptr) { + return nullptr; + } + return PAGImage::FromBytes(reinterpret_cast(data->data()), + data->length()); })) .class_function("_FromNativeImage", optional_override([](val nativeImage) { auto image = tgfx::Image::MakeFrom(nativeImage); return std::static_pointer_cast(StillImage::MakeFrom(image)); })) - .class_function("_FromPixels", - optional_override([](uintptr_t pixels, int width, int height, size_t rowBytes, - int colorType, int alphaType) { - return PAGImage::FromPixels(reinterpret_cast(pixels), width, height, - rowBytes, static_cast(colorType), - static_cast(alphaType)); - })) + .class_function( + "_FromPixels", + optional_override([](const val& pixels, int width, int height, size_t rowBytes, + int colorType, int alphaType) -> std::shared_ptr { + auto data = CopyDataFromUint8Array(pixels); + if (data == nullptr) { + return nullptr; + } + return PAGImage::FromPixels(reinterpret_cast(data->data()), width, height, + rowBytes, static_cast(colorType), + static_cast(alphaType)); + })) .class_function("_FromTexture", optional_override([](int textureID, int width, int height, bool flipY) { GLTextureInfo glInfo = {}; diff --git a/test/baseline/version.json b/test/baseline/version.json index 7f4deb04a0..731f38159e 100644 --- a/test/baseline/version.json +++ b/test/baseline/version.json @@ -4859,10 +4859,10 @@ "0010": "b434229f", "0011": "2925cbf0", "0012": "b434229f", - "0013": "2925cbf0", + "0013": "5ad579ad", "0014": "b434229f", "0015": "b434229f", - "0016": "b434229f", + "0016": "5ad579ad", "0017": "b434229f", "0018": "b434229f", "0019": "b434229f", @@ -4873,10 +4873,10 @@ "0024": "b434229f", "0025": "b434229f", "0026": "b434229f", - "0027": "b434229f", - "0028": "2925cbf0", - "0029": "2925cbf0", - "0030": "2925cbf0", + "0027": "5ad579ad", + "0028": "b434229f", + "0029": "5ad579ad", + "0030": "b434229f", "0031": "b434229f", "0032": "b434229f", "0033": "b434229f", @@ -8451,7 +8451,7 @@ "NormalEmoji": "2925cbf0", "PositionAnimator": "b434229f", "RangeSelectorTriangleHighLow": "5c3b8bc5", - "SmallFontSizeScale": "2925cbf0", + "SmallFontSizeScale": "5ad579ad", "SmallFontSizeScale_LowResolution": "b434229f", "TextLayerScaleAnimationWithMipmap": "3bd38676", "TextPathBox": "7f7435d6f", diff --git a/web/README.md b/web/README.md index a3e3969b63..5357baf858 100644 --- a/web/README.md +++ b/web/README.md @@ -4,29 +4,30 @@ ## Introduction -libpag is a real-time rendering library for PAG (Portable Animated Graphics) files that renders both -vector-based and raster-based animations across most platforms, such as iOS, Android, macOS, -Windows, Linux, and Web. +libpag is a real-time rendering library for PAG (Portable Animated Graphics) files. It supports +rendering both vector-based and raster-based animations on various platforms, including iOS, Android, +macOS, Windows, Linux, OpenHarmony, and Web. ## Features -PAG Web SDK is built on WebAssembly and WebGL which supports all of the PAG features. +The PAG Web SDK is built using WebAssembly and WebGL, supporting all PAG features. ## Quick start -PAG Web SDK consists of two files: `libpag.js` and `libpag.wasm`. +The PAG Web SDK includes two files: `libpag.js` and `libpag.wasm`. ### Browser (Recommend) -Use ``` -You can browse the files of the NPM package at the public CDN [cdn.jsdelivr.net/npm/libpag/](https://cdn.jsdelivr.net/npm/libpag/) , and you can use the keyword `@lastest` to get the lastest version. +You can browse the files of the NPM package on the public CDN at [cdn.jsdelivr.net/npm/libpag/](https://cdn.jsdelivr.net/npm/libpag/). +You can also use the keyword `@latest` to get the latest version. The PAG library is also available on other public CDNs that sync with NPM, such as [unpkg](https://unpkg.com/libpag@latest/lib/libpag.min.js). @@ -53,7 +54,8 @@ The PAG library is also available on other public CDNs that sync with NPM, such ``` -You can use the `locateFile` function to get the path of `libpag.wasm` file. By default, the `libpag.wasm` file is located next to the `libpag.js` file. For example: +You can use the `locateFile` function to specify the path of the `libpag.wasm` file. By default, +the `libpag.wasm` file is located next to the `libpag.js` file. For example: ```js const PAG = await window.libpag.PAGInit({ @@ -83,11 +85,16 @@ PAGInit().then((PAG) => { }); ``` -**Note: If you are using ESModule to import PAG Web SDK, you must pack the `libpag.wasm` file manually into the final web program, because the common packing tools usually ignore the wasm file. Then use the `locateFile` function to get the path of the `libpag.wasm` . You also need to upload the `libpag.wasm` file to a server so that users can load it from network.** +**Note: If you are using ESModule to import the PAG Web SDK, you need to manually include the `libpag.wasm` +file in your final web program, as common packing tools usually ignore it. Use the `locateFile` +function to specify the path of the `libpag.wasm` file. Additionally, you need to upload the +`libpag.wasm` file to a server so users can load it from the network.** -There are many kinds of products in the npm package after building. You could read the [doc](./doc/develop-install.md) to know about them. +The npm package includes various products after building. You can read the [documentation](./doc/develop-install.md) +to learn more about them. -There is also a [repository](https://github.com/libpag/pag-web) that contains some demos about using PAG Web SDK with HTML / Vue / React / PixiJS. +There is also a [repository](https://github.com/libpag/pag-web) with demos on using the PAG Web SDK +with HTML, Vue, React, and PixiJS. You can find the API documentation [here](https://pag.io/docs/apis-web.html). @@ -97,19 +104,15 @@ You can find the API documentation [here](https://pag.io/docs/apis-web.html). | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------- | | Chrome >= 69 | Safari >= 11.3 | Android >= 7.0 | iOS >= 11.3 | last 2 versions | -More compatible versions are coming soon. - -## Roadmap - -Please visit [here](https://github.com/Tencent/libpag/wiki/PAG-Web-roadmap) to see the roadmap of the PAG Web SDK. ## Development -First, make sure you have installed all the tools and dependencies listed in the [README.md](../README.md#Development) located in the project root directory. +First, ensure you have installed all the tools and dependencies listed in the [README.md](../README.md#Development) +located in the project root directory. ### Dependency Management -Then run the following command to install required node modules: +Next, run the following command to install the required Node modules: ```bash $ npm install @@ -124,22 +127,25 @@ Execute `build.sh debug` to get `libpag.wasm` file. $ npm run build:debug ``` -Start TypeScript compiler watcher (Optional). +Start the TypeScript compiler watcher (optional). ```bash # ./web $ npm run dev ``` -Start HTTP server. +Start the HTTP server. ```bash # ./ $ npm run server ``` -Use Chrome to open `http://localhost:8081/demo/index.html` to see the demo. -If you need to debug, you can install [C/C++ DevTools Support (DWARF)](https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb), and open Chrome DevTools > Settings > Experiments > Check the "WebAssembly Debugging: Enable DWARF support" option to enable SourceMap support. Now you can debug C++ files in Chrome DevTools. +Open Chrome and go to `http://localhost:8081/demo/index.html` to see the demo. + +To debug, install [C/C++ DevTools Support (DWARF)](https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb). +Then, open Chrome DevTools, go to Settings, Experiments, and check the "WebAssembly Debugging: Enable +DWARF support" option to enable SourceMap support. Now you can debug C++ files in Chrome DevTools. ### Build (Release) @@ -150,7 +156,7 @@ $ npm run build ### Build with CLion -Create a new build target in CLion, and use the following **CMake options**（find them under **CLion** > **Preferences** > **Build, Execution, Deployment** > **CMake**） +Create a new build target in CLion and use the following **CMake options** (found under **CLion** > **Preferences** > **Build, Execution, Deployment** > **CMake**): ``` -DCMAKE_TOOLCHAIN_FILE=path/to/emscripten/emscripten/version/cmake/Modules/Platform/Emscripten.cmake @@ -158,19 +164,19 @@ Create a new build target in CLion, and use the following **CMake options**（fi ### Test -Build release version +Build the release version ```bash $ npm run build ``` -Start test HTTP server. +Start the HTTP server. ```bash $ npm run server ``` -Start cypress test. +Start the cypress test. ```bash $ npm run test diff --git a/web/README.zh_CN.md b/web/README.zh_CN.md index 9e36e00c20..6036244c44 100644 --- a/web/README.zh_CN.md +++ b/web/README.zh_CN.md @@ -5,11 +5,11 @@ ## 介绍 libpag 是 PAG (Portable Animated Graphics) 动效文件的渲染 SDK，目前已覆盖几乎所有的主流平台，包括：iOS, Android, macOS, -Windows, Linux, 以及 Web 端。 +Windows, Linux, OpenHarmony 以及 Web 端。 ## 特性 -- Web 平台能力适配，支持 libpag 全能力 +- Web 平台能力适配，支持 libpag 全功能 - 基于 WebAssembly + WebGL ## 快速开始 @@ -97,8 +97,6 @@ Demo 项目提 [pag-web](https://github.com/libpag/pag-web) 供了简单的接 | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------- | | Chrome >= 69 | Safari >= 11.3 | Android >= 7.0 | iOS >= 11.3 | last 2 versions | -更多版本的兼容工作正在进行中 - **以上的兼容表仅代表可以运行的兼容性。对于有移动端接入需要的用户，需要阅读一下这篇[兼容性情况](./doc/compatibility.md)的文章** ## 使用指南 @@ -158,10 +156,6 @@ PAG 默认会对 Canvas 在屏幕中的可视尺寸进行缩放计算后进行 可以下载 [PAGViewer](https://pag.io/docs/install.html) 打开 PAG 文件，点击"视图"->"显示 编辑面板"，在编辑面板中我们能看到 Video 的数量，当 Video数量大于 0 时，即为 PAG 动画文件中存在 BMP 预合成。 -## Roadmap - -Web SDK 未来能力支持规划可以点击 [这里](https://github.com/Tencent/libpag/wiki/PAG-Web-roadmap) 查看 - ## 参与开发 ### 前置工作 diff --git a/web/src/pag-file.ts b/web/src/pag-file.ts index 2b6c8d8b0a..5c26247cbe 100644 --- a/web/src/pag-file.ts +++ b/web/src/pag-file.ts @@ -6,7 +6,6 @@ import { getLayerTypeName, layer2typeLayer, proxyVector } from './utils/type-uti import type { PAGImage } from './pag-image'; import { LayerType, PAGTimeStretchMode, TextDocument } from './types'; -import { writeBufferToWasm } from '@tgfx/utils/buffer'; @destroyVerify @wasmAwaitRewind @@ -28,9 +27,8 @@ export class PAGFile extends PAGComposition { */ public static loadFromBuffer(buffer: ArrayBuffer) { if (!buffer || !(buffer.byteLength > 0)) throw new Error('Initialize PAGFile data not be empty!'); - const { byteOffset, length, free } = writeBufferToWasm(PAGModule, buffer); - const wasmIns = PAGModule._PAGFile._Load(byteOffset, length); - free(); + const uint8Buffer = new Uint8Array(buffer); + const wasmIns = PAGModule._PAGFile._Load(uint8Buffer); if (!wasmIns) throw new Error('Load PAGFile fail!'); const pagFile = new PAGFile(wasmIns); return pagFile; diff --git a/web/src/pag-image.ts b/web/src/pag-image.ts index cf44bb6193..45812f2b7f 100644 --- a/web/src/pag-image.ts +++ b/web/src/pag-image.ts @@ -2,7 +2,6 @@ import { AlphaType, ColorType, PAGScaleMode } from './types'; import { wasmAwaitRewind, wasmAsyncMethod, destroyVerify } from './utils/decorators'; import { PAGModule } from './pag-module'; import { Matrix } from './core/matrix'; -import { writeBufferToWasm } from '@tgfx/utils/buffer'; @destroyVerify @wasmAwaitRewind @@ -49,9 +48,7 @@ export class PAGImage { alphaType: AlphaType, ): PAGImage { const rowBytes = width * (colorType === ColorType.ALPHA_8 ? 1 : 4); - const { byteOffset, free } = writeBufferToWasm(PAGModule, pixels); - const wasmIns = PAGModule._PAGImage._FromPixels(byteOffset, width, height, rowBytes, colorType, alphaType); - free(); + const wasmIns = PAGModule._PAGImage._FromPixels(pixels, width, height, rowBytes, colorType, alphaType); if (!wasmIns) throw new Error('Make PAGImage from pixels fail!'); return new PAGImage(wasmIns); } diff --git a/web/src/pag-surface.ts b/web/src/pag-surface.ts index a66c9f8b64..e7a51d57df 100644 --- a/web/src/pag-surface.ts +++ b/web/src/pag-surface.ts @@ -1,6 +1,5 @@ import { PAGModule } from './pag-module'; import { AlphaType, ColorType } from './types'; -import { readBufferFromWasm } from '@tgfx/utils/buffer'; import { destroyVerify, wasmAwaitRewind } from './utils/decorators'; @destroyVerify @@ -74,14 +73,8 @@ export class PAGSurface { */ public readPixels(colorType: ColorType, alphaType: AlphaType): Uint8Array | null { if (colorType === ColorType.Unknown) return null; - const rowBytes = this.width() * (colorType === ColorType.ALPHA_8 ? 1 : 4); - const length = rowBytes * this.height(); - const dataUint8Array = new Uint8Array(length); - const { data, free } = readBufferFromWasm(PAGModule, dataUint8Array, (dataPtr) => { - return this.wasmIns._readPixels(colorType, alphaType, dataPtr, rowBytes) as boolean; - }); - free(); - return data; + const rowBytes = this.wasmIns._width() * (colorType === ColorType.ALPHA_8 ? 1 : 4); + return this.wasmIns._readPixels(colorType, alphaType, rowBytes); } public destroy(): void { diff --git a/web/src/types.ts b/web/src/types.ts index c6c79120b7..9a57110c1a 100644 --- a/web/src/types.ts +++ b/web/src/types.ts @@ -31,13 +31,13 @@ declare global { export interface PAG extends EmscriptenModule { _PAGFile: { - _Load: (bytes: number, length: number) => any; + _Load: (buffer: Uint8Array) => any; _MaxSupportedTagLevel: () => number; }; _PAGImage: { _FromNativeImage: (source: TexImageSource | ArrayBufferImage) => any; _FromPixels: ( - pixels: number, + pixels: Uint8Array, width: number, height: number, rowBytes: number, diff --git a/win/Win32Demo/WinPAGDemo.vcxproj b/win/Win32Demo/WinPAGDemo.vcxproj index 4a1c9bf4cc..de285179c5 100644 --- a/win/Win32Demo/WinPAGDemo.vcxproj +++ b/win/Win32Demo/WinPAGDemo.vcxproj @@ -108,6 +108,7 @@ cd "$(SolutionDir).." call npm install -g depsync --silent call depsync +set CMAKE_MSVC_PATH=$(VCInstallDir) node .\build_pag -a x86 -DPAG_BUILD_SHARED=OFF @@ -142,6 +143,7 @@ node .\build_pag -a x86 -DPAG_BUILD_SHARED=OFF cd "$(SolutionDir).." call npm install -g depsync --silent call depsync +set CMAKE_MSVC_PATH=$(VCInstallDir) node .\build_pag -a x86 -DPAG_BUILD_SHARED=OFF @@ -166,6 +168,7 @@ node .\build_pag -a x86 -DPAG_BUILD_SHARED=OFF cd "$(SolutionDir).." call npm install -g depsync --silent call depsync +set CMAKE_MSVC_PATH=$(VCInstallDir) node .\build_pag -a x64 -DPAG_BUILD_SHARED=OFF @@ -207,6 +210,7 @@ node .\build_pag -a x64 -DPAG_BUILD_SHARED=OFF cd "$(SolutionDir).." call npm install -g depsync --silent call depsync +set CMAKE_MSVC_PATH=$(VCInstallDir) node .\build_pag -a x64 -DPAG_BUILD_SHARED=OFF