libpag 4.4.35 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -27
- package/README.zh_CN.md +2 -8
- package/lib/libpag.cjs.js +769 -610
- package/lib/libpag.cjs.js.map +1 -1
- package/lib/libpag.esm.js +769 -610
- package/lib/libpag.esm.js.map +1 -1
- package/lib/libpag.min.js +1 -1
- package/lib/libpag.min.js.map +1 -1
- package/lib/libpag.umd.js +769 -610
- package/lib/libpag.umd.js.map +1 -1
- package/lib/libpag.wasm +0 -0
- package/lib/libpag.worker.cjs.js +1 -1
- package/lib/libpag.worker.esm.js +1 -1
- package/lib/libpag.worker.js +1 -1
- package/lib/libpag.worker.min.js +1 -1
- package/lib/libpag.worker.min.js.map +1 -1
- package/package.json +4 -4
- package/src/.pag.wasm.md5 +1 -1
- package/src/pag-file.ts +2 -4
- package/src/pag-image.ts +1 -4
- package/src/pag-layer.ts +4 -2
- package/src/pag-surface.ts +2 -9
- package/src/types.ts +2 -2
- package/src/wasm/libpag.js +7 -8
- package/src/wasm/libpag.wasm +0 -0
- package/src/wechat/pag-view.ts +7 -0
- package/types/third_party/tgfx/web/src/core/scaler-context.d.ts +2 -0
- package/types/third_party/tgfx/web/src/tgfx.d.ts +2 -10
- package/types/web/src/pag-layer.d.ts +4 -2
- package/types/web/src/types.d.ts +2 -2
- package/LICENSE.txt +0 -1589
- package/types/third_party/tgfx/web/src/utils/buffer.d.ts +0 -10
package/README.md
CHANGED
|
@@ -4,29 +4,30 @@
|
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
7
|
-
libpag is a real-time rendering library for PAG (Portable Animated Graphics) files
|
|
8
|
-
vector-based and raster-based animations
|
|
9
|
-
Windows, Linux, and Web.
|
|
7
|
+
libpag is a real-time rendering library for PAG (Portable Animated Graphics) files. It supports
|
|
8
|
+
rendering both vector-based and raster-based animations on various platforms, including iOS, Android,
|
|
9
|
+
macOS, Windows, Linux, OpenHarmony, and Web.
|
|
10
10
|
|
|
11
11
|
## Features
|
|
12
12
|
|
|
13
|
-
PAG Web SDK is built
|
|
13
|
+
The PAG Web SDK is built using WebAssembly and WebGL, supporting all PAG features.
|
|
14
14
|
|
|
15
15
|
## Quick start
|
|
16
16
|
|
|
17
|
-
PAG Web SDK
|
|
17
|
+
The PAG Web SDK includes two files: `libpag.js` and `libpag.wasm`.
|
|
18
18
|
|
|
19
19
|
### Browser (Recommend)
|
|
20
20
|
|
|
21
|
-
Use
|
|
21
|
+
Use the `<script>` tag to include the library directly. The `libpag` object will be registered as a global variable.
|
|
22
22
|
|
|
23
|
-
For production use, we recommend
|
|
23
|
+
For production use, we recommend specifying a version number for `libpag` to avoid unexpected issues from newer versions:
|
|
24
24
|
|
|
25
25
|
```html
|
|
26
26
|
<script src="https://cdn.jsdelivr.net/npm/libpag@4.1.8/lib/libpag.min.js"></script>
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
You can browse the files of the NPM package
|
|
29
|
+
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/).
|
|
30
|
+
You can also use the keyword `@latest` to get the latest version.
|
|
30
31
|
|
|
31
32
|
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).
|
|
32
33
|
|
|
@@ -53,7 +54,8 @@ The PAG library is also available on other public CDNs that sync with NPM, such
|
|
|
53
54
|
</script>
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
You can use the `locateFile` function to
|
|
57
|
+
You can use the `locateFile` function to specify the path of the `libpag.wasm` file. By default,
|
|
58
|
+
the `libpag.wasm` file is located next to the `libpag.js` file. For example:
|
|
57
59
|
|
|
58
60
|
```js
|
|
59
61
|
const PAG = await window.libpag.PAGInit({
|
|
@@ -83,11 +85,16 @@ PAGInit().then((PAG) => {
|
|
|
83
85
|
});
|
|
84
86
|
```
|
|
85
87
|
|
|
86
|
-
**Note: If you are using ESModule to import PAG Web SDK, you
|
|
88
|
+
**Note: If you are using ESModule to import the PAG Web SDK, you need to manually include the `libpag.wasm`
|
|
89
|
+
file in your final web program, as common packing tools usually ignore it. Use the `locateFile`
|
|
90
|
+
function to specify the path of the `libpag.wasm` file. Additionally, you need to upload the
|
|
91
|
+
`libpag.wasm` file to a server so users can load it from the network.**
|
|
87
92
|
|
|
88
|
-
|
|
93
|
+
The npm package includes various products after building. You can read the [documentation](./doc/develop-install.md)
|
|
94
|
+
to learn more about them.
|
|
89
95
|
|
|
90
|
-
There is also a [repository](https://github.com/libpag/pag-web)
|
|
96
|
+
There is also a [repository](https://github.com/libpag/pag-web) with demos on using the PAG Web SDK
|
|
97
|
+
with HTML, Vue, React, and PixiJS.
|
|
91
98
|
|
|
92
99
|
You can find the API documentation [here](https://pag.io/docs/apis-web.html).
|
|
93
100
|
|
|
@@ -97,19 +104,15 @@ You can find the API documentation [here](https://pag.io/docs/apis-web.html).
|
|
|
97
104
|
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------- |
|
|
98
105
|
| Chrome >= 69 | Safari >= 11.3 | Android >= 7.0 | iOS >= 11.3 | last 2 versions |
|
|
99
106
|
|
|
100
|
-
More compatible versions are coming soon.
|
|
101
|
-
|
|
102
|
-
## Roadmap
|
|
103
|
-
|
|
104
|
-
Please visit [here](https://github.com/Tencent/libpag/wiki/PAG-Web-roadmap) to see the roadmap of the PAG Web SDK.
|
|
105
107
|
|
|
106
108
|
## Development
|
|
107
109
|
|
|
108
|
-
First,
|
|
110
|
+
First, ensure you have installed all the tools and dependencies listed in the [README.md](../README.md#Development)
|
|
111
|
+
located in the project root directory.
|
|
109
112
|
|
|
110
113
|
### Dependency Management
|
|
111
114
|
|
|
112
|
-
|
|
115
|
+
Next, run the following command to install the required Node modules:
|
|
113
116
|
|
|
114
117
|
```bash
|
|
115
118
|
$ npm install
|
|
@@ -124,22 +127,25 @@ Execute `build.sh debug` to get `libpag.wasm` file.
|
|
|
124
127
|
$ npm run build:debug
|
|
125
128
|
```
|
|
126
129
|
|
|
127
|
-
Start TypeScript compiler watcher (
|
|
130
|
+
Start the TypeScript compiler watcher (optional).
|
|
128
131
|
|
|
129
132
|
```bash
|
|
130
133
|
# ./web
|
|
131
134
|
$ npm run dev
|
|
132
135
|
```
|
|
133
136
|
|
|
134
|
-
Start HTTP server.
|
|
137
|
+
Start the HTTP server.
|
|
135
138
|
|
|
136
139
|
```bash
|
|
137
140
|
# ./
|
|
138
141
|
$ npm run server
|
|
139
142
|
```
|
|
140
|
-
Use Chrome to open `http://localhost:8081/demo/index.html` to see the demo.
|
|
141
143
|
|
|
142
|
-
|
|
144
|
+
Open Chrome and go to `http://localhost:8081/demo/index.html` to see the demo.
|
|
145
|
+
|
|
146
|
+
To debug, install [C/C++ DevTools Support (DWARF)](https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb).
|
|
147
|
+
Then, open Chrome DevTools, go to Settings, Experiments, and check the "WebAssembly Debugging: Enable
|
|
148
|
+
DWARF support" option to enable SourceMap support. Now you can debug C++ files in Chrome DevTools.
|
|
143
149
|
|
|
144
150
|
### Build (Release)
|
|
145
151
|
|
|
@@ -150,7 +156,7 @@ $ npm run build
|
|
|
150
156
|
|
|
151
157
|
### Build with CLion
|
|
152
158
|
|
|
153
|
-
Create a new build target in CLion
|
|
159
|
+
Create a new build target in CLion and use the following **CMake options** (found under **CLion** > **Preferences** > **Build, Execution, Deployment** > **CMake**):
|
|
154
160
|
|
|
155
161
|
```
|
|
156
162
|
-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
|
|
|
158
164
|
|
|
159
165
|
### Test
|
|
160
166
|
|
|
161
|
-
Build release version
|
|
167
|
+
Build the release version
|
|
162
168
|
|
|
163
169
|
```bash
|
|
164
170
|
$ npm run build
|
|
165
171
|
```
|
|
166
172
|
|
|
167
|
-
Start
|
|
173
|
+
Start the HTTP server.
|
|
168
174
|
|
|
169
175
|
```bash
|
|
170
176
|
$ npm run server
|
|
171
177
|
```
|
|
172
178
|
|
|
173
|
-
Start cypress test.
|
|
179
|
+
Start the cypress test.
|
|
174
180
|
|
|
175
181
|
```bash
|
|
176
182
|
$ npm run test
|
package/README.zh_CN.md
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
## 介绍
|
|
6
6
|
|
|
7
7
|
libpag 是 PAG (Portable Animated Graphics) 动效文件的渲染 SDK,目前已覆盖几乎所有的主流平台,包括:iOS, Android, macOS,
|
|
8
|
-
Windows, Linux, 以及 Web 端。
|
|
8
|
+
Windows, Linux, OpenHarmony 以及 Web 端。
|
|
9
9
|
|
|
10
10
|
## 特性
|
|
11
11
|
|
|
12
|
-
- Web 平台能力适配,支持 libpag
|
|
12
|
+
- Web 平台能力适配,支持 libpag 全功能
|
|
13
13
|
- 基于 WebAssembly + WebGL
|
|
14
14
|
|
|
15
15
|
## 快速开始
|
|
@@ -97,8 +97,6 @@ Demo 项目提 [pag-web](https://github.com/libpag/pag-web) 供了简单的接
|
|
|
97
97
|
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------- |
|
|
98
98
|
| Chrome >= 69 | Safari >= 11.3 | Android >= 7.0 | iOS >= 11.3 | last 2 versions |
|
|
99
99
|
|
|
100
|
-
更多版本的兼容工作正在进行中
|
|
101
|
-
|
|
102
100
|
**以上的兼容表仅代表可以运行的兼容性。对于有移动端接入需要的用户,需要阅读一下这篇[兼容性情况](./doc/compatibility.md)的文章**
|
|
103
101
|
|
|
104
102
|
## 使用指南
|
|
@@ -158,10 +156,6 @@ PAG 默认会对 Canvas 在屏幕中的可视尺寸进行缩放计算后进行
|
|
|
158
156
|
|
|
159
157
|
可以下载 [PAGViewer](https://pag.io/docs/install.html) 打开 PAG 文件,点击"视图"->"显示 编辑面板",在编辑面板中我们能看到 Video 的数量,当 Video数量大于 0 时,即为 PAG 动画文件中存在 BMP 预合成。
|
|
160
158
|
|
|
161
|
-
## Roadmap
|
|
162
|
-
|
|
163
|
-
Web SDK 未来能力支持规划可以点击 [这里](https://github.com/Tencent/libpag/wiki/PAG-Web-roadmap) 查看
|
|
164
|
-
|
|
165
159
|
## 参与开发
|
|
166
160
|
|
|
167
161
|
### 前置工作
|