V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
wurunpu
V2EX  ›  问与答

问一个可视化前端需求?麻烦大佬棒棒

  •  
  •   wurunpu · 2021-02-07 17:39:00 +08:00 · 1258 次点击
    这是一个创建于 1418 天前的主题,其中的信息可能已经有所发展或是发生改变。
    就是可以从左侧拖入一个画布,画布可缩放,元素可以拖拽,可以编辑。能记录位置;下次加载可以保存;
    感觉原生的话 div 好像对位置 还有缩放,实现起来挺难维护的,因为可能有很多可编辑的元素;
    canvas 的话感觉编辑文本好像不太好实现,
    已经知道 G6,X6,go.js 可以实现,问问可以还有其他方式吗?都不限 就是提供个思路;
    谢谢各位
    8 条回复    2021-02-08 16:31:02 +08:00
    superrichman
        1
    superrichman  
       2021-02-07 17:55:00 +08:00 via iPhone
    drawio
    idlewater
        2
    idlewater  
       2021-02-07 18:16:41 +08:00   ❤️ 1
    可视化前端我实现过两个,都是开源的。第一个是疫情期间,在家无事做的,演示地址: https://vular.cn/rxeditor/
    代码地址: https://github.com/rxwater/rxeditor
    在用户体验方面,这个项目有点高不成,低不就。开发人员不愿用,非开发人员不会用,现在也不维护了。不过这个应该不是题主关注的,题主关注的是技术实现。具体技术是这样的:
    1 、内核使用纯 js 实现,可以解析纯粹的 HTML,把 HTML 转化成一个虚拟节点树处理。
    2 、壳子 Vue 实现

    第二个是现在正在做的,基于 React 的一个可视化低代码项目,演示地址: https://dragit.vercel.app/login
    代码地址: https://github.com/rxwater/dragit

    这个可视化部分使用的是 React,可以拖放 React 组件。内部也是吧 React 组件组织成一虚拟节点树来处理。
    你先看看,有问题可以随时问我。
    bojue
        3
    bojue  
       2021-02-07 18:26:19 +08:00
    可以选择 DOM:

    (ng8) https://github.com/bojue/Web-Editor

    (vue) https://github.com/bojue/BaseMap

    也可以 dom +canvas 结合使用,文本使用 div,渲染过程转换成 canvas
    wurunpu
        4
    wurunpu  
    OP
       2021-02-08 09:14:46 +08:00
    @idlewater 好的 我看看
    wurunpu
        5
    wurunpu  
    OP
       2021-02-08 09:14:59 +08:00
    @superrichman ok 我康康
    wurunpu
        6
    wurunpu  
    OP
       2021-02-08 09:15:34 +08:00
    @bojue 好的 感谢
    wurunpu
        7
    wurunpu  
    OP
       2021-02-08 10:16:37 +08:00
    @idlewater 第二个项目一直在转圈圈 控制套输出 error 。
    idlewater
        8
    idlewater  
       2021-02-08 16:31:02 +08:00
    @wurunpu 是 moc 系统吧?手边没有 moc,没在上面跑过,不知哪里出了问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2794 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:19 · PVG 08:19 · LAX 16:19 · JFK 19:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.