yfiles for html 2.5 如何将实体的标签和实体成为一体,从而我可以通过拖拽实体标签来移动实体的位置
时间: 2024-05-06 19:18:34 浏览: 7
您可以通过在yFiles for HTML 2.5中使用NodeLabel的位置属性来将实体的标签和实体结合起来。当然,这需要一些代码编写来实现。以下是一个示例:
首先,您需要在节点上创建一个标签,并指定其位置:
```javascript
var node = graph.createNode(new yfiles.geometry.RectD(0, 0, 50, 50));
var label = graph.addLabel(node, "My Label");
label.preferredSize = new yfiles.geometry.SizeD(50, 20);
label.layoutParameter = yfiles.graph.DefaultLabelLayoutParameter.INTERNAL;
label.style = new yfiles.styles.DefaultLabelStyle();
label.style.textStyle = new yfiles.styles.TextStyle();
label.style.textStyle.fontFamily = "Arial";
label.style.textStyle.fontSize = 12;
label.style.textStyle.fontWeight = "bold";
graph.setLabelText(label, "My Label");
graph.setLabelLayoutParameter(label, yfiles.graph.DefaultLabelLayoutParameter.INTERNAL);
graph.setLabelPreferredSize(label, new yfiles.geometry.SizeD(50, 20));
//设置位置属性
var positionHandler = new yfiles.input.LabelPositionHandler(label);
positionHandler.positionMode = yfiles.input.LabelPositionMode.NODE_CENTER;
```
接下来,您需要为节点添加一个位置处理程序,以便可以通过拖动标签来移动节点:
```javascript
var locationHandler = new yfiles.input.NodeCenterLocationHandler(node);
locationHandler.priority = 41;
locationHandler.initializeDrag = function (inputModeContext) {
//在拖动标签之前,将焦点转移到节点,以便可以正确拖动
inputModeContext.canvasComponent.selection.clear();
inputModeContext.canvasComponent.selection.setSelected(node, true);
var selectedLabels = graph.selectedLabels;
for (var i = 0; i < selectedLabels.size; i++) {
inputModeContext.canvasComponent.selection.setSelected(selectedLabels.get(i), true);
}
};
graphComponent.inputMode.addHandler(new yfiles.input.ItemClickedInputMode({
//单击标签会选择标签,而不是节点
shouldFireClickEvent: function (args) {
return args.item instanceof yfiles.graph.ILabelOwner && args.item !== node;
},
//单击标签时不会触发选中和打开
itemLeftClicked: function (sender, args) {}
}));
//添加位置处理程序
locationHandler.label = label;
graphComponent.inputMode.moveInputMode.addDragStartedListener(function (sender, args) {
var dragSource = args.source;
if (dragSource instanceof yfiles.input.HandleInputPort) {
locationHandler.hideLabel = true;
}
});
graphComponent.inputMode.moveInputMode.addDraggedListener(locationHandler);
graphComponent.inputMode.moveInputMode.addDragFinishedListener(function (sender, args) {
locationHandler.hideLabel = false;
locationHandler.handleMoveStopped();
graphComponent.focus();
});
//禁用默认节点拖动处理程序
graphComponent.inputMode.moveInputMode.enabled = false;
```
现在,当您拖动标签时,它将移动节点。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)