@hxa-rn/react-native-gcanvas 6.0.24-beta.1 → 6.0.25
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/CHANGELOG.md +2 -2
- package/README.md +207 -207
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,207 +1,207 @@
|
|
|
1
|
-
# react-native-gcanvas
|
|
2
|
-
|
|
3
|
-
本项目基于 [@flyskywhy/react-native-gcanvas](https://github.com/flyskywhy/react-native-gcanvas)开发。如果在使用过程中有任何问题，欢迎在AtomGit提交Issue，会及时跟进。
|
|
4
|
-
|
|
5
|
-
## 项目介绍
|
|
6
|
-
|
|
7
|
-
`@hxa-rn/react-native-gcanvas` 是 `@flyskywhy/react-native-gcanvas@6.0.24` 的鸿蒙适配包，提供基于 C++ GCanvas（OpenGL ES）引擎的 Canvas 2D / WebGL 原生视图。业务侧通过 `harmony.alias` 继续 `import ... from '@flyskywhy/react-native-gcanvas'`。
|
|
8
|
-
|
|
9
|
-
本包含原生实现：C++ TurboModule `GCanvasModule`（20 个方法）+ Fabric 组件 `GCanvasView`（XComponent SURFACE + EGL）。JS 层复用上游命令字符串桥，鸿蒙侧补齐 `texImage2D` / `texSubImage2D`、`registerFont` / `getFontNames` 与远程图片下载。
|
|
10
|
-
|
|
11
|
-
当前版本：`6.0.
|
|
12
|
-
|
|
13
|
-
## 集成指南
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install @hxa-rn/react-native-gcanvas
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
本包声明：
|
|
20
|
-
|
|
21
|
-
```json
|
|
22
|
-
{
|
|
23
|
-
"name": "@hxa-rn/react-native-gcanvas",
|
|
24
|
-
"version": "6.0.
|
|
25
|
-
"peerDependencies": {
|
|
26
|
-
"react-native": ">=0.72"
|
|
27
|
-
},
|
|
28
|
-
"harmony": {
|
|
29
|
-
"alias": "@flyskywhy/react-native-gcanvas"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
工程按 `harmony.alias` 解析后，业务代码仍从原包名导入：
|
|
35
|
-
|
|
36
|
-
```ts
|
|
37
|
-
import {GCanvasView, GImage, createCanvas, getFontNames, registerFont} from '@flyskywhy/react-native-gcanvas';
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
`peerDependencies` 为 `react-native` >= 0.72。本模块含 C++ TurboModule 与 Fabric 组件。Autolinking 可用时跳过手动注册；手动接入时需同时注册 C++ `GcanvasPackage` 与 ETS `GcanvasPackage`，并把 `harmony/gcanvas.har` 加入 entry 依赖。
|
|
41
|
-
|
|
42
|
-
## 使用说明
|
|
43
|
-
|
|
44
|
-
```tsx
|
|
45
|
-
import React from 'react';
|
|
46
|
-
import {StyleSheet, View} from 'react-native';
|
|
47
|
-
import {GCanvasView} from '@flyskywhy/react-native-gcanvas';
|
|
48
|
-
|
|
49
|
-
export default function App() {
|
|
50
|
-
return (
|
|
51
|
-
<View style={styles.container}>
|
|
52
|
-
<GCanvasView
|
|
53
|
-
style={styles.canvas}
|
|
54
|
-
onCanvasCreate={(canvas) => {
|
|
55
|
-
const ctx = canvas.getContext('2d');
|
|
56
|
-
ctx.fillStyle = '#FF5722';
|
|
57
|
-
ctx.fillRect(10, 10, 100, 100);
|
|
58
|
-
ctx.font = '24px';
|
|
59
|
-
ctx.fillStyle = '#222222';
|
|
60
|
-
ctx.fillText('Hello GCanvas', 10, 160);
|
|
61
|
-
}}
|
|
62
|
-
onIsReady={(value) => {
|
|
63
|
-
console.log('canvas ready:', value);
|
|
64
|
-
}}
|
|
65
|
-
/>
|
|
66
|
-
</View>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
const styles = StyleSheet.create({
|
|
71
|
-
container: {flex: 1},
|
|
72
|
-
canvas: {width: 300, height: 200},
|
|
73
|
-
});
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
`onCanvasCreate` 拿到 canvas 后即可 `getContext('2d'|'webgl')`。`toDataURL` 同步返回 `data:image/png;base64,...`。`registerFont(src, fontFace?)` 在鸿蒙已开通，随后可用 `getFontNames()` 查看枚举结果。加载远程图片时须在 `module.json5` 声明 `ohos.permission.INTERNET`。
|
|
77
|
-
|
|
78
|
-
## 接口文档
|
|
79
|
-
|
|
80
|
-
### 导出
|
|
81
|
-
|
|
82
|
-
| 名称 | 类型 | 说明 |
|
|
83
|
-
|------|------|------|
|
|
84
|
-
| `GCanvasView` | React 组件 | Canvas 2D / WebGL 原生视图 |
|
|
85
|
-
| `GImage` | 类 | 图片对象，走 `preLoadImage` |
|
|
86
|
-
| `createCanvas(width, height)` | 函数 | 创建离屏 Canvas |
|
|
87
|
-
| `getFontNames()` | 函数 | 返回系统可用字体名数组 |
|
|
88
|
-
| `registerFont(src, fontFace?)` | 函数 | 注册自定义字体（鸿蒙已开通） |
|
|
89
|
-
|
|
90
|
-
### `<GCanvasView>` Props / 事件
|
|
91
|
-
|
|
92
|
-
| 名称 | 类型 | 说明 |
|
|
93
|
-
|------|------|------|
|
|
94
|
-
| `isGestureResponsible` | boolean | 是否响应画布内手势，默认 `true` |
|
|
95
|
-
| `isAutoClearRectBeforePutImageData` | boolean | `putImageData` 前是否先 clear，仅 2D |
|
|
96
|
-
| `isResetGlViewportAfterSetWidthOrHeight` | boolean | 宽高变化后是否重置 viewport |
|
|
97
|
-
| `devicePixelRatio` | number | 未传时使用 `PixelRatio.get()` |
|
|
98
|
-
| `offscreenCanvas` | boolean | 是否可作为 `document.createElement('canvas')` 离屏画布 |
|
|
99
|
-
| `disableAutoSwap` | boolean | 关闭 WebGL 自动 swap |
|
|
100
|
-
| `onCanvasCreate` | `(canvas) => void` | 画布对象就绪 |
|
|
101
|
-
| `onCanvasResize` | `({width, height, canvas}) => void` | 视图尺寸变化 |
|
|
102
|
-
| `onIsReady` | `(value) => void` | GL surface 就绪 / 销毁 |
|
|
103
|
-
| `onMouseDown` / `onMouseMove` / `onMouseUp` | `(e) => void` | 触摸转 PointerEvent |
|
|
104
|
-
|
|
105
|
-
### Canvas / 上下文
|
|
106
|
-
|
|
107
|
-
| API | 说明 |
|
|
108
|
-
|-----|------|
|
|
109
|
-
| `canvas.getContext('2d' \| 'webgl')` | 取得 2D 或 WebGL 上下文 |
|
|
110
|
-
| `canvas.toDataURL(mimeType, quality)` | 同步导出 Base64 |
|
|
111
|
-
| `canvas.reset()` | 调用原生 `resetComponent` |
|
|
112
|
-
| 2D：`fillRect` / `strokeRect` / `clearRect` / `fill` / `stroke` / `arc` | 矩形与路径 |
|
|
113
|
-
| 2D：`fillText` / `strokeText` / `measureText` | 文本 |
|
|
114
|
-
| 2D：`createLinearGradient` / `createRadialGradient` / `createPattern` | 渐变与图案 |
|
|
115
|
-
| 2D：`scale` / `rotate` / `translate` / `save` / `restore` | 变换 |
|
|
116
|
-
| 2D：`drawImage` / `getImageData` / `putImageData` | 图片与像素 |
|
|
117
|
-
| WebGL：`createShader` / `compileShader` / `texImage2D` / `drawArrays` 等 | WebGL 1.0 |
|
|
118
|
-
|
|
119
|
-
### TurboModule `GCanvasModule`（经 JS 桥内部调用）
|
|
120
|
-
|
|
121
|
-
| 方法 | 同步 | 说明 |
|
|
122
|
-
|------|------|------|
|
|
123
|
-
| `enable` / `disable` / `resetComponent` | 混合同步 | 画布生命周期 |
|
|
124
|
-
| `extendCallNative` | 同步 | 命令字符串执行并返回结果 |
|
|
125
|
-
| `render` | 异步 | 命令字符串投递后立即返回 |
|
|
126
|
-
| `setContextType` / `setDevicePixelRatio` / `resetGlViewport` | 同步 | 上下文与视口 |
|
|
127
|
-
| `toDataURL` | 同步 | `glReadPixels` → PNG → base64 |
|
|
128
|
-
| `preLoadImage` / `bindImageTexture` | 异步 | 图片解码与纹理绑定 |
|
|
129
|
-
| `texImage2D` / `texSubImage2D` | 同步 | WebGL 纹理上传 |
|
|
130
|
-
| `getFontNames` / `addFontFamily` / `setExtraFontLocation` | 同步 | 字体 |
|
|
131
|
-
| `setAlpha` | 异步 | 空壳，对齐 Android/iOS，不产生实际透明度 |
|
|
132
|
-
|
|
133
|
-
## 快速验证（运行 Example）
|
|
134
|
-
|
|
135
|
-
### 前置条件
|
|
136
|
-
|
|
137
|
-
| 依赖 | 版本要求 |
|
|
138
|
-
|------|----------|
|
|
139
|
-
| Node.js | >= 18 |
|
|
140
|
-
| DevEco Studio | 5.0+ / 6.0+ |
|
|
141
|
-
| HarmonyOS SDK | API 12+ |
|
|
142
|
-
|
|
143
|
-
### 运行步骤
|
|
144
|
-
|
|
145
|
-
**1. 克隆仓库**
|
|
146
|
-
|
|
147
|
-
```bash
|
|
148
|
-
git clone https://gitcode.com/hxa-rn/react-native-gcanvas.git
|
|
149
|
-
cd react-native-gcanvas
|
|
150
|
-
git checkout br_rnoh0.72
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
**2. 安装仓库开发依赖**
|
|
154
|
-
|
|
155
|
-
```bash
|
|
156
|
-
npm install --legacy-peer-deps
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
Example 已改为从 npm 公仓安装 `@hxa-rn/react-native-gcanvas@6.0.
|
|
160
|
-
|
|
161
|
-
**3. 进入 example 目录，安装依赖**
|
|
162
|
-
|
|
163
|
-
```bash
|
|
164
|
-
cd example
|
|
165
|
-
npm install --legacy-peer-deps
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
**4. 生成 JS Bundle**
|
|
169
|
-
|
|
170
|
-
```bash
|
|
171
|
-
npm run dev
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
产物：`harmony/entry/src/main/resources/rawfile/bundle.harmony.js`
|
|
175
|
-
|
|
176
|
-
**5. 用 DevEco Studio 打开鸿蒙工程**
|
|
177
|
-
|
|
178
|
-
- 打开 DevEco Studio
|
|
179
|
-
- 选择 `example/harmony` 目录
|
|
180
|
-
- 等待 Sync 完成
|
|
181
|
-
|
|
182
|
-
**6. 编译并运行 HAP**
|
|
183
|
-
|
|
184
|
-
在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。
|
|
185
|
-
|
|
186
|
-
> **注意**：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。
|
|
187
|
-
|
|
188
|
-
## 约束与限制
|
|
189
|
-
|
|
190
|
-
- **兼容性**：Demo `compatibleSdkVersion` 为 `5.0.1(13)`；`react-native` >= 0.72；RNOH 0.72+；HarmonyOS API 12+（适配构建环境为 API 13）。
|
|
191
|
-
- **权限**：加载远程 `http(s)` 图片时需在应用 `module.json5` 声明 `ohos.permission.INTERNET`。库模块本身无额外系统权限。
|
|
192
|
-
- **远程图片**：鸿蒙 `image.createImageSource` 不接受 http URL，须先经 `@ohos.net.http` 下载。
|
|
193
|
-
- **`setAlpha`**：空实现，对齐 Android/iOS 原空壳语义。
|
|
194
|
-
- **`getImageData` / `measureText`**：走 `execWithoutDisplay`，读完后需再绘制才能上屏。
|
|
195
|
-
- **真机渲染**：2D / WebGL 实际画面、字形与远程图片效果需在设备上确认。
|
|
196
|
-
|
|
197
|
-
## 开源license
|
|
198
|
-
|
|
199
|
-
本项目基于 MIT 协议，详见 [LICENSE](./LICENSE) 文件。
|
|
200
|
-
|
|
201
|
-
## 问题反馈渠道
|
|
202
|
-
|
|
203
|
-
欢迎在 AtomGit 提交 Issue。也可在 GitCode 仓库反馈：
|
|
204
|
-
|
|
205
|
-
https://gitcode.com/hxa-rn/react-native-gcanvas
|
|
206
|
-
|
|
207
|
-
https://gitcode.com/hxa-rn/react-native-gcanvas/issues
|
|
1
|
+
# react-native-gcanvas
|
|
2
|
+
|
|
3
|
+
本项目基于 [@flyskywhy/react-native-gcanvas](https://github.com/flyskywhy/react-native-gcanvas)开发。如果在使用过程中有任何问题，欢迎在AtomGit提交Issue，会及时跟进。
|
|
4
|
+
|
|
5
|
+
## 项目介绍
|
|
6
|
+
|
|
7
|
+
`@hxa-rn/react-native-gcanvas` 是 `@flyskywhy/react-native-gcanvas@6.0.24` 的鸿蒙适配包，提供基于 C++ GCanvas（OpenGL ES）引擎的 Canvas 2D / WebGL 原生视图。业务侧通过 `harmony.alias` 继续 `import ... from '@flyskywhy/react-native-gcanvas'`。
|
|
8
|
+
|
|
9
|
+
本包含原生实现：C++ TurboModule `GCanvasModule`（20 个方法）+ Fabric 组件 `GCanvasView`（XComponent SURFACE + EGL）。JS 层复用上游命令字符串桥，鸿蒙侧补齐 `texImage2D` / `texSubImage2D`、`registerFont` / `getFontNames` 与远程图片下载。
|
|
10
|
+
|
|
11
|
+
当前版本：`6.0.25`。
|
|
12
|
+
|
|
13
|
+
## 集成指南
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @hxa-rn/react-native-gcanvas
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
本包声明：
|
|
20
|
+
|
|
21
|
+
```json
|
|
22
|
+
{
|
|
23
|
+
"name": "@hxa-rn/react-native-gcanvas",
|
|
24
|
+
"version": "6.0.25",
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"react-native": ">=0.72"
|
|
27
|
+
},
|
|
28
|
+
"harmony": {
|
|
29
|
+
"alias": "@flyskywhy/react-native-gcanvas"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
工程按 `harmony.alias` 解析后，业务代码仍从原包名导入：
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import {GCanvasView, GImage, createCanvas, getFontNames, registerFont} from '@flyskywhy/react-native-gcanvas';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
`peerDependencies` 为 `react-native` >= 0.72。本模块含 C++ TurboModule 与 Fabric 组件。Autolinking 可用时跳过手动注册；手动接入时需同时注册 C++ `GcanvasPackage` 与 ETS `GcanvasPackage`，并把 `harmony/gcanvas.har` 加入 entry 依赖。
|
|
41
|
+
|
|
42
|
+
## 使用说明
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import React from 'react';
|
|
46
|
+
import {StyleSheet, View} from 'react-native';
|
|
47
|
+
import {GCanvasView} from '@flyskywhy/react-native-gcanvas';
|
|
48
|
+
|
|
49
|
+
export default function App() {
|
|
50
|
+
return (
|
|
51
|
+
<View style={styles.container}>
|
|
52
|
+
<GCanvasView
|
|
53
|
+
style={styles.canvas}
|
|
54
|
+
onCanvasCreate={(canvas) => {
|
|
55
|
+
const ctx = canvas.getContext('2d');
|
|
56
|
+
ctx.fillStyle = '#FF5722';
|
|
57
|
+
ctx.fillRect(10, 10, 100, 100);
|
|
58
|
+
ctx.font = '24px';
|
|
59
|
+
ctx.fillStyle = '#222222';
|
|
60
|
+
ctx.fillText('Hello GCanvas', 10, 160);
|
|
61
|
+
}}
|
|
62
|
+
onIsReady={(value) => {
|
|
63
|
+
console.log('canvas ready:', value);
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
</View>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const styles = StyleSheet.create({
|
|
71
|
+
container: {flex: 1},
|
|
72
|
+
canvas: {width: 300, height: 200},
|
|
73
|
+
});
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
`onCanvasCreate` 拿到 canvas 后即可 `getContext('2d'|'webgl')`。`toDataURL` 同步返回 `data:image/png;base64,...`。`registerFont(src, fontFace?)` 在鸿蒙已开通，随后可用 `getFontNames()` 查看枚举结果。加载远程图片时须在 `module.json5` 声明 `ohos.permission.INTERNET`。
|
|
77
|
+
|
|
78
|
+
## 接口文档
|
|
79
|
+
|
|
80
|
+
### 导出
|
|
81
|
+
|
|
82
|
+
| 名称 | 类型 | 说明 |
|
|
83
|
+
|------|------|------|
|
|
84
|
+
| `GCanvasView` | React 组件 | Canvas 2D / WebGL 原生视图 |
|
|
85
|
+
| `GImage` | 类 | 图片对象，走 `preLoadImage` |
|
|
86
|
+
| `createCanvas(width, height)` | 函数 | 创建离屏 Canvas |
|
|
87
|
+
| `getFontNames()` | 函数 | 返回系统可用字体名数组 |
|
|
88
|
+
| `registerFont(src, fontFace?)` | 函数 | 注册自定义字体（鸿蒙已开通） |
|
|
89
|
+
|
|
90
|
+
### `<GCanvasView>` Props / 事件
|
|
91
|
+
|
|
92
|
+
| 名称 | 类型 | 说明 |
|
|
93
|
+
|------|------|------|
|
|
94
|
+
| `isGestureResponsible` | boolean | 是否响应画布内手势，默认 `true` |
|
|
95
|
+
| `isAutoClearRectBeforePutImageData` | boolean | `putImageData` 前是否先 clear，仅 2D |
|
|
96
|
+
| `isResetGlViewportAfterSetWidthOrHeight` | boolean | 宽高变化后是否重置 viewport |
|
|
97
|
+
| `devicePixelRatio` | number | 未传时使用 `PixelRatio.get()` |
|
|
98
|
+
| `offscreenCanvas` | boolean | 是否可作为 `document.createElement('canvas')` 离屏画布 |
|
|
99
|
+
| `disableAutoSwap` | boolean | 关闭 WebGL 自动 swap |
|
|
100
|
+
| `onCanvasCreate` | `(canvas) => void` | 画布对象就绪 |
|
|
101
|
+
| `onCanvasResize` | `({width, height, canvas}) => void` | 视图尺寸变化 |
|
|
102
|
+
| `onIsReady` | `(value) => void` | GL surface 就绪 / 销毁 |
|
|
103
|
+
| `onMouseDown` / `onMouseMove` / `onMouseUp` | `(e) => void` | 触摸转 PointerEvent |
|
|
104
|
+
|
|
105
|
+
### Canvas / 上下文
|
|
106
|
+
|
|
107
|
+
| API | 说明 |
|
|
108
|
+
|-----|------|
|
|
109
|
+
| `canvas.getContext('2d' \| 'webgl')` | 取得 2D 或 WebGL 上下文 |
|
|
110
|
+
| `canvas.toDataURL(mimeType, quality)` | 同步导出 Base64 |
|
|
111
|
+
| `canvas.reset()` | 调用原生 `resetComponent` |
|
|
112
|
+
| 2D：`fillRect` / `strokeRect` / `clearRect` / `fill` / `stroke` / `arc` | 矩形与路径 |
|
|
113
|
+
| 2D：`fillText` / `strokeText` / `measureText` | 文本 |
|
|
114
|
+
| 2D：`createLinearGradient` / `createRadialGradient` / `createPattern` | 渐变与图案 |
|
|
115
|
+
| 2D：`scale` / `rotate` / `translate` / `save` / `restore` | 变换 |
|
|
116
|
+
| 2D：`drawImage` / `getImageData` / `putImageData` | 图片与像素 |
|
|
117
|
+
| WebGL：`createShader` / `compileShader` / `texImage2D` / `drawArrays` 等 | WebGL 1.0 |
|
|
118
|
+
|
|
119
|
+
### TurboModule `GCanvasModule`（经 JS 桥内部调用）
|
|
120
|
+
|
|
121
|
+
| 方法 | 同步 | 说明 |
|
|
122
|
+
|------|------|------|
|
|
123
|
+
| `enable` / `disable` / `resetComponent` | 混合同步 | 画布生命周期 |
|
|
124
|
+
| `extendCallNative` | 同步 | 命令字符串执行并返回结果 |
|
|
125
|
+
| `render` | 异步 | 命令字符串投递后立即返回 |
|
|
126
|
+
| `setContextType` / `setDevicePixelRatio` / `resetGlViewport` | 同步 | 上下文与视口 |
|
|
127
|
+
| `toDataURL` | 同步 | `glReadPixels` → PNG → base64 |
|
|
128
|
+
| `preLoadImage` / `bindImageTexture` | 异步 | 图片解码与纹理绑定 |
|
|
129
|
+
| `texImage2D` / `texSubImage2D` | 同步 | WebGL 纹理上传 |
|
|
130
|
+
| `getFontNames` / `addFontFamily` / `setExtraFontLocation` | 同步 | 字体 |
|
|
131
|
+
| `setAlpha` | 异步 | 空壳，对齐 Android/iOS，不产生实际透明度 |
|
|
132
|
+
|
|
133
|
+
## 快速验证（运行 Example）
|
|
134
|
+
|
|
135
|
+
### 前置条件
|
|
136
|
+
|
|
137
|
+
| 依赖 | 版本要求 |
|
|
138
|
+
|------|----------|
|
|
139
|
+
| Node.js | >= 18 |
|
|
140
|
+
| DevEco Studio | 5.0+ / 6.0+ |
|
|
141
|
+
| HarmonyOS SDK | API 12+ |
|
|
142
|
+
|
|
143
|
+
### 运行步骤
|
|
144
|
+
|
|
145
|
+
**1. 克隆仓库**
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
git clone https://gitcode.com/hxa-rn/react-native-gcanvas.git
|
|
149
|
+
cd react-native-gcanvas
|
|
150
|
+
git checkout br_rnoh0.72
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
**2. 安装仓库开发依赖**
|
|
154
|
+
|
|
155
|
+
```bash
|
|
156
|
+
npm install --legacy-peer-deps
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
Example 已改为从 npm 公仓安装 `@hxa-rn/react-native-gcanvas@6.0.25`，不再使用本地 `file:../xxx.tgz`，运行 Example 不必再执行 `npm pack`。
|
|
160
|
+
|
|
161
|
+
**3. 进入 example 目录，安装依赖**
|
|
162
|
+
|
|
163
|
+
```bash
|
|
164
|
+
cd example
|
|
165
|
+
npm install --legacy-peer-deps
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
**4. 生成 JS Bundle**
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
npm run dev
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
产物：`harmony/entry/src/main/resources/rawfile/bundle.harmony.js`
|
|
175
|
+
|
|
176
|
+
**5. 用 DevEco Studio 打开鸿蒙工程**
|
|
177
|
+
|
|
178
|
+
- 打开 DevEco Studio
|
|
179
|
+
- 选择 `example/harmony` 目录
|
|
180
|
+
- 等待 Sync 完成
|
|
181
|
+
|
|
182
|
+
**6. 编译并运行 HAP**
|
|
183
|
+
|
|
184
|
+
在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。
|
|
185
|
+
|
|
186
|
+
> **注意**：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。
|
|
187
|
+
|
|
188
|
+
## 约束与限制
|
|
189
|
+
|
|
190
|
+
- **兼容性**：Demo `compatibleSdkVersion` 为 `5.0.1(13)`；`react-native` >= 0.72；RNOH 0.72+；HarmonyOS API 12+（适配构建环境为 API 13）。
|
|
191
|
+
- **权限**：加载远程 `http(s)` 图片时需在应用 `module.json5` 声明 `ohos.permission.INTERNET`。库模块本身无额外系统权限。
|
|
192
|
+
- **远程图片**：鸿蒙 `image.createImageSource` 不接受 http URL，须先经 `@ohos.net.http` 下载。
|
|
193
|
+
- **`setAlpha`**：空实现，对齐 Android/iOS 原空壳语义。
|
|
194
|
+
- **`getImageData` / `measureText`**：走 `execWithoutDisplay`，读完后需再绘制才能上屏。
|
|
195
|
+
- **真机渲染**：2D / WebGL 实际画面、字形与远程图片效果需在设备上确认。
|
|
196
|
+
|
|
197
|
+
## 开源license
|
|
198
|
+
|
|
199
|
+
本项目基于 MIT 协议，详见 [LICENSE](./LICENSE) 文件。
|
|
200
|
+
|
|
201
|
+
## 问题反馈渠道
|
|
202
|
+
|
|
203
|
+
欢迎在 AtomGit 提交 Issue。也可在 GitCode 仓库反馈：
|
|
204
|
+
|
|
205
|
+
https://gitcode.com/hxa-rn/react-native-gcanvas
|
|
206
|
+
|
|
207
|
+
https://gitcode.com/hxa-rn/react-native-gcanvas/issues
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hxa-rn/react-native-gcanvas",
|
|
3
3
|
"displayName": "@hxa-rn/react-native-gcanvas",
|
|
4
|
-
"version": "6.0.
|
|
4
|
+
"version": "6.0.25",
|
|
5
5
|
"description": "A C++ native canvas 2D/WebGL component based on gpu opengl glsl shader GCanvas",
|
|
6
6
|
"main": "./src/index.js",
|
|
7
7
|
"module": "./src/index.js",
|