gojs hover样式
时间: 2023-07-20 12:28:05 浏览: 123
在 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` 属性值。
阅读全文