gojs setsPortSpots
时间: 2023-11-25 22:11:17 浏览: 31
`setsPortSpots` 是 GoJS 中一个用于设置连接线端点位置的方法。它可以被用于 `LinkingTool` 或者 `RelinkingTool` 工具中,以确定连接线的起点和终点的位置。
该方法接受两个参数,分别为起点和终点的位置。这些位置定义了连接线从一个节点的端口到另一个节点的端口的路径。每个位置都是一个数组,包含两个元素,分别表示连接线应该从节点的哪个位置开始或结束。这些位置可以是以下值之一:
- `go.Spot.Top`, `go.Spot.Bottom`, `go.Spot.Left`, `go.Spot.Right`:表示节点的中心点的上、下、左、右位置。
- `go.Spot.Center`:表示节点的中心点。
- `go.Spot.NotNegativeInfinity`:表示节点的一个随机位置。
例如,以下代码将连接线的起点位置设置为 “顶部中心” 位置,将终点位置设置为相对于节点的 “左侧中心” 位置:
```javascript
linkingTool.setsPortSpots(node, go.Spot.Top, otherNode, go.Spot.Left);
```
这将导致连接线从节点的顶部中心开始,并以从该节点到其他节点的左侧中心为止的路径结束。
相关问题
gojs addModelChangedListener
`addModelChangedListener` 是 GoJS 库中的一个方法,用于向模型添加更改监听器。当模型发生更改时,监听器将被调用。该方法的语法如下:
```javascript
myDiagram.model.addChangedListener(listener);
```
其中,`myDiagram` 是 GoJS 图表对象,`model` 是该图表对象的模型,`listener` 是一个回调函数,用于处理模型更改事件。该方法返回一个标识符,用于取消监听器。
例如,以下代码将向 GoJS 模型添加一个更改监听器:
```javascript
myDiagram.model.addChangedListener(function(evt) {
console.log("Model changed: " + evt);
});
```
当模型发生更改时,控制台将输出类似于以下内容的消息: "Model changed: {event data}"。
gojs hover样式
在 GoJS 中,你可以通过设置 Node 或 Link 的 `mouseEnter` 和 `mouseLeave` 事件来实现 Hover 效果。在这些事件中,你可以更改节点或连线的属性值来改变它们的外观。
以下是一个示例,当鼠标悬停在 Node 上时,节点会变成红色,当鼠标离开时,节点会恢复原来的颜色:
```javascript
myDiagram.nodeTemplate = $(go.Node, "Auto",
{
mouseEnter: function(e, obj) {
obj.part.findObject("SHAPE").fill = "red";
},
mouseLeave: function(e, obj) {
obj.part.findObject("SHAPE").fill = "blue";
}
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: "blue"
}
)
);
```
在上面的示例中,我们使用 `findObject` 方法来获取节点模板中的 `Shape` 对象,然后更改其 `fill` 属性值。
对于 Link,你可以使用 `mouseEnter` 和 `mouseLeave` 事件来更改 `stroke` 属性以更改其外观。
```javascript
myDiagram.linkTemplate = $(go.Link,
{
mouseEnter: function(e, obj) {
obj.part.findObject("SHAPE").stroke = "red";
},
mouseLeave: function(e, obj) {
obj.part.findObject("SHAPE").stroke = "black";
}
},
$(go.Shape,
{
name: "SHAPE",
strokeWidth: 2,
stroke: "black"
}
)
);
```
在上面的示例中,我们使用 `findObject` 方法来获取连线模板中的 `Shape` 对象,然后更改其 `stroke` 属性值。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)