Canvas UI 是一个运行在 HTML Canvas 上的通用 UI 渲染器。https://alibaba.github.io/canvas-ui/
他提供了一系列 React 组件，允许开发者利用已有知识快速构建基于 Canvas 的应用。
同时也具备类似 DOM 的场景树，开发者可以像操作 DOM 一样操作 Canvas 中绘制的元素。
import React from 'react'
import { Canvas, Text, Flex } from '@canvas-ui/react'
export default () => {
const containerStyle = {
width: 250,
flexDirection: 'column'
}
const textStyle = {
maxWidth: containerStyle.width,
maxLines: 1,
}
return (
<div style={{ height: '100px' }}>
<Canvas>
<Flex style={ containerStyle }>
<Text style={ textStyle }>我能吞下玻璃而不伤身体。</Text>
<Text style={ textStyle }>私はガラスを食べられます。それは私を傷つけません。</Text>
<Text style={ textStyle }>The quick brown fox jumps over the lazy dog.</Text>
</Flex>
</Canvas>
</div>
)
}https://alibaba.github.io/canvas-ui/examples/task
-
像 DOM 一样操作在 Canvas 里的元素
-
支持 React，无缝接入 ReactDOM 渲染的应用
-
支持 Flex 布局
-
支持基本的文本排版能力：自动换行，对齐，文本溢出等属性
-
支持通过 style 属性写入 CSS 样式
-
支持交互事件：PointerEvents 和 WheelEvent
-
便利的分层能力
-
完全使用 TypeScript 编写，类型完备
-
在 WebWorker 中渲染 (WIP)
-
packages/core 渲染器的核心，提供了诸如 createElement，事件，渲染管线等能力。
-
packages/react Canvas UI 的官方 React 绑定，提供
<View /><Text />等组件 -
packages/examples 基于 Storybook 的组件开发和测试环境
-
tools/ 一些脚本
# 启动 core 和 react 的开发模式
$ yarn dev
# 启动 Storybook
$ yarn dev:examples
# 运行单元测试
$ yarn test
# 构建 umd, esm 版本
$ yarn build
# 打版本
$ yarn lerna version
# 发布
$ sh ./tools/publish.sh