gpt4 book ai didi

java - JavaFX 中的图形可视化(如 yFiles)

转载 作者:IT老高 更新时间:2023-10-28 20:46:08 25 4
gpt4 key购买 nike

类似于 Graphviz,但更具体地说,是 yFiles。

我想要一个节点/边类型的图形可视化。

我正在考虑将节点设为Circle,将边设为Line。问题是在节点/边缘出现的区域使用什么。我应该使用 ScrollPane、常规 PaneCanvas 等等...

我将添加滚动功能、缩放、选择节点和拖动节点。

感谢您的帮助。

最佳答案

我有 2 个小时的时间要杀,所以我想我会试一试。事实证明,想出一个原型(prototype)很容易。

这是你需要的:

  • 使用您创建的图形库的主类
  • 带有数据模型的图表
  • 轻松添加和删除节点和边(事实证明,最好命名节点单元格,以避免在编程过程中与 JavaFX 节点混淆)
  • 一个 zoomable scrollpane
  • 图形的布局算法

关于 SO 的要求实在是太多了,所以我将添加一些注释的代码。

应用程序实例化图表,添加单元格并通过边连接它们。

应用程序/Main.java

package application;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import com.fxgraph.graph.CellType;
import com.fxgraph.graph.Graph;
import com.fxgraph.graph.Model;
import com.fxgraph.layout.base.Layout;
import com.fxgraph.layout.random.RandomLayout;

public class Main extends Application {

Graph graph = new Graph();

@Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();

graph = new Graph();

root.setCenter(graph.getScrollPane());

Scene scene = new Scene(root, 1024, 768);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

primaryStage.setScene(scene);
primaryStage.show();

addGraphComponents();

Layout layout = new RandomLayout(graph);
layout.execute();

}

private void addGraphComponents() {

Model model = graph.getModel();

graph.beginUpdate();

model.addCell("Cell A", CellType.RECTANGLE);
model.addCell("Cell B", CellType.RECTANGLE);
model.addCell("Cell C", CellType.RECTANGLE);
model.addCell("Cell D", CellType.TRIANGLE);
model.addCell("Cell E", CellType.TRIANGLE);
model.addCell("Cell F", CellType.RECTANGLE);
model.addCell("Cell G", CellType.RECTANGLE);

model.addEdge("Cell A", "Cell B");
model.addEdge("Cell A", "Cell C");
model.addEdge("Cell B", "Cell C");
model.addEdge("Cell C", "Cell D");
model.addEdge("Cell B", "Cell E");
model.addEdge("Cell D", "Cell F");
model.addEdge("Cell D", "Cell G");

graph.endUpdate();

}

public static void main(String[] args) {
launch(args);
}
}

滚动 Pane 应具有白色背景。

应用程序/application.css

.scroll-pane > .viewport {
-fx-background-color: white;
}

可缩放的滚动 Pane ,我得到了 code base from pixel duke :

ZoomableScrollPane.java

package com.fxgraph.graph;

import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.control.ScrollPane;
import javafx.scene.input.ScrollEvent;
import javafx.scene.transform.Scale;

public class ZoomableScrollPane extends ScrollPane {
Group zoomGroup;
Scale scaleTransform;
Node content;
double scaleValue = 1.0;
double delta = 0.1;

public ZoomableScrollPane(Node content) {
this.content = content;
Group contentGroup = new Group();
zoomGroup = new Group();
contentGroup.getChildren().add(zoomGroup);
zoomGroup.getChildren().add(content);
setContent(contentGroup);
scaleTransform = new Scale(scaleValue, scaleValue, 0, 0);
zoomGroup.getTransforms().add(scaleTransform);

zoomGroup.setOnScroll(new ZoomHandler());
}

public double getScaleValue() {
return scaleValue;
}

public void zoomToActual() {
zoomTo(1.0);
}

public void zoomTo(double scaleValue) {

this.scaleValue = scaleValue;

scaleTransform.setX(scaleValue);
scaleTransform.setY(scaleValue);

}

public void zoomActual() {

scaleValue = 1;
zoomTo(scaleValue);

}

public void zoomOut() {
scaleValue -= delta;

if (Double.compare(scaleValue, 0.1) < 0) {
scaleValue = 0.1;
}

zoomTo(scaleValue);
}

public void zoomIn() {

scaleValue += delta;

if (Double.compare(scaleValue, 10) > 0) {
scaleValue = 10;
}

zoomTo(scaleValue);

}

/**
*
* @param minimizeOnly
* If the content fits already into the viewport, then we don't
* zoom if this parameter is true.
*/
public void zoomToFit(boolean minimizeOnly) {

double scaleX = getViewportBounds().getWidth() / getContent().getBoundsInLocal().getWidth();
double scaleY = getViewportBounds().getHeight() / getContent().getBoundsInLocal().getHeight();

// consider current scale (in content calculation)
scaleX *= scaleValue;
scaleY *= scaleValue;

// distorted zoom: we don't want it => we search the minimum scale
// factor and apply it
double scale = Math.min(scaleX, scaleY);

// check precondition
if (minimizeOnly) {

// check if zoom factor would be an enlargement and if so, just set
// it to 1
if (Double.compare(scale, 1) > 0) {
scale = 1;
}
}

// apply zoom
zoomTo(scale);

}

private class ZoomHandler implements EventHandler<ScrollEvent> {

@Override
public void handle(ScrollEvent scrollEvent) {
// if (scrollEvent.isControlDown())
{

if (scrollEvent.getDeltaY() < 0) {
scaleValue -= delta;
} else {
scaleValue += delta;
}

zoomTo(scaleValue);

scrollEvent.consume();
}
}
}
}

每个单元格都表示为 Pane ,您可以将任何节点作为 View (矩形、标签、 ImageView 等)放入其中

Cell.java

package com.fxgraph.graph;

import java.util.ArrayList;
import java.util.List;

import javafx.scene.Node;
import javafx.scene.layout.Pane;

public class Cell extends Pane {

String cellId;

List<Cell> children = new ArrayList<>();
List<Cell> parents = new ArrayList<>();

Node view;

public Cell(String cellId) {
this.cellId = cellId;
}

public void addCellChild(Cell cell) {
children.add(cell);
}

public List<Cell> getCellChildren() {
return children;
}

public void addCellParent(Cell cell) {
parents.add(cell);
}

public List<Cell> getCellParents() {
return parents;
}

public void removeCellChild(Cell cell) {
children.remove(cell);
}

public void setView(Node view) {

this.view = view;
getChildren().add(view);

}

public Node getView() {
return this.view;
}

public String getCellId() {
return cellId;
}
}

细胞应该是通过某种工厂创建的,所以它们是按类型分类的:

CellType.java

package com.fxgraph.graph;

public enum CellType {

RECTANGLE,
TRIANGLE
;

}

实例化它们非常容易:

矩形单元格.java

package com.fxgraph.cells;

import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

import com.fxgraph.graph.Cell;

public class RectangleCell extends Cell {

public RectangleCell( String id) {
super( id);

Rectangle view = new Rectangle( 50,50);

view.setStroke(Color.DODGERBLUE);
view.setFill(Color.DODGERBLUE);

setView( view);

}

}

TriangleCell.java

package com.fxgraph.cells;

import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;

import com.fxgraph.graph.Cell;

public class TriangleCell extends Cell {

public TriangleCell( String id) {
super( id);

double width = 50;
double height = 50;

Polygon view = new Polygon( width / 2, 0, width, height, 0, height);

view.setStroke(Color.RED);
view.setFill(Color.RED);

setView( view);

}

}

那么你当然需要边缘。你可以使用任何你喜欢的连接,甚至三次曲线。为简单起见,我使用一行:

Edge.java

package com.fxgraph.graph;

import javafx.scene.Group;
import javafx.scene.shape.Line;

public class Edge extends Group {

protected Cell source;
protected Cell target;

Line line;

public Edge(Cell source, Cell target) {

this.source = source;
this.target = target;

source.addCellChild(target);
target.addCellParent(source);

line = new Line();

line.startXProperty().bind( source.layoutXProperty().add(source.getBoundsInParent().getWidth() / 2.0));
line.startYProperty().bind( source.layoutYProperty().add(source.getBoundsInParent().getHeight() / 2.0));

line.endXProperty().bind( target.layoutXProperty().add( target.getBoundsInParent().getWidth() / 2.0));
line.endYProperty().bind( target.layoutYProperty().add( target.getBoundsInParent().getHeight() / 2.0));

getChildren().add( line);

}

public Cell getSource() {
return source;
}

public Cell getTarget() {
return target;
}

}

对此的扩展是将边缘绑定(bind)到单元的端口(北/南/东/西)。

然后你想拖动节点,所以你必须添加一些鼠标手势。重要的部分是考虑缩放系数,以防图形 Canvas 被缩放

MouseGestures.java

package com.fxgraph.graph;

import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.input.MouseEvent;

public class MouseGestures {

final DragContext dragContext = new DragContext();

Graph graph;

public MouseGestures( Graph graph) {
this.graph = graph;
}

public void makeDraggable( final Node node) {


node.setOnMousePressed(onMousePressedEventHandler);
node.setOnMouseDragged(onMouseDraggedEventHandler);
node.setOnMouseReleased(onMouseReleasedEventHandler);

}

EventHandler<MouseEvent> onMousePressedEventHandler = new EventHandler<MouseEvent>() {

@Override
public void handle(MouseEvent event) {

Node node = (Node) event.getSource();

double scale = graph.getScale();

dragContext.x = node.getBoundsInParent().getMinX() * scale - event.getScreenX();
dragContext.y = node.getBoundsInParent().getMinY() * scale - event.getScreenY();

}
};

EventHandler<MouseEvent> onMouseDraggedEventHandler = new EventHandler<MouseEvent>() {

@Override
public void handle(MouseEvent event) {

Node node = (Node) event.getSource();

double offsetX = event.getScreenX() + dragContext.x;
double offsetY = event.getScreenY() + dragContext.y;

// adjust the offset in case we are zoomed
double scale = graph.getScale();

offsetX /= scale;
offsetY /= scale;

node.relocate(offsetX, offsetY);

}
};

EventHandler<MouseEvent> onMouseReleasedEventHandler = new EventHandler<MouseEvent>() {

@Override
public void handle(MouseEvent event) {

}
};

class DragContext {

double x;
double y;

}
}

然后您需要一个模型来存储单元格和边缘。任何时候都可以添加新单元格并删除现有单元格。您需要处理它们与现有的区别(例如,添加鼠标手势,添加它们时为它们设置动画等)。当您实现布局算法时,您将面临根节点的确定。所以你应该创建一个不可见的根节点(graphParent),它不会被添加到图本身,但所有没有父节点的节点都从该节点开始。

模型.java

package com.fxgraph.graph;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fxgraph.cells.TriangleCell;
import com.fxgraph.cells.RectangleCell;

public class Model {

Cell graphParent;

List<Cell> allCells;
List<Cell> addedCells;
List<Cell> removedCells;

List<Edge> allEdges;
List<Edge> addedEdges;
List<Edge> removedEdges;

Map<String,Cell> cellMap; // <id,cell>

public Model() {

graphParent = new Cell( "_ROOT_");

// clear model, create lists
clear();
}

public void clear() {

allCells = new ArrayList<>();
addedCells = new ArrayList<>();
removedCells = new ArrayList<>();

allEdges = new ArrayList<>();
addedEdges = new ArrayList<>();
removedEdges = new ArrayList<>();

cellMap = new HashMap<>(); // <id,cell>

}

public void clearAddedLists() {
addedCells.clear();
addedEdges.clear();
}

public List<Cell> getAddedCells() {
return addedCells;
}

public List<Cell> getRemovedCells() {
return removedCells;
}

public List<Cell> getAllCells() {
return allCells;
}

public List<Edge> getAddedEdges() {
return addedEdges;
}

public List<Edge> getRemovedEdges() {
return removedEdges;
}

public List<Edge> getAllEdges() {
return allEdges;
}

public void addCell(String id, CellType type) {

switch (type) {

case RECTANGLE:
RectangleCell rectangleCell = new RectangleCell(id);
addCell(rectangleCell);
break;

case TRIANGLE:
TriangleCell circleCell = new TriangleCell(id);
addCell(circleCell);
break;

default:
throw new UnsupportedOperationException("Unsupported type: " + type);
}
}

private void addCell( Cell cell) {

addedCells.add(cell);

cellMap.put( cell.getCellId(), cell);

}

public void addEdge( String sourceId, String targetId) {

Cell sourceCell = cellMap.get( sourceId);
Cell targetCell = cellMap.get( targetId);

Edge edge = new Edge( sourceCell, targetCell);

addedEdges.add( edge);

}

/**
* Attach all cells which don't have a parent to graphParent
* @param cellList
*/
public void attachOrphansToGraphParent( List<Cell> cellList) {

for( Cell cell: cellList) {
if( cell.getCellParents().size() == 0) {
graphParent.addCellChild( cell);
}
}

}

/**
* Remove the graphParent reference if it is set
* @param cellList
*/
public void disconnectFromGraphParent( List<Cell> cellList) {

for( Cell cell: cellList) {
graphParent.removeCellChild( cell);
}
}

public void merge() {

// cells
allCells.addAll( addedCells);
allCells.removeAll( removedCells);

addedCells.clear();
removedCells.clear();

// edges
allEdges.addAll( addedEdges);
allEdges.removeAll( removedEdges);

addedEdges.clear();
removedEdges.clear();

}
}

然后是图表本身,其中包含可缩放的滚动 Pane 、模型等。在图表中处理添加和删除的节点(鼠标手势、添加到滚动 Pane 的单元格和边缘等)。

Graph.java

package com.fxgraph.graph;

import javafx.scene.Group;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Pane;

public class Graph {

private Model model;

private Group canvas;

private ZoomableScrollPane scrollPane;

MouseGestures mouseGestures;

/**
* the pane wrapper is necessary or else the scrollpane would always align
* the top-most and left-most child to the top and left eg when you drag the
* top child down, the entire scrollpane would move down
*/
CellLayer cellLayer;

public Graph() {

this.model = new Model();

canvas = new Group();
cellLayer = new CellLayer();

canvas.getChildren().add(cellLayer);

mouseGestures = new MouseGestures(this);

scrollPane = new ZoomableScrollPane(canvas);

scrollPane.setFitToWidth(true);
scrollPane.setFitToHeight(true);

}

public ScrollPane getScrollPane() {
return this.scrollPane;
}

public Pane getCellLayer() {
return this.cellLayer;
}

public Model getModel() {
return model;
}

public void beginUpdate() {
}

public void endUpdate() {

// add components to graph pane
getCellLayer().getChildren().addAll(model.getAddedEdges());
getCellLayer().getChildren().addAll(model.getAddedCells());

// remove components from graph pane
getCellLayer().getChildren().removeAll(model.getRemovedCells());
getCellLayer().getChildren().removeAll(model.getRemovedEdges());

// enable dragging of cells
for (Cell cell : model.getAddedCells()) {
mouseGestures.makeDraggable(cell);
}

// every cell must have a parent, if it doesn't, then the graphParent is
// the parent
getModel().attachOrphansToGraphParent(model.getAddedCells());

// remove reference to graphParent
getModel().disconnectFromGraphParent(model.getRemovedCells());

// merge added & removed cells with all cells
getModel().merge();

}

public double getScale() {
return this.scrollPane.getScaleValue();
}
}

单元层的包装器。您可能需要添加多个图层(例如,突出显示选定单元格的选择图层)

CellLayer.java

package com.fxgraph.graph;

import javafx.scene.layout.Pane;

public class CellLayer extends Pane {

}

现在您需要一个单元格布局。我建议创建一个简单的抽象类,它会随着您开发图形而得到扩展。

package com.fxgraph.layout.base;

public abstract class Layout {

public abstract void execute();

}

为简单起见,这里有一个使用随机坐标的简单布局算法。当然,您必须做更复杂的事情,例如树形布局等。

RandomLayout.java

package com.fxgraph.layout.random;

import java.util.List;
import java.util.Random;

import com.fxgraph.graph.Cell;
import com.fxgraph.graph.Graph;
import com.fxgraph.layout.base.Layout;

public class RandomLayout extends Layout {

Graph graph;

Random rnd = new Random();

public RandomLayout(Graph graph) {

this.graph = graph;

}

public void execute() {

List<Cell> cells = graph.getModel().getAllCells();

for (Cell cell : cells) {

double x = rnd.nextDouble() * 500;
double y = rnd.nextDouble() * 500;

cell.relocate(x, y);

}

}

}

示例如下所示:

enter image description here

您可以使用鼠标按钮拖动单元格并使用鼠标滚轮放大和缩小。


添加新的单元格类型就像创建 Cell 的子类一样简单:

package com.fxgraph.cells;

import javafx.scene.control.Button;

import com.fxgraph.graph.Cell;

public class ButtonCell extends Cell {

public ButtonCell(String id) {
super(id);

Button view = new Button(id);

setView(view);

}

}

package com.fxgraph.cells;

import javafx.scene.image.ImageView;

import com.fxgraph.graph.Cell;

public class ImageCell extends Cell {

public ImageCell(String id) {
super(id);

ImageView view = new ImageView("http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/800px-Siberischer_tiger_de_edit02.jpg");
view.setFitWidth(100);
view.setFitHeight(80);

setView(view);

}

}


package com.fxgraph.cells;

import javafx.scene.control.Label;

import com.fxgraph.graph.Cell;

public class LabelCell extends Cell {

public LabelCell(String id) {
super(id);

Label view = new Label(id);

setView(view);

}

}

package com.fxgraph.cells;

import javafx.scene.control.TitledPane;

import com.fxgraph.graph.Cell;

public class TitledPaneCell extends Cell {

public TitledPaneCell(String id) {
super(id);

TitledPane view = new TitledPane();
view.setPrefSize(100, 80);

setView(view);

}

}

并创建类型

package com.fxgraph.graph;

public enum CellType {

RECTANGLE,
TRIANGLE,
LABEL,
IMAGE,
BUTTON,
TITLEDPANE
;

}

并根据类型创建实例:

...
public void addCell(String id, CellType type) {

switch (type) {

case RECTANGLE:
RectangleCell rectangleCell = new RectangleCell(id);
addCell(rectangleCell);
break;

case TRIANGLE:
TriangleCell circleCell = new TriangleCell(id);
addCell(circleCell);
break;

case LABEL:
LabelCell labelCell = new LabelCell(id);
addCell(labelCell);
break;

case IMAGE:
ImageCell imageCell = new ImageCell(id);
addCell(imageCell);
break;

case BUTTON:
ButtonCell buttonCell = new ButtonCell(id);
addCell(buttonCell);
break;

case TITLEDPANE:
TitledPaneCell titledPaneCell = new TitledPaneCell(id);
addCell(titledPaneCell);
break;

default:
throw new UnsupportedOperationException("Unsupported type: " + type);
}
}
...

你会得到这个

enter image description here

关于java - JavaFX 中的图形可视化(如 yFiles),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30679025/

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