18.0.17 • Published 8 months ago
@liangshen/react-canvas v18.0.17
@liangshen/react-canvas
使用React的方式来编写Canvas, 运行环境只需要支持Canvas即可, 不再需要完整的浏览器的Dom Bom环境.
环境
node v16+
安装
如下俩种方式
- 建议使用create-react-app的方式构建应用,命令如下
npx create-react-app my-app --template @liangshen/react-canvas
- 也可以在已有项目中进行安装, 使用 @liangshen/react-canvas 替换 react-dom 库来做渲染。
npm i @liangshen/react-canvas -S
使用方法
index.tsx
import React from "react";
import ReactCanvas from "@liangshen/react-canvas";
import App from "./App";
// 如果是浏览器环境 获取到index.html中的Canvas对象, 或者在这里创建一个Canvas
const canvas = document.getElementsByTagName('canvas')[0];
ReactCanvas.render(canvas,
<React.StrictMode>
<App />
</React.StrictMode>
);
html中添加一个Canvas元素, 或者在js中动态创建一个Canvas
index.html
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="800" height="400"></canvas>
</body>
</html>
App.tsx
import {Text} from '@liangshen/react-canvas';
export const App = () => <>
<Text value={'测试一下'}></Text>
</>
@liangshen/react-canvas 提供的一些组件
- Text 文本
- Image 图片类似html中的
img
- View 类似html中的
div
- ScrollView 类似html中可滚动的
div
打包
如果使用了Layout插件的方式, 执行
npm run build:lib:layout-plugin
使用到了minigame-canvas-engine做为Canvas的渲染库, 还是特别感谢下作者🙏
18.0.17
8 months ago
18.0.16
8 months ago
18.0.15
8 months ago
18.0.14
8 months ago
18.0.13
9 months ago
18.0.12
9 months ago
18.0.11
9 months ago
18.0.10
9 months ago
18.0.9
9 months ago
18.0.8
9 months ago
18.0.7
9 months ago
18.0.6
9 months ago
18.0.5
9 months ago
18.0.4
9 months ago
18.0.3
9 months ago
18.0.2
9 months ago
18.0.1
9 months ago
0.1.7
9 months ago
0.1.6
9 months ago
0.1.5
9 months ago
0.1.4
9 months ago
0.1.3
9 months ago
0.1.2
9 months ago
0.1.1
9 months ago
0.1.0
9 months ago