impro5 / studio

The studio of iDraw.js (iDraw.js的画图编辑器)

@idraw/studio

idraw.js.org/studio/

@idraw/studio Preview

You can click idraw.js.org/studio/ to experience it.

The preview of @idraw/studo.

Usage

npm install @idraw/studio;

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { Studio } from '@idraw/studio';
import '@idraw/studio/dist/css/index.css'

const App = () => { 
  const [width, setWidth] = useState<number>(window.innerWidth);
  const [height, setHeight] = useState<number>(window.innerHeight);
  useEffect(() => {
    window.addEventListener('resize', () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    });
  }, []); 

  return (
    <Studio
      width={width}
      height={height} 
      data={data}
      defaultScaleInfo={{ 
        scale: 1,
        offsetX: 0,
        offsetY: 0
      }}
    />
  );
};

const root = createRoot(document.querySelector('#app'));
root.render(<App />);

Development

git clone [e-mail]:idrawjs/studio.git

cd studio

pnpm install

npm run dev