0

I'm currently working on a stock market program that teaches students how to interact with the stock market. An issue that I'm working on right now revolves around the issue of efficiency and memory. I make all of my 2D icons (such as a settings icon, portfolio icons, etc) in adobe illustrator, I export those files as png files, and throw them into my program. I currently use JavaFX, and one of the features of JavaFX is what's called imageView, which is a method that handles the opening and viewing of images.

So let's say that the user would like to press on the Settings icon in the game, I would like to change the settings icon to a darker or lighter color when the user hovers over that icon in order to provide the user with a better user experience (UX) at the moment, I use two different images and remove one from the frame, and replace it with another, which is highly inefficient.

I know that JavaFX has a Shape class that inherits many methods such as Fill, or setFill, but these methods can only affect those of the Shape class.

My question is, "How can I convert an image that is imported into the project, into something that I can use methods such as setFill and Fill on"

Kellen Miller
  • 7
  • 2
  • 1
    Image analysis is too broad a topic to completely introduce you to it here. JavaFX itself does not provide this kind of functionality. Afaik Adobe Illustrator allows you to export as SVG. If you do that you could simply pass the `d` attribute values of``elements to `SVGPath`; there are also other solutions for loading svg: https://stackoverflow.com/questions/12436274/svg-image-in-javafx-2-2 other than that you may be able to achieve similar effects by overlaying the image using the appropriate blend mode.E.g. multiply would allow you to darken the color by overlaying with a graysc image. – fabian Jan 14 '20 at 17:08
  • Consider placing your icons in buttons instead of the approach you are currently taking. Buttons are provided to provide feedback to the user which clicked and hovered. If the default styling of the button isn't what you want, you can customize the button style to closer fit what you desire. – jewelsea Jan 14 '20 at 18:56
  • @jewelsea I'll take a look around the API to see if that's what I want to do- thanks! – Kellen Miller Jan 15 '20 at 18:37

1 Answers1

2

If you're only aiming for basic changes such as darkening or lightning your icons, you can look at the Effects part of javaFx, you can read about it here, or else you can import your images as SVG as suggested in the comments

If you're planning to do it using Effects, you can achieve a darken-on-hover effect using the ColorAdjust Effect by setting the brightness value to something negative (the brightness in ColorAdjust ranges between -1 and +1 where 0 is the default) as in the following example

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage s) {
        ImageView image = new ImageView(new Image("img.png"));

        ColorAdjust darker = new ColorAdjust();
        darker.setBrightness(-.3);

        image.setOnMouseEntered(e-> {
            image.setEffect(darker);
        });

        image.setOnMouseExited(e-> {
            image.setEffect(null);
        });

        s.setScene(new Scene(new StackPane(image)));
        s.show();
    }

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

Changing the color of an image might involve adjusting the hue using ColorAdjust by setting the hue value

ColorAdjust hueShift = new ColorAdjust();
hueShift.setHue(-.3);

image.setOnMouseEntered(e-> {
    image.setEffect(hueShift);
});

image.setOnMouseExited(e-> {
    image.setEffect(null);
});

You can combine effects by setting effects as input to other effects, so for example, if you want to darken a Node and blur it at the same time you can set the blur effect as input to the darkening colorAdjust

GaussianBlur blur = new GaussianBlur();
blur.setRadius(10);

ColorAdjust darker = new ColorAdjust();
darker.setBrightness(-.3);

darker.setInput(blur);

image.setOnMouseEntered(e-> {
    image.setEffect(darker);
});

image.setOnMouseExited(e-> {
    image.setEffect(null);
});
SDIDSA
  • 894
  • 10
  • 19