0

使用jsplumb绘制了一个流程图,当内容比较多的时候会超出界面宽度外。
给最外层的div设置了超出显示滚动条。发现拉动滚动条的时候通过jsplumb绘制的那些连线不会跟随滚动条动的。
查看元素发现,它们居然是被放置在了<body>标签下面,所以导致了我在绘制框那里加滚动条无法影响到它。
查了一下文档, 说jsPlumb.setContainer可以设置父容器。
但是设置了也是没有啥变化。
请问这个有什么好的解决方法吗?

 jsPlumb.ready(function () {
            var common = {
                    isSource: false,
                    isTarget: false,
                    connector: ['Flowchart'],
                    maxConnections: -1,
                    RenderMode : "canvas",
                }
            jsPlumb.setContainer($("#diagramContainer"));
            
            var j = jsPlumb.getInstance({
                Endpoint: ["Dot", {radius: 3}], //这个是控制连线终端那个小点的半径
            });
            j.addEndpoint('Aid',{uuid:'A' , anchor: "BottomCenter"},common);
            j.addEndpoint('Bid',{uuid:'B',anchor:'TopCenter'},common);
            j.connect({
                   uuids:['A','B'], 
                   paintStyle: { stroke: '#0099cc', strokeWidth: 2 }, 
                   endpointStyle: { fill: 'blue', outlineStroke: 'darkgray', outlineWidth: 0 },
             }); 
 }
2018-12-07 提问
2 个回答
1

已采纳
jsPlumb.setContainer($("#diagramContainer")) // jsPlumb跟下面j怕不是同一个对象哦
var j = jsPlumb.getInstance({
            Endpoint: ["Dot", {radius: 3}], //这个是控制连线终端那个小点的半径
            Container:'diagramContainer'
        });
1

原来如此。还要给父容器上加个position: relative;才正常生效

Elvis_欧元 · 2018年12月07日

展开评论
0

你好,我刚开始也是遇到当超出页面高度的时候出现 endpoint错位的情况。
然后按照你说的,在父容器上添加了{position: relative;}属性,添加后显示正常,但是操作连接两个点的时候超出页面高度的部分发生了错位图片描述

鼠标 超出页面宽度后出现鼠标光标和endpoint起始点错位。。

撰写答案

推广链接