开发实时图形编辑器

Posted 2021-04-29

我需要在我的Flash网络应用程序中嵌入一个矢量图形编辑器。图形编辑器应该能够执行以下操作：

• 画线（画笔工具）
• 抹去
• 比例绘图
• 创建文本块
• 使用图像作为绘图的背景（上传图像并将其用作背景）。

用户所做的更改应发送给其他活动客户端。我正在努力寻找以下问题的答案。

1. 如何画一条线？我的意思是：用户将鼠标移到屏幕上（用鼠标左键按下），我该如何处理MOUSE_MOVE事件？请注意，绘制后的用户可以进行缩放绘图。
2. 如何实施擦除？请注意，我无法实现擦除作为绘制白线（因为我可以有背景）。
3. 存放牵引的最佳方法是什么？序列化一组命令？
4. 最后，如何通知其他客户有关变化的信息？

将不胜感激任何关于如何创建类似于描述的图形编辑器的文章或教程（无论在什么平台或编程语言）。

请不要害羞:)任何想法都非常感谢！

答案

我会尝试回答一些问题，因为我从未做过所有这些问题。

1. 取决于该工具，最简单的实现是仅绘制直线的铅笔工具。更复杂的工具，比如应该跟随你可以移动的锚点的铅笔实际上并没有那么不同，实际上很简单，因为你需要简单地使用你从用户那里收到的锚点参数。最复杂的工具是刷子，因为它在画布上任意移动。您需要为矢量形状实现“联合”操作。这并不容易，需要一些数学才能找到交叉点。必须有专门的文献来描述如何做到这一点。您需要创建较小的形状，以离散的间隔采样鼠标指针的位置，然后将它们“结合”在一起。
2. 擦除与上述刷子工具非常相似。
3. 我会写SWF格式，最坏的情况 - SVG。 SWF的优点是可以在同一程序/环境中轻松使用图纸。 SVG的优点是即使Flash不可用也可以使用它。

也许一个好的起点可能是调查Inkscape源（可能是最流行的开源矢量图形编辑器）。坦白说......这是一个有缺陷/不稳定的程序，但至少其中一些应该有效。

另一答案

这听起来很难。这种项目起初看起来很简单，但实际上与真正的矢量编辑器相比，它实际上非常复杂。

我会尝试找到一个现有的嵌入库而不是自己编写。我尝试了一些搜索，但在Flash中找不到功能矢量编辑器。另一方面，有很多html5 / javascript，如svg-edit。也许你可以找到一种方法来启动Javascript编辑器并将结果汇​​集回Flash？