| Shapes Devs devs插件 Devs插件为您提供了具有预定义的输入和输出端口组和简化API的现成形状。 joint.shapes.devs.Model 模型形状在JointJS内置端口上实现了简单的API。它将端口分为两个语义组(in和out)，并为添加和删除端口添加了方便的方法。 element.addInPort(port, [opt]) 向' inPorts '数组中添加一个端口，其中' port '是端口的名称 element.addOutPort(port, [opt]) 向“outPorts”数组中添加一个端口，其中“port”是该端口的名称。 element.changeInGroup(properties, [opt]) 更改输入端口的设置，其中“properties”是具有组配置的对象。 默认情况下，它使用新配置扩展了以前的设置。通过选择使以前的设置无效来传递{rewrite: true}。 element.changeOutGroup(properties, [opt]) 类似上一个方法，只不过是对输出端口进行操作 element.removeInPort(port, [opt]) 从“inPorts”数组的元素中删除一个端口，其中“port”是该端口的名称 element.removeOutPort(port, [opt]) 从“outPorts”数组的元素中删除一个端口，其中“port”是该端口的名称。 joint.shapes.devs.Link devs.Link继承了joint.dia.Link，更改链接外观。 示例如下： var shape = new joint.shapes.devs.Model({ position: { x: 100, y: 100 }, inPorts: ['in1', 'in2'], outPorts: ['out1', 'out2'] }); shape.addTo(graph); // adding/removing ports dynamically shape.addInPort('in3'); shape.removeOutPort('out1').addOutPort('out3'); var link = new joint.shapes.devs.Link({ source: { id: shape.id, port: 'out3' }, target: { x: 200, y: 300 } }); link.addTo(graph); // moving the input ports from `left` to `top` shape.changeInGroup({ position: 'top' }); // moving the output ports 'right' to 'bottom' shape.changeOutGroup({ position: 'bottom' }); Hierarchical diagrams 层次图 作为插件开发工具的一部分，还有另外两种图形是为分层图设计的。devs.Atomic和devs.Coupled。 它们继承自devs.Model只有颜色和尺寸不同，这些图形的目的是使您能够根据其类型在应用程序中实现自定义逻辑。 层次图常用方法： coupled.embed(atomic) 这可以将“atomic”形状放入“coupled中
coupled.fitEmbeds() 这将调整coupled形状的大小，因此它将直观地包含嵌入其中的所有形状
link.reparent() 这将根据源元素和目标元素为“链接”找到最好的父元素
shapes.standard 标准插件 标准插件为您提供了最常见形状的现成、高性能版本。这些形状可以按原样使用，也可以作为创建定制形状。 常见标准图集预览： var standard = joint.shapes.standard; var rectangle = new standard.Rectangle(); var circle = new standard.Circle(); var ellipse = new standard.Ellipse(); var path = new standard.Path(); var polygon = new standard.Polygon(); var polyline = new standard.Polyline(); var cylinder = new standard.Cylinder(); var image = new standard.Image(); var borderedImage = new standard.BorderedImage(); var embeddedImage = new standard.EmbeddedImage(); var headeredRectangle = new standard.HeaderedRectangle(); var textBlock = new standard.TextBlock(); var link = new standard.Link(); var doubleLink = new standard.DoubleLink(); var shadowLink = new standard.ShadowLink(); shapes.standard.BorderedImage 带有边框和标签的图像。 示例如下： var borderedImage = new joint.shapes.standard.BorderedImage(); borderedImage.resize(150, 100); borderedImage.position(225, 410); borderedImage.attr('root/title', 'joint.shapes.standard.BoarderedImage'); borderedImage.attr('label/text', 'Bordered\nImage'); borderedImage.attr('border/rx', 5); borderedImage.attr('image/xlinkHref', 'image.png'); borderedImage.addTo(graph); shapes.standard.Circle 带有标签的圆圈。 示例如下： var circle = new joint.shapes.standard.Circle(); circle.resize(100, 100); circle.position(250, 10); circle.attr('root/title', 'joint.shapes.standard.Circle'); circle.attr('label/text', 'Circle'); circle.attr('body/fill', 'lightblue'); circle.addTo(graph); shapes.standard.Cylinder 带有标签的圆柱体。 用处较少（略） shapes.standard.DoubleLink 双线链接。 示例如下： var doubleLink = new joint.shapes.standard.DoubleLink(); doubleLink.prop('source', { x: 500, y: 600 }); doubleLink.prop('target', { x: 450, y: 750 }); doubleLink.prop('vertices', [{ x: 500, y: 700 }]); doubleLink.attr('root/title', 'joint.shapes.standard.DoubleLink'); doubleLink.attr('line/stroke', '#30d0c6'); doubleLink.addTo(graph); shapes.standard.Ellipse 带标签的椭圆。 示例如下： var ellipse = new joint.shapes.standard.Ellipse(); ellipse.resize(150, 100); ellipse.position(425, 10); ellipse.attr('root/title', 'joint.shapes.standard.Ellipse'); ellipse.attr('label/text', 'Ellipse'); ellipse.attr('body/fill', 'lightblue'); ellipse.addTo(graph); shapes.standard.EmbeddedImage 嵌入带有标签的矩形的图像。 示例如下： var embeddedImage = new joint.shapes.standard.EmbeddedImage(); embeddedImage.resize(150, 100); embeddedImage.position(425, 410); embeddedImage.attr('root/title', 'joint.shapes.standard.EmbeddedImage'); embeddedImage.attr('label/text', 'Embedded\nImage'); embeddedImage.attr('image/xlinkHref', 'image.png'); embeddedImage.addTo(graph); shapes.standard.HeaderedRectangle 带标题的矩形。 示例如下： var headeredRectangle = new joint.shapes.standard.HeaderedRectangle(); headeredRectangle.resize(150, 100); headeredRectangle.position(25, 610); headeredRectangle.attr('root/title', 'joint.shapes.standard.HeaderedRectangle'); headeredRectangle.attr('header/fill', 'lightgray'); headeredRectangle.attr('headerText/text', 'Header'); headeredRectangle.attr('bodyText/text', 'Headered\nRectangle'); headeredRectangle.addTo(graph); shapes.standard.Image 带有标签的图像。 示例如下： var image = new joint.shapes.standard.Image(); image.resize(150, 100); image.position(25, 410); image.attr('root/title', 'joint.shapes.standard.Image'); image.attr('label/text', 'Image'); image.attr('image/xlinkHref', 'image.png'); image.addTo(graph); shapes.standard.Link 单线链接。 示例如下： var link = new joint.shapes.standard.Link(); link.prop('source', { x: 450, y: 600 }); link.prop('target', { x: 400, y: 750 }); link.prop('vertices', [{ x: 450, y: 700 }]); link.attr('root/title', 'joint.shapes.standard.Link'); link.attr('line/stroke', '#fe854f'); link.addTo(graph); shapes.standard.Path 带标签的路径。 示例如下： var path = new joint.shapes.standard.Path(); path.resize(100, 100); path.position(50, 210); path.attr('root/title', 'joint.shapes.standard.Path'); path.attr('label/text', 'Path'); path.attr('body/refD', 'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z'); path.addTo(graph); shapes.standard.Polygon 带标签的多边形。 示例如下： var polygon = new joint.shapes.standard.Polygon(); polygon.resize(100, 100); polygon.position(250, 210); polygon.attr('root/title', 'joint.shapes.standard.Polygon'); polygon.attr('label/text', 'Polygon'); polygon.attr('body/refPoints', '0,10 10,0 20,10 10,20'); polygon.addTo(graph); shapes.standard.Polyline 带有标签的折线 示例如下： var polyline = new joint.shapes.standard.Polyline(); polyline.resize(100, 100); polyline.position(450, 210); polyline.attr('root/title', 'joint.shapes.standard.Polyline'); polyline.attr('label/text', 'Polyline'); polyline.attr('body/refPoints', '0,0 0,10 10,10 10,0'); polyline.addTo(graph); shapes.standard.Rectangle 带标签的矩形。 示例如下： var rectangle = new joint.shapes.standard.Rectangle(); rectangle.resize(100, 100); rectangle.position(50, 10); rectangle.attr('root/title', 'joint.shapes.standard.Rectangle'); rectangle.attr('label/text', 'Rectangle'); rectangle.attr('body/fill', 'lightblue'); rectangle.addTo(graph); shapes.standard.ShadowLink 带阴影的粗线 示例如下： var shadowLink = new joint.shapes.standard.ShadowLink(); shadowLink.prop('source', { x: 550, y: 600 }); shadowLink.prop('target', { x: 500, y: 750 }); shadowLink.prop('vertices', [{ x: 550, y: 700 }]); shadowLink.attr('root/title', 'joint.shapes.standard.ShadowLink'); shadowLink.attr('line/stroke', '#5654a0'); shadowLink.addTo(graph); shapes.standard.TextBlock 带有HTML标签的矩形 示例如下： var textBlock = new joint.shapes.tandard.TextBlock(); textBlock.resize(100, 100); textBlock.position(250, 610); textBlock.attr('root/title', 'joint.shapes.standard.TextBlock'); textBlock.attr('body/fill', 'lightgray'); textBlock.attr('label/text', 'Hyper Text Markup Language'); // Styling of the label via `style` presentation attribute (i.e. CSS). textBlock.attr('label/style/color', 'red'); textBlock.addTo(graph); | 