gpt4 book ai didi

javascript - jsPlumb:端点位置错误

转载 作者:搜寻专家 更新时间:2023-10-31 22:58:13 25 4
gpt4 key购买 nike

使用 Dojo,以编程方式创建框并在放置框后将其放置在主 div 的内部 div 我使用 addEndpoint() 将端点添加到我的框,问题是端点没有放置在正确的位置.这是我的代码

<div data-dojo-attach-point="containerNode" class="divCenter navEditorDiv" style="">
<button data-dojo-attach-event="onClick: showPopOut" data-dojo-attach-point="createNode"
class="btn btn-primary fa fa-plus-square position" style=""></button>

<div data-dojo-attach-point="navigationNode"></div> </div>

上面的代码是我的HTML

jsplumbInstance: function () {
if (!this._instance) {
this._instance = jsPlumb.getInstance({
// default drag options
DragOptions: {cursor: 'pointer', zIndex: 2000},
// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays: [
["Arrow", {
location: 1,
visible: true,
id: "ARROW",
/* events:{
click:function() { alert("you clicked on the arrow overlay")}
}*/
}],
["Label", {
location: 0.8,
id: "label",
cssClass: "aLabel fa fa-times",
/*events:{
tap:function() { jsPlumb.remove("label");}
}*/
}]
],

Container: this.navigationNode
});

}
return this._instance;
},

上面的代码是我的 jsPlumb 实例,其中“Container”设置为 innerDiv dojo 附加点

 leftEndPoints: function () {
connectorPaintStyle = {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth: 4,
strokeStyle: "#216477",
outlineWidth: 2,
outlineColor: "white"
},
endpointHoverStyle = {
fillStyle: "#216477",
strokeStyle: "#216477"
};
var sourceEndpoint = {
anchor: "RightMiddle",
endpoint: "Dot",
paintStyle: {
strokeStyle: "#7AB02C",
fillStyle: "transparent",
radius: 7,
lineWidth: 3
},
isSource: true,
connector: ["Flowchart", {stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true}],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
deleteEndpointsOnDetach: false,
dragOptions: {},
maxConnections: -1,
overlays: [
["Label", {
location: [0.5, 1.5],
label: "Drag",
cssClass: "endpointSourceLabel",
visible: false
}]
],
};
return sourceEndpoint;
},

上面的代码是我的 jsPlumb 端点

domConstruct.place(rootWidget.boxNode, that.navigationNode);
that.jsplumbInstance().addEndpoint(rootWidget.boxNode,that.leftEndPoints());

我使用 Dojo domConstruct.place 将盒子放在 innerDiv 中,并在放置后向其添加端点。

请帮我修复它。

错误位置截图

enter image description here

预期结果截图

enter image description here

最佳答案

您可以设置带有样式的父容器position: absolute; 来解决这个问题。

关于javascript - jsPlumb:端点位置错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37212120/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com