使用 Backbone.js 在 html 画布上绘制和连接对象答案

【问题标题】：Draw and connect objects on html canvas using Backbone.js使用 Backbone.js 在 html 画布上绘制和连接对象
【发布时间】：2016-09-21 21:47:18
【问题描述】：

我目前正在使用 Backbone.js 开发一个 Web 应用程序。我需要能够以树的方式绘制对象并将父级连接到兄弟级等。

有一些示例演示了在画布上绘制对象以及将hover 和click 事件附加到每个画布对象，但没有任何关于如何连接对象的实现示例。

例如，假设我们有一个 JSON 对象：

{  
  topObject: {
    siblingA: {},
    siblingB: {},
  }
}

会画出类似的东西：

谁能指出我使用 Backbone.js 完成此任务的正确方向，或者更好的是，提供一个这样做的示例？我不知道应该从哪里开始。

【问题讨论】：

我认为您已经浏览过modeling-languages.com/javascript-drawing-libraries-diagrams ？如果您的项目是商业项目，请检查许可证，但许多都包含示例。 paper.js站点特别好，右上角有示例http://paperjs.org/examples/可以编辑代码
@Sam0 我遇到了那个资源，并通过它们进行了探索。我的问题是，没有任何实现示例可以实现与我提供的图片相同的想法。 paper.js examples 很棒，但它有助于找到连接“树状”庄园中的对象的示例。

标签： javascript jquery html canvas backbone.js

【解决方案1】：

我能找到的最好的两个是基于 SVG.js 库的 Flow-svg 和基于 Raphaël 的 flowchart.js。两个 Git 页面都有相当清晰的示例和文档代码。然而，flowchart.js 有自己的速记语言，而 Flow-svg 有一个结构良好的 json 系统——它与你的系统并没有太大的不同，并且有许多样式选项。以下片段：

    flowSVG.draw(SVG('drawing').size(900, 1100));
    flowSVG.config({
    	interactive: false,
    	showButtons: false,
    	connectorLength: 60
    });
    flowSVG.shapes(
    	[{
    			label: 'tops',
    			type: 'decision',
    			moveRight: 500,
    			text: ['Boss'],
    			orient: {
    				yes: 'b',
    				no: 'r'
    					// If there is a next...
    					//next: 'r'
    			},
    			yes: 'siblingA',
    			no: 'siblingB'
    		}, {
    			label: 'siblingA',
    			type: 'process',
    			text: ['Brother'],
    			next: 'end'
    		}, {
    			label: 'siblingB',
    			type: 'process',
    			text: ['Sister'],
    			next: 'end'
    		}, {
    			label: 'end',
    			type: 'finish',
    			text: ['done']
    		}

    	]);

<script src="http://rawgit.com/rtalbot89/flow-svg/gh-pages/example/svg.js"></script>
<script src="http://rawgit.com/rtalbot89/flow-svg/gh-pages/dist/flowsvg.min.js"></script>

<div id="drawing" style="margin-left:10px"></div>

【讨论】：

感谢您花时间处理这个问题！感谢您结帐的几个图书馆，我打算调查他们两个。