sketch - 绘图工具

实现像写 RN 一样完成 canvas 2d 绘图

安装

使用npm安装

npm install @sketchjs/react

使用yarn安装

yarn add @sketchjs/react

使用pnpm安装

pnpm add @sketchjs/react

H5 使用sketch实现Canvas 2d 绘图

import React, {useEffect} from 'react';
import {SketchHandler, StyleSheet, Sketch} from '@sketchjs/react'
import logo from './logo.png';
import './App.css';

const style = StyleSheet.create({
    root: {
        width: 500,
        height: 500,
    },
    rootView: {
        width: 500,
        height: 500,
        justifyContent: 'center',
        alignItems: 'center'
    },
    logo: {
        width: 200,
        height: 200
    },
    text: {
        width: 500,
        marginTop: 20,
        color: '#ffffff',
        fontSize: 50,
        fontWeight: 400,
        lineHeight: 50,
        textAlign: 'center'
    }
})

function App() {

    const sketchRef = React.useRef<SketchHandler>(null)

    const canvasRef = React.useRef<HTMLCanvasElement>(null)

    const handleSketchReady = () => {
        console.log('sketch ready')
        sketchRef.current?.render()?.then(() => console.log('rendered'))
    }

    useEffect(() => {
        const canvas = canvasRef.current
        const ctx = canvas?.getContext('2d')
        if (!canvas || !ctx) return
        sketchRef.current?.init(canvas, ctx)
    }, []);

    return (
        <div className="App">
            <canvas className="sketch-canvas" ref={canvasRef}/>
            <Sketch.Root style={style.root} ref={sketchRef}  onSketchReady={handleSketchReady}>
                <Sketch.View style={style.rootView}>
                    <Sketch.Image src={logo} style={style.logo}/>
                    <Sketch.Text text="Hello  World!" style={style.text}/>
                </Sketch.View>
            </Sketch.Root>
        </div>
    );
}

export default App;

Taro 小程序使用sketch实现Canvas 2d 绘图

由于yoga-layout使用了WebAssembly，所以在小程序中无法正确引入。

待办事项

• 核心依赖yoga-layout
• web端 example 完善
• 小程序实现yoga-layout的正确引入（目前由于yoga-layout使用了WebAssembly，所以在小程序中无法正确引入）
• README.md 完善
• 单元测试