英文:
Use of ColorPicker on an image in JavaFX
问题
我有一个在ImageView中的图像。我想要做的是给它添加颜色。基本上就像是在图像上加一层颜色。所以我尝试使用ColorPicker来给T恤图像添加颜色，但我不知道如何做到这一点。我已经尝试过与ColorAdjust类一起使用，但T恤上的颜色与我从ColorPicker中选择的颜色不一样。
我正在使用SceneBuilder，顺便说一下。
GUI
T恤
@FXML
private void changecolor(ActionEvent event) {
Color mycolor = mycolorpicker.getValue();
label.setBackground(new Background(new BackgroundFill(mycolor, null, null)));
Image img = new Image(getClass().getResourceAsStream("tshirt7.PNG"));
imageV.setImage(img);
ColorAdjust colorAdjust = new ColorAdjust();
colorAdjust.setHue((mycolor.getHue() / 360));
colorAdjust.setSaturation(mycolor.getSaturation());
colorAdjust.setBrightness(mycolor.getBrightness() - 1);
imageV.setEffect(colorAdjust);
}
我期望图像上的颜色与我从ColorPicker中选择的颜色相同。但是T恤上的颜色不准确。
<details>
<summary>英文:</summary>
I have an image in the imageview. What I want to do is add color to it. Basically it's like a layer of color on the image. So I am trying to add color to a t-shirt image using the ColorPicker and I don't know how I can do that. I've tried it along with the colorAdjust class but its giving me a different color on the tshirt than the one I've chosen from the ColorPicker.
I am using SceneBuilder, btw.
GUI
[![GUI][1]][1]
T-shirt
[![T-shirt][2]][2]
@FXML
private void changecolor(ActionEvent event) {
Color mycolor=mycolorpicker.getValue();
label.setBackground(new Background(new BackgroundFill(mycolor,null,null)));
Image img=new Image(getClass().getResourceAsStream("tshirt7.PNG"));
imageV.setImage(img);
ColorAdjust colorAdjust = new ColorAdjust();
colorAdjust.setHue((mycolor.getHue()/360));
colorAdjust.setSaturation(mycolor.getSaturation());
colorAdjust.setBrightness(mycolor.getBrightness()-1);
imageV.setEffect(colorAdjust);
}
I was expecting the same color on the image as the one I've chosen from ColorPicker. But the color on the tshirt is not accurate.
[1]: https://i.stack.imgur.com/yUNnY.png
[2]: https://i.stack.imgur.com/UaZEl.png
</details>
# 答案1
**得分**: 2
如何从颜色选择器中为图像上色。
* 确保您的`png`输入图像具有适当的透明颜色区域（您的示例T恤图像具有）。
* 定义一个[ColorPicker][1]来选择您的颜色。
* 将[选择的颜色][2]绑定到一个[多重混合][3]的[ColorInput][5]效果上，该效果作用于一个[去饱和][6]的单色[调整][7]或[灰度化][8]图像，图像由图像定义的剪辑所裁剪。
更多信息请参见：
* https://stackoverflow.com/questions/18124364/how-to-change-color-of-image-in-javafx/18124868#18124868
**示例**
将使用的图像（我使用了您问题中提供的图像）放入与放置示例代码的包相同的目录结构的资源文件夹中。
![紫色][10]
![橙色][11]
```java
import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.effect.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import java.util.Objects;
public class TShirtDesigner extends Application {
@Override
public void start(Stage stage) throws Exception {
ColorPicker colorPicker = new ColorPicker();
Image tshirtImage = new Image(
Objects.requireNonNull(
TShirtDesigner.class.getResource(
"tshirt.png"
)
).toExternalForm()
);
ImageView tshirt = new ImageView(tshirtImage);
tshirt.setClip(new ImageView(tshirtImage));
bindImageColor(
tshirt,
colorPicker.valueProperty()
);
VBox layout = new VBox(
10,
colorPicker,
tshirt
);
layout.setAlignment(Pos.CENTER);
layout.setPadding(new Insets(10));
Scene scene = new Scene(layout);
stage.setScene(scene);
stage.show();
}
private static void bindImageColor(
ImageView imageView,
ObjectProperty<Color> colorProperty
) {
ColorInput colorInput = new ColorInput(
0,
0,
imageView.getImage().getWidth(),
imageView.getImage().getHeight(),
colorProperty.get()
);
colorInput.paintProperty().bind(
colorProperty
);
ColorAdjust monochrome = new ColorAdjust();
monochrome.setSaturation(-1.0);
Blend colorBlend = new Blend(
BlendMode.MULTIPLY,
monochrome,
colorInput
);
imageView.setEffect(colorBlend);
}
public static void main(String[] args) {
launch(args);
}
}
英文:
How to color an image from a color picker.
- Ensure your
pnginput image has appropriate areas of transparent color (your example t-shirt image does). - Define a ColorPicker to pick your color.
- Bind the picked color to a MULTIPLY blended ColorInput effect on a desaturated monochrome adjusted or grayscaled image, with the image clipped by a clip defined by the image.
For more info see:
Example
Place the image used (I used the image provided in your question) in a resource folder with the same directory structure as the package you place the sample code in.
import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.effect.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import java.util.Objects;
public class TShirtDesigner extends Application {
@Override
public void start(Stage stage) throws Exception {
ColorPicker colorPicker = new ColorPicker();
Image tshirtImage = new Image(
Objects.requireNonNull(
TShirtDesigner.class.getResource(
"tshirt.png"
)
).toExternalForm()
);
ImageView tshirt = new ImageView(tshirtImage);
tshirt.setClip(new ImageView(tshirtImage));
bindImageColor(
tshirt,
colorPicker.valueProperty()
);
VBox layout = new VBox(
10,
colorPicker,
tshirt
);
layout.setAlignment(Pos.CENTER);
layout.setPadding(new Insets(10));
Scene scene = new Scene(layout);
stage.setScene(scene);
stage.show();
}
private static void bindImageColor(
ImageView imageView,
ObjectProperty<Color> colorProperty
) {
ColorInput colorInput = new ColorInput(
0,
0,
imageView.getImage().getWidth(),
imageView.getImage().getHeight(),
colorProperty.get()
);
colorInput.paintProperty().bind(
colorProperty
);
ColorAdjust monochrome = new ColorAdjust();
monochrome.setSaturation(-1.0);
Blend colorBlend = new Blend(
BlendMode.MULTIPLY,
monochrome,
colorInput
);
imageView.setEffect(colorBlend);
}
public static void main(String[] args) {
launch(args);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论