moj*_*000 7 javascript canvas fabricjs
我最近开始使用Fabric.js进行项目,这很棒.它为画布提供了一个抽象层,并且每个对象都有一个完整的"对象操作层/掩码".
我想更进一步,利用它来制作实际的图表,以及对象之间的连接,以及每个对象附带的更多"元数据".有人已经这样做了吗？Fabric.js是正确的选择吗？
有关如何在两个对象之间创建"连接器"对象的任何想法,这两个对象响应来自它们所附着的对象的事件？
在fabricjs中它是可能的 - 事实上我已经做了类似的东西,但更简单.
在我的项目中,我需要实现一个可编辑的行,但不是Fabric内置行,它可以通过边界框进行编辑,但是可以拖动其一端的行,就像在每个矢量绘图应用程序中一样.
只用一个物体似乎是不可能的,所以我最终创造了三个物体 - 两端有一条线和两个小圆圈.然后我设置从线到圆以及从圆到线的参考 - 这样我就可以找到附加到我正在移动的对象的所有对象.
现在,在每个对象移动过程中,我检查对象是否有对附加行/圆的引用,如果有 - 我需要运行特殊的行移动代码来更新所有附加对象.
演示:
您可以在这里找到简单的技术演示: www.drawee.kolenda.me/techdemo.
只需单击"直线",在框架中拖动鼠标,单击"编辑" - 您就可以看到在工作中拖动线条.您可以拖动线本身或其中一个端点.
在您的特定情况下,您可能希望禁用选择或拖动连接,您可能还想更新连接形状,因此它是某种动态曲线,而不是直线,但我认为核心功能将是相同的.
元数据:
如果你想添加一些额外的数据,它就不会更简单 - 每个JS对象都是一个存储键值对的字典,所以你只需要在对象中添加另一个键值对.请记住,JS和Fabric会在内部使用一些键名,因此请保持您的键名与现有键名不同.我在此演示中的自定义键名称是"line","circle1"和"circle2" - 您可以在源代码中找到它们.
小智 6
是的，在fabric js中是可能的。我刚刚试用了一个带有连接器连接的盒子的示例。请在这里检查。 http://kpomservices.com/HTML5CanvasCampaign/visual.html
使用连接器创建形状的简单演示。使用形状位置可以轻松创建连接器，当形状移动时，在事件处理程序中我们还需要更新连接器的位置。
完整的演示在这里。 http://kpomservices.com/HTML5CanvasCampaign/campaign.html 此处连接器也可以与其他框一起移动（拖放）。
| 归档时间： |
|
| 查看次数： |
4925 次 |
| 最近记录： |