jsPlumb点到点连线偏移

1.最近画一个页面，需要在图中“起点”和“终点”中间构建一条连线，选择的工具是jsPlumb。
2.将target和source节点填充后，发现效果不对。终点向下偏移了一些。
3.在浏览器上查看插件生成的代码，可以看到生成的图形区域以及目标点的定位。。。

4.浏览器里面将top属性该为0，看到如下效果。

5.也就是说这里jsPlumb计算后的位置后，然后相对于当前容器来进行绝对布局的。所有计算出来的top值不是以当前容器来计算的。

6.查看当前容器的偏移量document.getElementById(“XXX”).offsetTop。最后计算出来的偏移量与“1”和“2”区域的高度是一致的。也就是把实际计算终点的位置是向下偏移了当前容器距离顶部的高度。
7.这里我们就可以得出结论了，产生偏移的原因是由于计算终点的时候是相对于浏览器顶部来计算的，而图形绘制的时候顶点是相对于当前容器的。
8.最后解决的话需要把两个端点父容器的position属性修改下，不能是相对布局。在浏览器里面找到这些CSS，在代码里面覆盖为inherit。注意不能改成absoulte，这样会导致整个页面的布局乱掉。Style也需去掉Scope关键字。因为不太懂前端，采用了比较粗暴的方式

9.实现效果

jsPlumb点到点连线偏移相关推荐

JavaScript|拖拽|仿Android手机九点连线开锁
最简单的JavaScript拖动代码 <script> var xx=0,yy=0; function a(v) { xx=event.x-v.offsetLeft; yy=event.y ...
求两点连线与其中一点为球心球的交点——赋MATLAB代码
在轨迹规划过程中,常将其它智能体视为具有一定半径的球形障碍物(或圆形障碍物).若求智能体与障碍物最近的边缘点,其本质即求两点连线与其中一点为球心球的交点. 求的方法有多种,这里采用雅克比矩阵的方法. ...
已知两点，求两点与原点连线的角度
/* 怎么求夹角:已知两点坐标要求其到原点连线的夹角, 那么我们可以用向量去做, 用向量的积除以向量模的乘积,在求其反函数, 然后转换为角度就可以知道其角度为多少了: 向量的模的乘积怎么算: sqrt ...
uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线
我们可以参考uni-app官网链接地图块显示气泡标注和多边形 <mapv-if="longitude && latitude"style="wi ...
髂嵴最高点在哪里_两侧髂嵴最高点连线约平 ( )
[单选题]胸骨角两侧( ) [单选题]下列不属于非语言沟通技巧的是() [单选题]历史上护士的最初形象是() [单选题]护士作为管理协调者的角色是因为护士在临床护理中要() [简答题]湖泊受到大量有机 ...
CAD二次开发--三维多段线偏移（Polyline3d offset）实现方法【GetOffsetCurves附带原代码】
你如果有在做CAD开发,并且你也有自定义的个性化的偏移需求,那么你会发现CAD目前只能进行2D线偏移:而3D线分为两种,第一种为"假三维"(z为0),这种虽然不会报错,也能看见他的 ...
unity3d:向量计算：获得两点连线的垂直向量，判断目标方位（前后左右）
获得两点连线垂直向量 /// <summary>/// 获取某向量的垂直向量/// </summary>public static Vector3 GetVerticalDir ...
百度地图显示多点连线+数字标注
百度地图显示多点连线+数字标注 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
教您快速学会用制表描点连线法画双曲线
制表.描点.连线法绘制函数是初步认识函数图像的基础,现在教学都是多媒体教学,所以数学老师要掌握几何画板的使用,下面将以绘制[-7,7]闭区间内,y=8/x图像为例介绍制表.描点和连线画双曲线的过程. ...
js 计算在AB两点连线上，距离A点一定距离的点的坐标
/*** @description 获取在AB两点连线上,以AB为方向,距离A点,L处的点的坐标* @param A:{x,z} 点A* @param B:{x,z} 点B* @param L 距A点 ...

jsPlumb点到点连线偏移

jsPlumb点到点连线偏移相关推荐

最新文章

热门文章