基于 fabric.js 和 React 开发的图形编辑器,用于制作您自己的类似画布设计编辑器的 JS 框架
订阅我们 💖是支持我们最大的动力 |
- 📝 开箱即用 - 简单的配置即可获得功能齐全的图像编辑器
- 🧑💻 自定义样式 - 高度自定义扩展,可个性化为自己喜爱的样式
- 🎨 设计资源 - 10万+优质模板、创意素材随心选
- 📤 多种格式导出 - 导出PDF、PNG、JPG、JSON等多种格式
- 🛠 高可扩展 - 所有对画布的工具组件都可自定义扩展,高度个性化定制,匹配各种场景
- 🤹 结合AI - 结合各种AI能力,来提效编辑器功能的创新型,提高生产效率
安装 Node.js >=18 并运行以下命令:
npm install zhihui-editor
初始化演示应用程序(基于 React 框架):
// css导入
import 'zhihui-editor/lib/zhihui-editor.min.css';
import { WorkspaceWrap, ZhihuiEditorContainer, SidePanelWrap } from 'zhihui-editor';
import { createStore } from 'zhihui-editor/lib/model/store';
import { SidePanel } from 'zhihui-editor/lib/side-panel';
import { Workspace } from 'zhihui-editor/lib/canvas/workspace';
import { Toolbar } from 'zhihui-editor/lib/toolbar/toolbar';
import { ZoomButtons } from 'zhihui-editor/lib/toolbar/zoomButtons';
// 设置语言的方法
import { setTranslations } from 'zhihui-editor/lib/config';
// 默认提供两种语言包
import en_US from 'zhihui-editor/lib/locale/enUS';
import zh_CN from 'zhihui-editor/lib/locale/zhCN';
// 控制工程的辅助工具
import { createProject } from 'zhihui-editor/lib/project';
function App() {
const store = createStore({});
const project = createProject({ store });
const init = async () => {
// 加载字体资源库
await project.getGlobalFont();
// 加载模板
project.firstLoad();
};
useEffect(() => {
init();
}, []);
return (
<div style={{ width: '100vw', height: '100vh' }}>
<ZhihuiEditorContainer>
<SidePanelWrap>
<SidePanel store={store} />
</SidePanelWrap>
<WorkspaceWrap>
<Toolbar store={store} />
<Workspace store={store} />
<ZoomButtons store={store} />
</WorkspaceWrap>
</ZhihuiEditorContainer>
</div>
);
}
- React - 用于渲染用户界面 (UI) 的 JavaScript 库
- Rollup - 用于 JavaScript 的模块打包工具
- Tailwind CSS - 是一个功能类优先的 CSS 框架,它提供了一套预先定义的类,提供了构建组件的原子类
- Fabric.js - 是一个强大而简单的Javascript HTML5画布库
- IconPack - 图标库
- Mobx - 状态管理库
Licensed under the MIT License.