单元格之间的链接不是 "flat" - JointJS
Links between cells are not "flat" - JointJS
当我拖动我的 "table" 单元格时,大多数时候连接是平坦的/水平的(比如 link 的垂直部分或 ORDERLINE table), 但有时它们最终会形成一个小角度 (link 的左边位)。有没有办法防止这种情况?
如果我检查 devtools 中的元素,它会显示 rotate
有一些小的偏移量,而不是我期望看到的值(即 0、90、180、-90、- 180).. 当前为 link:
的左位渲染的示例
<path class="marker-source" fill="white" stroke="#c5d8e5" d="M 6 0 L 6 10 M 6 5 L 0 5 z" id="v-29" stroke-width="2" transform="translate(318.204758999181,420.00417997801776) scale(1,1) rotate(2.34686279296875)"></path>
有什么办法可以解决这个问题吗?
这是 manhattan
路由器吗?如果是这样,有一个技巧可以改善这一点。尝试为 paper.option.gridSize
和 router.option.step
设置相同的值,如下例中设置为 20。
var paper = new joint.dia.Paper({
el: document.getElementById('paper'),
width: 800,
height: 600,
gridSize: 20,
perpendicularLinks: true,
model: graph,
defaultLink: new joint.dia.Link({
router: { name: 'manhattan', args: { step: 20 } },
connection: { name: 'orthogonal' },
attrs: {
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#fff', stroke: '#000' },
'.link-tools .tool-remove circle, .marker-vertex': { r: 8 },
'.connection': {
stroke: '#000', 'stroke-width': 1
}
}
}),
interactive: {
vertexAdd: false
}
});
当我拖动我的 "table" 单元格时,大多数时候连接是平坦的/水平的(比如 link 的垂直部分或 ORDERLINE table), 但有时它们最终会形成一个小角度 (link 的左边位)。有没有办法防止这种情况?
如果我检查 devtools 中的元素,它会显示 rotate
有一些小的偏移量,而不是我期望看到的值(即 0、90、180、-90、- 180).. 当前为 link:
<path class="marker-source" fill="white" stroke="#c5d8e5" d="M 6 0 L 6 10 M 6 5 L 0 5 z" id="v-29" stroke-width="2" transform="translate(318.204758999181,420.00417997801776) scale(1,1) rotate(2.34686279296875)"></path>
有什么办法可以解决这个问题吗?
这是 manhattan
路由器吗?如果是这样,有一个技巧可以改善这一点。尝试为 paper.option.gridSize
和 router.option.step
设置相同的值,如下例中设置为 20。
var paper = new joint.dia.Paper({
el: document.getElementById('paper'),
width: 800,
height: 600,
gridSize: 20,
perpendicularLinks: true,
model: graph,
defaultLink: new joint.dia.Link({
router: { name: 'manhattan', args: { step: 20 } },
connection: { name: 'orthogonal' },
attrs: {
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#fff', stroke: '#000' },
'.link-tools .tool-remove circle, .marker-vertex': { r: 8 },
'.connection': {
stroke: '#000', 'stroke-width': 1
}
}
}),
interactive: {
vertexAdd: false
}
});