I am creating a board game (first ported to JavaFX) in which the player must kill the opponent's piece going through a loop.
The above is provided on the Wikipedia page for Surakurta (another name for Permanin). But, I have been only able to build a grid of this sort:
How can I create those roundabouts in the corners?
Implementation details for already built grid: GridPane filled with 36 BoardInput extends javafx.scene.control.Button objects. These objects are special because they automatically create a Background with three BackgroundFill objects - horizontal line, vertical line, and the pebble circular fill.
Use a Path. ArcTo elements allow you to create the circular parts. HLineTo, VLineTo and ClosePath can be used for the straight sections:
Furthermore I don't recommend using BackgroundFills. I'd prefer overlaying invisible buttons on top of the board visuals or handling MouseEvents for the GridPane itself.
Example
private static ArcTo createArc(double radius, double dx, double dy) {
ArcTo result = new ArcTo(radius, radius, 0, dx, dy, true, true);
result.setAbsolute(false);
return result;
}
private static HLineTo createHLine(double length) {
HLineTo result = new HLineTo(length);
result.setAbsolute(false);
return result;
}
private static VLineTo createVLine(double length) {
VLineTo result = new VLineTo(length);
result.setAbsolute(false);
return result;
}
private static Path createPath(double radius, double midSize, Color storke) {
final double lineLength = 2 * radius + midSize;
Path result = new Path(
new MoveTo(radius, 2 * radius), // start at left end of top horizontal line
createArc(radius, radius, -radius), // top left loop
createVLine(lineLength), // down
createArc(radius, -radius, -radius), // bottom left loop
createHLine(lineLength), // right
createArc(radius, -radius, radius), // bottom right loop
createVLine(-lineLength), // up
createArc(radius, radius, radius),
new ClosePath() // left
);
result.setStroke(storke);
result.setStrokeWidth(10);
return result;
}
#Override
public void start(Stage primaryStage) throws Exception {
Scene scene = new Scene(new StackPane(
createPath(100, 50, Color.GREEN),
createPath(50, 150, Color.AQUA)
));
primaryStage.setScene(scene);
primaryStage.show();
}
Output
Related
I am trying to build a series chart using JavaFX, where data is inserted dynamically.
Each time that a new value is inserted I would like to check if this is the highest value so far, and if so, I want to draw an horizontal line to show that this is the maximum value.
In JFree chart I would have used a ValueMarker, but I am trying to do the same with JavaFX.
I tried using the Line object, but it is definitely not the same, because I cannot provide the Chart values, it takes the relative pixel positions in the windows.
Here is the screenshot of chart I want to achieve:
http://postimg.org/image/s5fkupsuz/
Any suggestions?
Thank you.
To convert chart values to pixels you can use method NumberAxis#getDisplayPosition() which return actual coordinates of the chart nodes.
Although these coordinates are relative to chart area, which you can find out by next code:
Node chartArea = chart.lookup(".chart-plot-background");
Bounds chartAreaBounds = chartArea.localToScene(chartArea.getBoundsInLocal());
Note localToScene() method which allows you to convert any coordinates to Scene ones. Thus you can use them to update your value marker coordinates. Make sure you make localToScene call after your Scene have been shown.
See sample program below which produces next chart:
public class LineChartValueMarker extends Application {
private Line valueMarker = new Line();
private XYChart.Series<Number, Number> series = new XYChart.Series<>();
private NumberAxis yAxis;
private double yShift;
private void updateMarker() {
// find maximal y value
double max = 0;
for (Data<Number, Number> value : series.getData()) {
double y = value.getYValue().doubleValue();
if (y > max) {
max = y;
}
}
// find pixel position of that value
double displayPosition = yAxis.getDisplayPosition(max);
// update marker
valueMarker.setStartY(yShift + displayPosition);
valueMarker.setEndY(yShift + displayPosition);
}
#Override
public void start(Stage stage) {
LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(0, 100, 10), yAxis = new NumberAxis(0, 100, 10));
series.getData().add(new XYChart.Data(0, 0));
series.getData().add(new XYChart.Data(10, 20));
chart.getData().addAll(series);
Pane pane = new Pane();
pane.getChildren().addAll(chart, valueMarker);
Scene scene = new Scene(pane);
// add new value on mouseclick for testing
chart.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
series.getData().add(new XYChart.Data(series.getData().size() * 10, 30 + 50 * new Random().nextDouble()));
updateMarker();
}
});
stage.setScene(scene);
stage.show();
// find chart area Node
Node chartArea = chart.lookup(".chart-plot-background");
Bounds chartAreaBounds = chartArea.localToScene(chartArea.getBoundsInLocal());
// remember scene position of chart area
yShift = chartAreaBounds.getMinY();
// set x parameters of the valueMarker to chart area bounds
valueMarker.setStartX(chartAreaBounds.getMinX());
valueMarker.setEndX(chartAreaBounds.getMaxX());
updateMarker();
}
public static void main(String[] args) {
launch();
}
}
I am trying to draw a texture on a sphere with JavaFX (16). I add the material with the texture but the texture is stretched to the whole surface. It is possible to set the texture on only a portion of the surface? Like the image below (not mine, taken from SO):
My code so far (very trivial):
public void start(Stage stage) throws Exception {
Sphere sphere = new Sphere(200);
PhongMaterial material = new PhongMaterial();
material.setDiffuseMap(new Image(new File("picture.png").toURI().toURL().toExternalForm()));
sphere.setMaterial(material);
Group group = new Group(sphere);
Scene scene = new Scene( new StackPane(group), 640, 480, true, SceneAntialiasing.BALANCED);
scene.setCamera(new PerspectiveCamera());
stage.setScene(scene);
stage.show();
}
The reason why the texture you apply is stretched to the whole sphere is that the texture coordinates that define the Sphere mesh are mapping the whole sphere surface, and therefore, when you apply a diffuse image, it is translated 1-1 to that surface.
You could create a custom mesh, with custom texture coordinates values, but that can be more complex.
Another option is to create the diffuse image "on demand", based on your needs.
For a sphere, a 2D image that can be wrapped around the 3D sphere can be defined by a 2*r*PI x 2*r rectangular container (a JavaFX Pane for our purposes).
Then, you can draw inside your images, scaling and translating them accordingly.
Finally, you need a way to convert that drawing into an image, and for that you can use Scene::snapshot.
Just to play around with this idea, I'll create a rectangular grid that will be wrapped around the sphere, in order to have some kind of a coordinate system.
private Image getTexture(double r) {
double h = 2 * r;
double w = 2 * r * 3.125; // 3.125 is ~ PI, rounded to get perfect squares.
Pane pane = new Pane();
pane.setPrefSize(w, h);
pane.getStyleClass().add("pane-grid");
Group rootAux = new Group(pane);
Scene sceneAux = new Scene(rootAux, rootAux.getBoundsInLocal().getWidth(), rootAux.getBoundsInLocal().getHeight());
sceneAux.getStylesheets().add(getClass().getResource("/style.css").toExternalForm());
SnapshotParameters sp = new SnapshotParameters();
return rootAux.snapshot(sp, null);
}
where style.css has:
.pane-grid {
-fx-background-color: #D3D3D333,
linear-gradient(from 0.5px 0.0px to 50.5px 0.0px, repeat, black 5%, transparent 5%),
linear-gradient(from 0.0px 0.5px to 0.0px 50.5px, repeat, black 5%, transparent 5%);
}
.pane-solid {
-fx-background-color: black;
}
(based on this answer)
With a radius of 400, you get this image:
each square is 50x50, and there are 50x16 squares.
If you apply this diffuse map to an Sphere:
#Override
public void start(Stage stage) {
PhongMaterial earthMaterial = new PhongMaterial();
earthMaterial.setDiffuseMap(getTexture(400));
final Sphere earth = new Sphere(400);
earth.setMaterial(earthMaterial);
Scene scene = new Scene(root, 800, 600, true);
scene.setFill(Color.WHITESMOKE);
stage.setScene(scene);
stage.show();
}
you get:
In theory, now you could fill any of the grid squares, like:
private Image getTexture(double r) throws IOException {
double h = 2 * r;
double w = 2 * r * 3.125;
Pane pane = new Pane();
pane.setPrefSize(w, h);
pane.getStyleClass().add("pane-grid");
Rectangle rectangle = new Rectangle(50, 50, Color.RED);
rectangle.setStroke(Color.WHITE);
rectangle.setStrokeWidth(2);
// fill rectangle at 20 x 10
rectangle.setTranslateX(20 * 50 + 1);
rectangle.setTranslateY(10 * 50 + 1);
Group rootAux = new Group(pane, rectangle);
...
with the result:
Now that you have a well positioned image (for now just a red rectangle), you can get rid of the grid, and simply use a black color for the texture image:
private Image getTexture(double r) throws IOException {
double h = 2 * r;
double w = 2 * r * 3.125;
Pane pane = new Pane();
pane.setPrefSize(w, h);
// pane.getStyleClass().add("pane-grid");
pane.getStyleClass().add("pane-solid");
resulting in:
Now it is up to you to apply this idea to your needs. Note that you can use an ImageView with size 50x50, or 100x100, ... instead of the red rectangle, so you can use a more complex image.
I have been having this issue for a long time, and no matter what answers on here I try I keep having an issue.
This is a previous question of mine that had no resolution to it JavaFX 3D PerspectiveCamera affects drag position of a node
(nor did the answers/links provided in the question)
Essentially I am trying to drag a node while keeping the mouse position at to the clicked position of the node while dragging.
The original thought was to do an event.getScreenX() or event.getSceneX() to get the initial position on mouseClicked, and then compare/update in the mouse dragged.
The issue is that when I zoom the camera in and out(camera.setTranslateZ()), for some reason the values will increase/decrease depending on the zoom, i.e., the node drags slower/stays with the mouse when the camera is zoomed out.
For what it's worth I also have scaled the main node by 10, which I think might have something to do with this as one of the examples did seem to break when the scale and/or camera were changed; however the example also doesn't work, with no scale.
Does anyone have any idea? It's extremely frustrating with how simple this task is, yet hard to actually accomplish. I would think that as the mouse would drag, regardless if it dragged 1 pixel with the mouse zoomed in, or 100 pixels with the mouse zoomed out that it wouldn't cause this issue, so I'm wondering if there is some sort of bug with this? Any thoughts are appreciated, thank you.
public class Move extends Application {
double x0,xDiff;
double y0,yDiff;
#Override
public void start(Stage primaryStage) {
Box b = new Box(100,100,1);
b.setLayoutX(0);
b.setLayoutY(0);
// b.setTranslateZ(20000);
Pane root = new Pane();
root.getChildren().add(b);
PhongMaterial p = new PhongMaterial();
p.setDiffuseColor(Color.RED);
b.setMaterial(p);
Scene scene = new Scene(root, 2000, 1250,true);
PerspectiveCamera camera = new PerspectiveCamera(true);
camera.setTranslateZ(-1000);
camera.setFarClip(2000);
scene.setCamera(camera);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
b.setOnMousePressed(event
->{
x0 = event.getSceneX();
y0 = event.getSceneY();
event.consume();
});
b.setOnMouseDragged(event
->{
xDiff = event.getSceneX() - x0;
yDiff = event.getSceneY() - y0;
b.setLayoutX(b.getLayoutX() + xDiff);
b.setLayoutY(b.getLayoutY() + yDiff);
x0 = event.getSceneX();
y0 = event.getSceneY();
});
primaryStage.setOnScroll(event
->{
if (event.getDeltaY() > 0)
{
camera.setTranslateZ(camera.getTranslateZ() + 45);
}
else
{
camera.setTranslateZ(camera.getTranslateZ() - 45);
}
});
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
I am making a simple simulation, and have had a good amount of trouble finding the X and Y coordinates of a rotated, weirdly sized, imageView node. (The blue bit is the front)
The goal is to find out an XY coordinate relative to the direction that the imageView is pointing, after it has been rotated. I can find the angle that the imageView is at relative to its starting position but I cannot figure out how to get an XY coordinate of the imageView relative to this angle. Since the .setRotate(angle) method does not change the X and Y location of the imageView, how should I go about finding a point that the imageView is facing?
Minimal example of the rotation and imageView I am using:
Main.java
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
Group root = new Group();
primaryStage.setScene(new Scene(root, 500, 500));
Image robotImage = null;
try {
robotImage = new Image(new FileInputStream("res\\robot.png"));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
ImageView robot = new ImageView(robotImage);
robot.setLayoutX(125);
robot.setLayoutY(125);
System.out.println("PreRotate X: " + robot.getLayoutX() + "PreRotate Y: " + robot.getLayoutY());
robot.setRotate(45);
System.out.println("PostRotate X: " + robot.getLayoutX() + "PostRotate Y: " + robot.getLayoutY());
root.getChildren().add(robot);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I have already tried using the bounds of the imageView along with lines that lay on top of the imageView, but that requires me to find the new max/min x/y every time that the imageView changes its max/min x/y.
For example:
if (turnAngle < 35) {
directionLine.setStartX(robotLeftRightAngle.getBoundsInParent().getMaxX());
directionLine.setStartY(robotLeftRightAngle.getBoundsInParent().getMinY());
directionLine.setEndX(robotRightLeftAngle.getBoundsInParent().getMinX() + ((robotLeftRightAngle.getBoundsInParent().getMaxX() - robotRightLeftAngle.getBoundsInParent().getMinX()) / 2));
directionLine.setEndY(robotRightLeftAngle.getBoundsInParent().getMinY() + ((robotLeftRightAngle.getBoundsInParent().getMinY() - robotRightLeftAngle.getBoundsInParent().getMinY()) / 2));
}
else if (turnAngle < 55) {
directionLine.setStartX(robotLeftRightAngle.getBoundsInParent().getMaxX());
directionLine.setStartY(robotLeftRightAngle.getBoundsInParent().getMaxY());
directionLine.setEndX(robotRightLeftAngle.getBoundsInParent().getMinX() + ((robotLeftRightAngle.getBoundsInParent().getMaxX() - robotRightLeftAngle.getBoundsInParent().getMinX()) / 2));
directionLine.setEndY(robotRightLeftAngle.getBoundsInParent().getMinY() + ((robotLeftRightAngle.getBoundsInParent().getMaxY() - robotRightLeftAngle.getBoundsInParent().getMinY()) / 2));
}
And so on all the way to 360. DRY yikes.
How should I approach this? Am I using the wrong transformation? Did I not see a method that can be used for this? I know that there must be a better approach. Thanks for reading.
I'm not sure I 100% understand the question. The transformations between coordinate systems but it's hard to tell the coordinate systems you need to convert between from your description, so I assume you want to convert between the coordinate system of robot to the coordinate system of group.
It's possible to use localToParent to convert from the coordinate system of a node to that of the parent which accomodates for all transforms. (parentToLocal would achieve the inverse transformation, but this does not seem to be the required transformation in this case.)
The following example modifies the start and end points of a line to the coordinates of the top left and a point 100 px above of the Rectangle in the Rectangle's coordinate system:
#Override
public void start(Stage primaryStage) {
Group root = new Group();
primaryStage.setScene(new Scene(root, 500, 500));
Rectangle robot = new Rectangle(100, 20, Color.RED);
robot.setLayoutX(125);
robot.setLayoutY(125);
Line line = new Line(125, 125, 125, 25);
robot.rotateProperty().addListener(o -> {
Point2D start = robot.localToParent(0, 0);
Point2D end = robot.localToParent(0, -100);
line.setStartX(start.getX());
line.setStartY(start.getY());
line.setEndX(end.getX());
line.setEndY(end.getY());
});
RotateTransition rotateTransition = new RotateTransition(Duration.seconds(5), robot);
rotateTransition.setCycleCount(Animation.INDEFINITE);
rotateTransition.setFromAngle(0);
rotateTransition.setToAngle(360);
rotateTransition.setInterpolator(Interpolator.LINEAR);
rotateTransition.play();
root.getChildren().addAll(robot, line);
primaryStage.show();
}
Up till now I have used the code given below to load image in a new new JFrame and coordinates of pixels of image are hard-coded in the code itself. However, I wish to do it dynamically i.e mark points clicked by mouse and store all the coordinates in an array or so.
The code is running properly, Image is chosen using JFileChooser in another class and the path is passed as a parameter to this class.
Please help me out.
public class GraphicsSet extends JFrame{
Font f ;
BufferedImage baseImage ;
File file ;
String Gimage;
JFrame imageFrame;
public GraphicsSet(String Image)
{
super("Frame") ;
// imageFrame = new JFrame("Click on to select points");
file = new File(Image) ;
Gimage = Image;
try
{
baseImage = ImageIO.read(file) ;
}
catch(IOException e)
{
System.out.println(e) ;
}
int imageWidth = baseImage.getWidth();
int imageHeight = baseImage.getHeight();
System.out.println(imageWidth);
setBounds(0,0,imageWidth,imageHeight) ;
setVisible(true) ;
//setDefaultCloseOperation (EXIT_ON_CLOSE) ;
}
public void paint(Graphics g)
{
g.drawImage(baseImage, 0, 0, null) ;
String[] coordsText = new String[]{
"264.33,329.94","244.24,382.57","243.00,328.88",
"264.33,329.94","272.06,331.59","278.30,341.00",
"284.28,350.02","282.18,367.78","275.24,375.79",
"272.89,378.50","269.26,380.27","266.00,381.66",
"259.36,384.50","258.52,383.52","252.00,383.09",
"244.24,382.57","238.62,383.56","232.21,377.61",
"228.01,373.71","225.52,365.66","226.13,360.00",
"226.13,360.00","227.55,354.00","227.55,354.00",
"228.20,350.96","227.74,347.67","228.74,345.00",
"230.78,339.55","237.90,331.81","243.00,328.88",
"248.10,327.42","249.02,328.30","254.00,328.88"
};
// The polygons will be stored in instances of Path2D.Float. After we create an instance
// of Path2D.Float we must set its vertices -- the easiest way to do this is through the
// moveTo(x,y) and lineTo(x,y) methods.
Path2D.Float regionOfInterest = new Path2D.Float();
// We must store the first X,Y coordinates so we can close the path, by creating a line
// to the last point to the first one.
boolean isFirst = true;
double firstX=0,firstY=0;
// For each of the X,Y coordinates, parse and store them on the Path2D.Float.
for(String s:coordsText)
{
String[] xy = s.split(",");
double x = Double.parseDouble(xy[0]);
double y = Double.parseDouble(xy[1]);
if (isFirst)
{
regionOfInterest.moveTo(x,y);
firstX = x;
firstY = y;
isFirst = false;
}
else { regionOfInterest.lineTo(x,y); }
}
// Close the path.
regionOfInterest.lineTo(firstX,firstY);
// We have the path that define the region of interest. In order to dim the image regions
// outside of this path we must create another path that contains everything but the
// region of interest.
// First we create a path for the whole image -- a rectangle with the image's coordinates.
Path2D.Float pathForWholeImage = new Path2D.Float();
pathForWholeImage.moveTo(0,0);
pathForWholeImage.lineTo(baseImage.getWidth(),0);
pathForWholeImage.lineTo(baseImage.getWidth(),baseImage.getHeight());
pathForWholeImage.lineTo(0,baseImage.getHeight());
pathForWholeImage.lineTo(0,0);
// In order to use Constructive Area Geometry (CAG) operations we must use the Area class.
// First we create an Area with the path for the whole image...
Area wholeImage = new Area(pathForWholeImage);
// .. then we subtract the region of interest from this Area.
wholeImage.subtract(new Area(regionOfInterest));
// Now we have a Path2D.Float for the region of interest and an Area for the rest of the image.
// To draw and paint them we need a graphic context, which we will get from the image itself.
Graphics2D g2d = (Graphics2D)baseImage.getGraphics();
// We want antialiasing!
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
// Fill the rest of the image with a transparent (100/255) white.
g2d.setColor(new Color(255,255,255,100));
g2d.fill(wholeImage);
// Draw the region of interest with a thick, almost opaque red line.
g2d.setStroke(new BasicStroke(5f));
g2d.setColor(new Color(255,0,0,200));
g2d.draw(regionOfInterest);
// Create a new Frame to show the results.
JFrame frame = new JFrame();
//imageFrame.setTitle("Highlighting image regions");
// Create an ImageIcon/Label to show the image.
ImageIcon icon = new ImageIcon(baseImage);
JLabel label = new JLabel(icon);
// Add it to the content pane.
imageFrame.getContentPane().add(new JScrollPane(label));
// Set some GUI parameters.
//imageFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
imageFrame.pack();
//frame.setVisible(true);
}
If I understood well what you need, this could help:
ArrayList<Float> coordsX = new ArrayList<Float>();
ArrayList<Float> coordsY = new ArrayList<Float>();
addMouseMotionListener(this);
this.addMouseListener(new MouseAdapter() {
#Override
public void mousePressed(MouseEvent e){
coordsX.add(e.getX()); //Storing coordinate X
coordsY.add(e.getY()); //Storing coordinate Y
//Add this code to draw a circle each time you click.
int r = 6; //Radius of the circle/point.
int x = e.getX()-(r/2); //Position X (mouse will be in the center of the point)
int y = e.getY()-(r/2); //Position Y (mouse will be in the center of the point)
Graphics g = getGraphics(); //Getting the Graphic object
g.setColor(Color.red); //Setting color to red
g.fillOval(x, y, r, r); //Drawing the circle/point
g.dispose();
}
});
Just an example that I think solve what you need, how to store coordinates is up to you.
UPDATE:
In order to draw a point use fillOval(x, y, r, r) method from Graphics class.
Btw, if you use mouseClicked() event, sometimes you will see how your clicks appear to not have effect (to click doesn't draw or store anything), this is because the program is detecting the mouseDragged() event from MouseMotionListener Interface. To solve this you can change the current event mouseClicked() for mousePressed() event from MouseListener Interface as I already did in the code.
If you want a bigger point, just increase its radius, or decrease it if you want it smaller.