I'm developing a JavaFX application where the user is able to zoom and drag the elements (all contained in a AnchorPane). Some of those elements are simple lines and I need to have something like a ruler that has different parent to stick on the screen on the same position even if the user zooms or drags the mentioned AnchorPane. I got almost everything working but I have one problem, I need to know which lines from the AnchorPane are visible to the user (as if the user zooms and drags the AnchorPane, some of the lines are not visible anymore). Here's what I tried (not working...)
private List<Double> getVisibleVerticalLinesXCoordonate() {
List<Double> xCoordonatesOfVisibleVerticalLines = new ArrayList<>();
List<Node> visibleNodes = new ArrayList<>();
Bounds bounds = rulerParent.getBoundsInLocal();
Bounds paneBounds = rulerParent.localToScene(bounds);
for (Node n : gridVerticalLines) {
Bounds nodeBounds = n.getBoundsInParent();
if (paneBounds.intersects(nodeBounds)) {
visibleNodes.add(n);
}
}
for (Node node : visibleNodes) {
Bounds newBounds = getRelative(node);
xCoordonatesOfVisibleVerticalLines.add(newBounds.getMinX());
}
System.out.println(Arrays.asList(xCoordonatesOfVisibleVerticalLines));
return xCoordonatesOfVisibleVerticalLines;
}
private Bounds getRelative(Node node) {
return rulerParent.sceneToLocal(node.localToScene(node.getBoundsInLocal()));
}
So, the rulerParent is what is fixed on the screen (is not zooming or dragging at all). After I have the visible lines from the AnchorPane I get the x coordinates of the lines relative to rulerParent - so I can align the ruler lines with the lines in the AnchorPane.
The problem is that this is not returning the actual visible lines...
I don't need to be able to see the whole line to consider it visible, that's why I'm using intersect...if any part of a line is visible, I need it.
It's about how you handle the zoom and dragging actions try to use ViewPort instead of scaling as with ViewPort you can know the translation X and Y coordinates of the ViewPort which is the visible X and Y coordinates of the AnchorPane
Related
I have a huge QgraphicsScene and a QGraphicsItem which changes its position according to pressed key arrows. I want the item to always be in the centre of the viewport. I used QGraphicsView::centerOn() and it's exactly what i need, but there is jittering problem - and as i read it's associated with the integer precision issue. So what's the way around? Another post says to use QGraphicsView::translate() and setTransformationAnchor(QGraphicsView::NoAnchor). But it doesnt seem to work.
Game::Game()
{
player = new QGraphicsRectItem();
m_view = new QGraphicsView(this);
m_view->setSceneRect(QRectF(0,0,11800,11600));
this->setBackgroundBrush(Qt::black);
m_view->setScene(this);
m_view->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
m_view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
m_view->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
m_view->setViewportUpdateMode(QGraphicsView::NoViewportUpdate);
m_view->show();
player->setRect(0,0,100,100);
player->setBrush(Qt::red);
player->setPos(400,300);
player->setFocus();
this->addItem(player);
player->setZValue(10);
player->setTransformOriginPoint(player->boundingRect().center());
customRect = new CustomRect;
customRect->setPos(400,300);
this->addItem(customRect);
}
void Game::advance()
{
m_view->centerOn(player);
}
FFor the sake of simplicity it is better to show you the problem and then describe it
I plan to set the minimum width of the window to the minimum size possible before the pane (groupPane in this example) starts being clipped
how can i calculate that width beforehand.
the fxml section :
the current calculation method:
public void setupMinStageSizeInStandardMode(Stage primaryStage, Scene scene)
{
// the thickness of the border of the window
ObjectBinding<Insets> insets = Bindings.createObjectBinding(() ->
new Insets(scene.getY(),
primaryStage.getWidth()-scene.getWidth() - scene.getX(),
primaryStage.getHeight()-scene.getHeight() - scene.getY(),
scene.getX()),
scene.xProperty(),
scene.yProperty(),
scene.widthProperty(),
scene.heightProperty(),
primaryStage.widthProperty(),
primaryStage.heightProperty()
);
//i am trying to get the grid to the smallest size here
controlsGrid.setMaxWidth(0);
controlsGrid.setPrefWidth(0);
// then i am trying to calculate the wanted size
double minStageWidth = controlsGrid.getWidth() +insets.get().getLeft() + insets.get().getRight();
double minStageHeight = controlsGrid.getHeight() +insets.get().getTop() + insets.get().getBottom();
System.out.println(minStageWidth);
System.out.println(minStageHeight);
//then return the grid to it's intended size
controlsGrid.setMaxWidth(Region.USE_PREF_SIZE);
controlsGrid.setPrefWidth(Region.USE_PREF_SIZE);
primaryStage.setMinHeight(minStageHeight);
primaryStage.setMinWidth(minStageWidth);
}
Please help. i am losing sleep over this...
Here is my code. You can copy-paste and follow what I write bellow to see the problem yourself.
public class MyApp extends Application {
#Override
public void start(Stage stage) throws Exception {
Scene scene = new Scene(new MyView(), 100, 150);
stage.setScene(scene);
stage.show();
}
private class MyView extends BorderPane {
MyView() {
GridPane board = new GridPane();
int size = 3;
for (int i = 0; i < size*size; i++) {
BorderPane pane = new BorderPane();
pane.setMinSize(30, 30);
pane.setBackground(new Background(new BackgroundFill(Color.RED, null, null)));
pane.setBorder(new Border(new BorderStroke(null, BorderStrokeStyle.SOLID,
null, null, null)));
pane.setOnMousePressed(e -> {
PickResult pick = e.getPickResult();
Pane selectedNode = (Pane) pick.getIntersectedNode();
selectedNode.setBackground(new Background(new BackgroundFill(Color.GREEN, null, null)));
});
board.add(pane, i / size, i % size);
}
Box box = new Box(20d, 20d, 20d);
BorderPane boardPane = new BorderPane(box, null, null, board, null);
Group root = new Group(boardPane);
SubScene scene = new SubScene(root, USE_PREF_SIZE, USE_PREF_SIZE, true, SceneAntialiasing.BALANCED);
scene.widthProperty().bind(widthProperty());
scene.heightProperty().bind(heightProperty());
setCenter(scene);
}
}
public static void main(String[] args) throws Exception {
launch(args);
}
}
I create a subscene with a grid of squares. When i press on a square I want its background to change color. This works in 2 situations:
if I don't add the Box to the boardPane
if I don't set the scene with a depth buffer
or both. But if i both add the box and set a depth buffer, the squares don't receive the event. instead the boardPane receives it. i guess it's something to do with 2D nodes in a 3D scene.
I tried setting combinations of these methods :setPickOnBounds, setDepthTest, setMouseTransparent but nothing worked.
What's the solution?
Once you have a 3D scene, there aren't really such things as 2D nodes, everything in the scene graph has an x, y and z co-ordinate; even things that were previously treated as 2D nodes when the depth buffer was set to false.
When you place a box in your root border pane, that root border pane assumes the 3D co-ordinates of the box. For picking purposes, the box you have defined is represented in 3D space from z co-ordinates -10 to 10, so the root border pane is defined as -10 for picking purposes. The border panes that you place inside the root border pane have no z co-ordinate defined for them, so they end up at a z co-ordinate of 0, which, from the viewers perspective is behind the root border pane.
So, the root border pane is receiving clicks, but because it is now on a different z plane than the rest of its contents, the other 2D square contents you have defined do not receive clicks. One could argue that the root border pane is not rendered at all as it has no color, so it should be treated as transparent and the clicks just go through to the child nodes, but it seems that is just not how the 3D picking algorithm for JavaFX works.
For your example, to get everything in the same Z plane and picking working correctly, add the following line inside your for loop: pane.setTranslateZ(-10);.
Note: I debugged this by adding the following line to your source code (which reported to me the target of the mouse clicks and the x,y,z pick result co-ordinate for each click):
root.setOnMouseClicked(System.out::println);
My advice is to avoid using layout panes that are designed for 2D purposes (e.g. border panes) to attempt laying out elements in 3D space. The JavaFX layout panes are really only meant for 2D layout. To handle positioning in 3D space you should manage co-ordinates yourself, by just using Groups rather than anything that derives from Pane. At the very least don't try adding 3D elements into 2D layout panes as the results can be confusing (as you have discovered).
You can further separate 2D and 3D items by placing them in different sub scenes (that is really what the intention of the sub scene notion in JavaFX is I think). An example of an application with multiple sub scenes is shown in the following answer: How to create custom 3d model in JavaFX 8?
The Flex Canvas container is limited to 10,000x10,000 pixels. Yet, I've seen Flex apps that are scrolling way more than 10,000 pixels. Any idea how this can be done?
The content I want to scroll is in pieces already, but I need to add those pieces to something that can scroll vertically more than 10,000 pixels.
Depending on what you actually want to display you may be able to split your content into tiles. This is how Google Maps works, every time the map is moved the program determines which tiles are visible on the screen and loads them in. Any markers or overlays that are on the map are notified that the map has moved and determine where their new location is. If their location is off the screen they can be removed from the canvas. For example, the width of all the tiles at zoom level 20 on Google Maps is (256 pixels * 2^20) which equals 268,435,456 total pixels.
Essentially you just need to create a special Sprite that keeps track of the actual x,y location it is supposed to be positioned at. Any time the container moves you simply iterate through all of the child objects and determine where to put them.
function onCanvasScroll() {
//determine the top left coordinates of the canvas
//you will figure out how to do this depending on how the scrolling window
//is implemented
var canvas_scroll_x;
var canvas_scroll_y;
//create a bounding box for the canvas
var view_bounds = new Rectangle(canvas_scroll_x, canvas_scroll_y, canvas.width, canvas.height);
for (child in canvas) {
var x = child.actual_x - view_bounds.x;
var y = child.actual_y - view_bounds.y;
var childBounds = new Rectangle(x, y, child.width, child.height);
//determine if the component is visible on screen
if (view_bounds.intersects(child_bounds)) {
child.visible = true;
child.x = x;
child.y = y;
}
else {
child.visible = false;
}
}
}
So if you have a canvas that is positioned at (100, 20000), a sprite that is positioned at (300, 20100), and a window that is (640,408), you would place it at (200, 100) and it would be visible on the screen.
Instead of just setting visible to true or false a better approach would be to remove the items from the canvas entirely when they are not within the bounds of the view.
I have a canvas onto which I draw shapes like rectangle etc. When I move the shape using my custom mouse down/mouse move handler, the shape can go outside the parent bounds.
I am checking if the child is outside the parent's bound to snap it back:
var bounds:Rectangle = this.getBounds(this.parent);
var p:Point;
if (bounds.x <0) {
p = new Point(0,0);
p.offset(-bounds.x,0);
}
if (bounds.y <0) {
if (!p) p = new Point(0,0);
p.offset(0,-bounds.y);
}
if (bounds.y+bounds.height > this.parent.height) {
if (!p) p = new Point(0,0);
p.offset(0,-bounds.y-height+this.parent.height);
}
if (bounds.x+bounds.width > this.parent.width) {
if (!p) p = new Point(0,0);
p.offset(-bounds.x-width+this.parent.width,0);
}
if (p) {
trace("invoking snapInside ", p);
snapInside(p);
The snapInside method gets called when I go outside the left or top boundary. But when the child is dragged outside the right or bottom boundary, I find Flex/Flash runtime automatically expands the parent's height and width. So say the parent size was initially 800x600, if child Y bounds exceed 800 by say 20 pixel, I find the this.parent.height automatically resized by flex to 820!!
How do I prevent the parent from resizing when child goes outside the original bounds of the parent ?
when the parent object is created save the bounds to a var outside your function so you can call to the stored size later. If you keep checking the bounds within your function then of course it will change as the objects with in the parent change. Or set the bounds on mouseDown but not on drag so you have an updated bounds before your drag object hits the edge.