外包: React SVG 图形编辑模块

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 515 天前的主题，其中的信息可能已经有所发展或是发生改变。

画布中可以放入的组件（ image/iframe ）其的开发 /注册,不要求那些矢量编辑（矩形 / 线条）画布元素的移动 /缩放 /旋转 /删除历史记录（本地，数据管理持久化？）/ 撤销回退右键菜单 /快捷键 ; 里面主要的功能实现：剪贴 /复制 /粘贴 /层级移动

上面是基础的纯编辑器功能，用函数组件配合 hooks 、数据管理来实现。

因为有组件元素是 iframe ,目前的倾向是 JS Dom SVG 编辑

有能力接的感兴趣的加绿色软件详聊: amFuZ3lvbmdjaGVu (base64)

svg

组件

画布

iframe

9 条回复 • 2023-06-28 21:18:33 +08:00

AsZr

2023-06-28 07:51:45 +08:00

我看一些方案是用 fabric.js 来做 canvas 编辑器，这个不太了解，不知道它画布上能不能放 iframe

poppub

2023-06-28 09:03:55 +08:00

svg 可以用 foreignobject 引入 iframe 。canvas 我记得不行，得想别的办法

DrugsZ

2023-06-28 09:44:21 +08:00

@AsZr #1 我现在在公司做的是以 React 驱动 DOM 进行渲染的，现在在搞一个纯 Canvas 渲染的项目。从这两块来讲我应该算是有经验的？我不知道你这边用 iframe 是用来实现什么功能，如果是聚合类似的功能，那么最好不要用 iframe 而是纯粹通过数据的组织来进行处理，因为通过渲染层来提供复杂的高阶功能会不可避免带来一些逻辑处理的混乱，比如 iframe 下一个组件的位置宽高信息到底应该信任内存中的还是 iframe 中期望的。

DrugsZ

2023-06-28 09:45:52 +08:00

@AsZr #1 上述两个项目都是图形编辑器哈。好像漏了

AsZr

2023-06-28 10:58:10 +08:00 via iPhone

@poppub
@DrugsZ
是的我们有个最基础 react 驱动 dom svg 编辑在跑。iframe 是必须的，我们现在就是 svg 大容器里面 iframe 组件引入就是用 foreignobject 包裹一层 😂 因为一些特定的业务原因一定要用 iframe ，你看我们都不用矢量图这些。

AsZr

2023-06-28 11:00:25 +08:00 via iPhone

@DrugsZ 有意向的可以加微信详聊，上面微信联系人是负责外包事务沟通的

R1hu6Hs2sSN8pkVX

2023-06-28 14:30:49 +08:00

聊了几分钟，技术负责人讲不清需求，兄弟们避坑

AsZr

2023-06-28 14:47:53 +08:00

@whatFoxSay #7 hhh 生活愉快

AsZr

2023-06-28 21:18:33 +08:00 via iPhone

已有合适人选

外包: React SVG 图形编辑 模块

外包: React SVG 图形编辑模块