1

I have a grayscale image, this image is set to a rectangle with an ImagePattern. like this:

 ImagePattern imagePattern = new ImagePattern(new Image("File:resources/images/image.png"));
 Rectangle rectangle = new Rectangle();
 rectangle.setFill(imagePattern);

The only problem is I want the user to choose the colour of the image, so I want to change the hue of the image.

I found following question on StackOverflow, the first answer https://stackoverflow.com/a/18124868/15277155 shows how a coloured image is changed to a red image.

The only problem I have is that answer is done with an ImageView instead of an Imagepattern. Is there any way This can be done with an ImagePattern. Or that I can place the ImageView inside a rectangle?

Based on @jewelsea's comment this is the code I have.

ImagePattern imagePattern = new ImagePattern(new 
Image("File:resources/images/image.png"));
Rectangle rectangle = new Rectangle();
rectangle.setFill(imagePattern);

ColorAdjust colorAdjust = new ColorAdjust();
// define target color
Color targetColor = Color.GREEN;

double hue = map( (targetColor.getHue() + 180) % 360, 0, 360, -1, 1);
colorAdjust.setHue(hue);

// use saturation as it is enter code here
double saturation = targetColor.getSaturation();
colorAdjust.setSaturation(saturation);

double brightness = map( targetColor.getBrightness(), 0, 1, -1, 0);
colorAdjust.setBrightness(brightness);

// apply color adjustment
rectangle.setEffect(colorAdjust);
rectangle.setFill(imagePattern);

I tested this on a yellow image (PNG with transparent background, but no opacity) and it worked.

Then I tried it on an image with only colors ranging from white to black (and grey) (also a PNG with transparent background, but also with opacity in the colors) and it didn't change those colors.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Niels
  • 306
  • 2
  • 11
  • 2
    The ColorAdjust effect in the linked answer will work with any node, not just an ImageView. So, if you apply the effect to your rectangle does it provide the desired outcome? – jewelsea Nov 05 '21 at 23:04
  • @jewelsea yes and now, I tested it for a yellow image, it worked but for a grayscale image it didn't (the grayscale also has transparency), I used this question on stack: https://stackoverflow.com/questions/31587092/how-to-use-coloradjust-to-set-a-target-color, I'll post my code if you want – Niels Nov 06 '21 at 09:16
  • So, what you saying (I think) is that you can apply a ColorAdjust filter to your Rectangle and it works to adjust the color of the ImagePattern. However, you don't know what the right settings for ColorAdjust that will get you your desired color adjustment outcome or even if ColorAdjust will be capable of doing exactly what you want? Is that correct. You could post your code, I would likely be unable to help I think, Maybe somebody else could. When you do that, you will need to explain exactly what this means: "it worked but for a grayscale image it didn't", because I don't know. – jewelsea Nov 06 '21 at 09:23
  • 1
    @jewelsea I edited the question, with code and explanation – Niels Nov 06 '21 at 09:29
  • Off topic, but that is not a good way to get a resource. It will break if you package your app in a jar. See [Where to put resource files in JavaFX](https://edencoding.com/where-to-put-resource-files-in-javafx/) on how to find them. – jewelsea Nov 06 '21 at 09:32
  • Thanks, I'll also change it later – Niels Nov 06 '21 at 09:34
  • To get debugging help you must provide an [mcve] AND a clear statement of the problem. That means, at least, an app that can compile and replicate the issue without change and does nothing else and all required resources, including images, to replicate that. An image what the the adjusted image is supposed to look up would also need to be supplied. And any algorithm used for the "map" function and a description of those parameters. Then somebody would need to be aware, interested and capable enough to assist in an answer. Just providing an FYI so that you know expectation-wise. – jewelsea Nov 06 '21 at 09:46
  • @jewelsea I see, you answered my original question, I got the coloradjust working on the imagepattern, so If you want you can post the answer and I'll accept it, I think I'll manage with debugging why the outcome color isn't always the desired color. – Niels Nov 06 '21 at 09:51
  • 1
    Sounds like a plan. I noticed that what you do and what I was doing in the linked question are a bit different. I just used the color adjust to desaturate the image and take all the color out it. I then chained that color adjust with another effect. The blend took the adjusted monochrome image and multiplied it with a color input to color image just shades of the input color. What you are trying to do is use the color adjustment to get your required outcome, which is fine if you know how to do it, it is just different from what I was doing, which is also probably fine. – jewelsea Nov 06 '21 at 09:58
  • 1
    If you get stuck you always ask a new more targeted question following the guidelines provided in the comments and you may be able to get some more assistance, especially if you manage to get color and image manipulation experts involved and people not specifically working just on JavaFX. – jewelsea Nov 06 '21 at 10:00

1 Answers1

1

The ColorAdjust effect will work with any node, not just an ImageView.

So you can apply the ColorAdjust effect to your rectangle, which is filled with the ImagePattern, and the effect will be applied to the ImagePattern.

jewelsea
  • 150,031
  • 14
  • 366
  • 406