如何解决在画布 JointJs 或任何画布几何体的变化中保持元素到位的几何体
从折叠/展开 https://resources.jointjs.com/demos/collapsible 的 joinjs 演示中,我想像这个例子一样在折叠/展开后保持点击元素鼠标焦点位置。如您所见,元素似乎没有移动,但画布已无缝移动。还有什么是正确的术语?
崩溃前
崩溃后
我使用的是 Jointjs,而不是 rappid,这是我迄今为止尝试过的。
paper.on('element:expand:pointerdown',function(elementView: joint.dia.ElementView,evt) {
evt.stopPropagation(); // stop any further actions with the element view (e.g. dragging)
const model = elementView.model;
const expanded = model.prop('expanded');
self.toggle(model,expanded);
});
//This toggle expand/collapse
toggle(cell: joint.dia.Element,expanded: boolean) {
const self = this;
const elements = self.canvasGraph.getSuccessors(cell).concat(cell);
// find all the links between successors and the element
const subgraph = self.canvasGraph.getSubgraph(elements);
//hide the successors
if (expanded) {
subgraph.forEach((element) => {
element.attr('./visibility','hidden');
});
} else {
subgraph.forEach((element) => {
element.attr('./visibility','visible');
});
}
cell.attr('./visibility','visible');
//do dagre layout
self._layoutGraph(self.canvasGraph);
}
//Directed graph layout
_layoutGraph(graph) {
const autoLayoutElements = [];
graph.getElements().forEach((el) => {
//make a subgraph of only visible elements
if (el.attr('./visibility') !== 'hidden') {
autoLayoutElements.push(el);
}
});
joint.layout.DirectedGraph.layout(graph.getSubgraph(autoLayoutElements),{
align: 'UR',setVertices: true,setLabels: true,marginX: 50,marginY: 50,rankSep: 200,rankDir: "LR"
});
}
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。