使用织物.js.
streamlit-drawable-canvas的Python项目详细描述
流线型-可绘制画布
Streamlit组件，它使用Fabric.js提供草图画布。在
特点
- 在画布上自由绘制线条、圆圈和方框，并提供笔划和填充选项
- 根据需要旋转、倾斜、缩放、移动画布上的任何对象
- 选择要绘制的背景色或图像
- 获取图像数据和每个绘制的对象属性返回Streamlit！在
- 选择通过按钮实时或按需取回数据
- 撤消、重做或删除画布
安装
pip install streamlit-drawable-canvas
示例用法
^{pr2}$发展
安装
- JS侧
cd frontend
npm install
- Python面
conda create -n streamlit-drawable-canvas python=3.7 conda activate streamlit-drawable-canvas pip install -e .
运行
webpack dev server和Streamlit应该同时运行。在
- JS侧
cd frontend
npm run start
- Python面
streamlit run app.py
赛普拉斯积分测试
- 安装Cypress:
cd e2e; npm i或npx install cypress（如果缓存有问题，使用--force） - 启动Streamlit前端服务器：
cd streamlit_drawable_canvas/frontend; npm run start - 启动Streamlit测试脚本：
streamlit run e2e/app_to_test.py - 启动Cypress应用程序：
cd e2e; npm run cypress:open
参考文献
- react-sketch
- React hooks - fabric
- Simulate Retina display
- High DPI Canvas
- Drawing with FabricJS and TypeScript Part 2: Straight Lines
- Drawing with FabricJS and TypeScript Part 7: Undo/Redo
- Types for classes as values in TypeScript
- Working with iframes in Cypress
- How to use useReducer in React Hooks for performance optimization
- Understanding React Default Props
- How to avoid passing callbacks down?
- Examples of the useReducer Hook
useRef钩子允许您创建对DOM节点或任何值的持久引用。React将在重新呈现之间（在调用组件函数之间）保留此值。在 - CSS filter generator to convert from black to target hex color
- When does React re-render components?
- Immutable Update Patterns
- 图标由Freepik，Google，Mavadee。在
- 项目
标签：
欢迎加入QQ群-->： 979659372
