在jointjs中使元素“不可选” [英] Make elements 'not selectable' in jointjs

问题描述

我在我的一个项目中使用了 Jointjs 图表库。

I have used Jointjs diagramming library in one of my project.

1）我很想知道它是否提供了限制用户不使用图表元素的方法。我的意思是：用户可以将图表视为图像而不是与图像进行交互，如调整大小，更改位置，拖动链接等。

1) I'm curious to know whether it provides any way to restrict users not to play with the elements of the diagram. What I mean is: a user would be able to see the diagram as an image rather than interacting with it like resizing, changing position, dragging links, etc.

2）我的应用程序依赖于它。虽然我已经解决了自动布局的问题，但是有可能使用Jointjs，我们可以告诉lib我们想要这些元素和东西，并请帮助我们制作具有最合适，非碰撞元素的图表，并且最小化如果链接是连续的直线，链接数量相互之间以及路径中的元素相互冲突？

2) My app is depending on it badly. Though I have solved the issue of auto layout, but is that possible with Jointjs, can we just tell the lib that we want these elements and stuff and please help us in making the diagram with best suitable, non-colliding elements and with a minimum number of links colliding with each other and with the elements in their path if the links are continuous straight lines ?

3）最后，我想要知道我们是否可以检查与其他元素或同一图表中的其他链接发生冲突的链接。我知道有可能是元素。

3) Lastly, i want to know if we can check links colliding with other elements or with other links in the same diagram. I know it is possible in case of elements.

if (element1.getBBox().intersect(element2.getBBox())) {
    // elements intersect
}

推荐答案

1）使用 new joint.dia.Paper（{interactive：false，...}）或直接将指针事件CSS属性设置为none paper： paper。$ el.css（'pointer-events'，'none'）

1) Use either new joint.dia.Paper({ interactive: false, ... }) or set pointer-events CSS property to none directly on the paper: paper.$el.css('pointer-events', 'none')

2）你可以使用joint.layout.DirectedGraph插件。这个插件可以在这里下载： http://jointjs.com/download 和描述它的博客文章在这里： http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre。 html 。

2) You can use the joint.layout.DirectedGraph plugin. This plugin is downloadable here: http://jointjs.com/download and a blog post describing it is here: http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html.

3）一般来说，这并不容易。我将引导您访问此站点，以获取计算两条路径之间交叉点的示例： http：// www。 kevlindev.com/geometry/2D/intersections/intersect_bezier2_bezier2.svg 。这是下载的库： http://www.kevlindev.com/gui/math/intersection/ index.htm

3) This is not, in general, easy. I'd point you to this site for an example of computing intersection between two paths: http://www.kevlindev.com/geometry/2D/intersections/intersect_bezier2_bezier2.svg. Here is the library for download then: http://www.kevlindev.com/gui/math/intersection/index.htm

这篇关于在jointjs中使元素“不可选”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！