值得练手的JavaGUI项目——色彩调节器的实现【附完整源码】

简介:

 

目录

像素RGB值

窗体模块设计

完整源码


Hello!大家好!我是努力赚钱买生发水的灰小猿!

最近在做开发的时候有用到红、绿、蓝三色号的色彩调节,然后想使用某种色彩还需要去相关的网站上进行查询很是麻烦,于是就想着利用Java的GUI开发一个简单的调色器。可以自行调节色彩并且获取到对应的红绿蓝三种色号。

先来看一波效果图:

image.gif编辑

其实调色器的基本设计思路非常简单:

利用Java窗体,设置红。绿。蓝三种滑块、然后当我们拖动滑块使三种颜色的RGB值发生改变时,利用ChangeListener对事件进行监听,获取到三种颜色对应的RGB值,并且在窗体中将对应得到的颜色显示出来即可。

这里可能有小伙伴会问了,那么是RGB值呢?大灰狼给大家科普一下:

 

像素RGB值

其实就像我们平常所看到的所有图片,无论是彩色照还是黑白照,其实它们都是有色彩的,更加神奇的是,我们肉眼所看到的所有色彩几乎都是由红(Red)、绿(Green)、蓝(Blue)经过不同深度的调色后得到的,而RGB色彩模式就是是工业界的一种颜色标准,是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

所以RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。所以也可以说,我们所看到的所有具有色彩的图片都是由这三种颜色调出来的。

 

窗体模块设计

知道了这些以后,就是调色器的模块设计了。

首先是设置调色器窗体和字体,并且根据我们的需要将窗体进行简单的面板布局,在这里我们可以将窗体划分为一行三列,即:第一列摆放三种滑块、第二列显示三种颜色的RGB值、第三列显示当前得到的颜色

setTitle("调色器");
setSize(600, 300);
setLayout(new GridLayout(1,3)); //将窗体进行布局
Font font1 = new Font("楷体", Font.PLAIN, 20);
//设置一个面板,存放滑块
JPanel jp_slide = new JPanel(new GridLayout(3,2));
add(jp_slide);
//设置另一个面板,存放显示色号的控件
JPanel jp_color = new JPanel(new GridLayout(3,1));
add(jp_color);

image.gif

在第一个面板中设置红、绿、蓝三种颜色的滑块:

//设置颜色提示标签
JLabel radtext = new JLabel("红色");
radtext.setFont(font1);
JLabel greentext = new JLabel("绿色");
greentext.setFont(font1);
JLabel bluetext = new JLabel("蓝色");
bluetext.setFont(font1);
js_red = new JSlider(0,255,255); //设置红色滑块
js_green = new JSlider(0,255,0); //设置绿色滑块
js_blue = new JSlider(0,255,0); //设置蓝色滑块
jp_slide.add(radtext);
jp_slide.add(js_red);
jp_slide.add(greentext);
jp_slide.add(js_green);
jp_slide.add(bluetext);
jp_slide.add(js_blue);

image.gif

在进行滑块的设置中,我们用到了JSlider控件,也就是滑块控件,在该控件后面对应的三个参数分别是滑块的最小值,滑块的最大值,滑块初始时的默认位置,如代表红色RGB值的滑块,最小值是0,最大值是255,当程序运行时滑块默认处于的位置是255。

在第二个面板中摆放显示颜色RGB值的控件

//设置显示颜色色号控件
jt_red = new JTextArea("255");
jt_red.setFont(font1);
jt_green = new JTextArea("0");
jt_green.setFont(font1);
jt_blue = new JTextArea("0");
jt_blue.setFont(font1);
jp_color.add(jt_red);
jp_color.add(jt_green);
jp_color.add(jt_blue);

image.gif

最后进行颜色显示区域的摆放

//设置颜色显示区域
colorLB = new JTable();
colorLB.setBackground(Color.red);
add(colorLB);

image.gif

现在调色器中的控件基本上都设置已经完成了,来看一波效果图:

image.gif编辑

但是现在我们拖动滑块,在颜色显示区域是没有变化的,因为我们还没有给控件添加相应的事件监听。

 

接下来就是我们对红、绿、蓝三种滑块的RGB值进行监听,并且在RGB值显示区域和色彩显示区域作出相应的响应。

在这里我们需要调用ChangeListener接口,该接口是ChangeEvent事件的监听接口,ChangeEvent事件在组件值改变的时候会触发,就比如说我们这里用到的滑块的值改变。同时,继承ChangeListener 这个接口的类(监听者)需要重写stateChanged(ChangeEvent e1) 方法,在该方法中对事件进行处理。

在该项目的stateChanged(ChangeEvent e1) 方法中,我们需要获取到三种滑块的RGB值,然后将对应的数值和颜色在窗体进行显示:

@Override
public void stateChanged(ChangeEvent e) {
// TODO Auto-generated method stub
r = js_red.getValue(); //获取到红色滑块的RGB值
g = js_green.getValue(); //获取到绿色滑块的RGB值
b = js_blue.getValue(); //获取到蓝色滑块的RGB值
//将三种颜色的RGB值在窗体进行显示
jt_red.setText(Integer.toString(r));
jt_green.setText(Integer.toString(g));
jt_blue.setText(Integer.toString(b));
//将对应的颜色进行显示
colorLB.setBackground(new Color(r, g, b));
}

image.gif

同时在滑块控件上,我们也需要对三种滑块添加监听事件:

js_red.addChangeListener(this);
js_green.addChangeListener(this);
js_blue.addChangeListener(this);

image.gif

现在,我们的调色器就基本已经完成了!

完整源码

最后附上完整源码:

package toning_device;
import java.awt.Color;
import java.awt.Container;
import java.awt.Font;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.JTable;
import javax.swing.JTextArea;
import javax.swing.event.AncestorListener;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
//定义Toning_device类继承窗体类,并且实现接口ChangeListener 监控组件的值发生改变,如滑块的值
public class Toning_device extends JFrame implements ChangeListener{
//将控件设置为公有权限
public JSlider js_red,js_green,js_blue; //定义滑块控件
public JTable colorLB; //定义颜色显示的标签
public JTextArea jt_red, jt_green, jt_blue; //定义显示色号的控件
public int r,g,b; //定义整形数据表示红、绿、蓝色号
public static void main(String[] args) {
// TODO Auto-generated method stub
new Toning_device(); //调用该类,执行构造函数
}
public Toning_device(){
setTitle("调色器");
setSize(600, 300);
setLayout(new GridLayout(1,3)); //将窗体进行布局
Font font1 = new Font("楷体", Font.PLAIN, 20);
//设置一个面板,存放滑块
JPanel jp_slide = new JPanel(new GridLayout(3,2));
add(jp_slide);
//设置另一个面板,存放显示色号的控件
JPanel jp_color = new JPanel(new GridLayout(3,1));
add(jp_color);
//设置颜色提示标签
JLabel radtext = new JLabel("红色");
radtext.setFont(font1);
JLabel greentext = new JLabel("绿色");
greentext.setFont(font1);
JLabel bluetext = new JLabel("蓝色");
bluetext.setFont(font1);
js_red = new JSlider(0,255,255); //设置红色滑块
js_green = new JSlider(0,255,0); //设置绿色滑块
js_blue = new JSlider(0,255,0); //设置蓝色滑块
jp_slide.add(radtext);
jp_slide.add(js_red);
jp_slide.add(greentext);
jp_slide.add(js_green);
jp_slide.add(bluetext);
jp_slide.add(js_blue);
//设置显示颜色色号控件
jt_red = new JTextArea("255");
jt_red.setFont(font1);
jt_green = new JTextArea("0");
jt_green.setFont(font1);
jt_blue = new JTextArea("0");
jt_blue.setFont(font1);
jp_color.add(jt_red);
jp_color.add(jt_green);
jp_color.add(jt_blue);
//设置颜色显示区域
colorLB = new JTable();
colorLB.setBackground(Color.red);
add(colorLB);
js_red.addChangeListener(this);
js_green.addChangeListener(this);
js_blue.addChangeListener(this);
setVisible(true);
setLocationRelativeTo(null);
}
@Override
public void stateChanged(ChangeEvent e) {
// TODO Auto-generated method stub
r = js_red.getValue(); //获取到红色滑块的RGB值
g = js_green.getValue(); //获取到绿色滑块的RGB值
b = js_blue.getValue(); //获取到蓝色滑块的RGB值
//将三种颜色的RGB值在窗体进行显示
jt_red.setText(Integer.toString(r));
jt_green.setText(Integer.toString(g));
jt_blue.setText(Integer.toString(b));
//将对应的颜色进行显示
colorLB.setBackground(new Color(r, g, b));
}
}

image.gif

觉得不错记得点赞关注

灰小猿期待与你一同进步!

image.gif编辑

目录
相关文章
|
算法
10分钟小白都可以看懂的光度立体法以及运用到项目
10分钟小白都可以看懂的光度立体法以及运用到项目
918 0
10分钟小白都可以看懂的光度立体法以及运用到项目
|
3月前
|
安全
高级色彩从哪来? 如何运用到自己的海报设计中
色彩是一种神秘的语言。一张色彩丰富的照片,有的吸引你的目光,有的唤起某种特定的情绪或情感。
47 0
|
5月前
|
图形学 开发者
【独家揭秘】Unity游戏开发秘籍:从基础到进阶,掌握材质与纹理的艺术,打造超现实游戏视效的全过程剖析——案例教你如何让每一面墙都会“说话”
【8月更文挑战第31天】Unity 是全球领先的跨平台游戏开发引擎,以其高效性能和丰富的工具集著称,尤其在提升游戏视觉效果方面表现突出。本文通过具体案例分析,介绍如何利用 Unity 中的材质与纹理技术打造逼真且具艺术感的游戏世界。材质定义物体表面属性,如颜色、光滑度等;纹理则用于模拟真实细节。结合使用两者可显著增强场景真实感。以 FPS 游戏为例,通过调整材质参数和编写脚本动态改变属性,可实现自然视觉效果。此外,Unity 还提供了多种高级技术和优化方法供开发者探索。
91 0
|
8月前
|
C++
程序技术好文:雷达图制作方法
程序技术好文:雷达图制作方法
93 1
程序技术好文:雷达图制作方法
|
前端开发
前端知识案例学习15-实现3d得旋转
前端知识案例学习15-实现3d得旋转
100 0
前端知识案例学习15-实现3d得旋转
|
数据库 数据安全/隐私保护
写代码的七八九十宗罪,多图、胆小慎入!
写代码的七八九十宗罪,多图、胆小慎入!
198 0
写代码的七八九十宗罪,多图、胆小慎入!
|
算法 C++
【硬核教程】,如何摆脱黑白框编程,1小时学会用c++做一个飞机大战
【硬核教程】,如何摆脱黑白框编程,1小时学会用c++做一个飞机大战
|
网络协议 算法 机器人
Halcon标定系列(3):我个人总结的“眼在手外“和“眼在手上”的心得笔记
Halcon标定系列(3):我个人总结的“眼在手外“和“眼在手上”的心得笔记
3089 0
Halcon标定系列(3):我个人总结的“眼在手外“和“眼在手上”的心得笔记
“闪瞎双眼~”,今天来实现如何实现太阳的光晕效果(Unity3D)
太阳光晕的效果虽然用处不大,但是很漂亮,漂亮不就行了,那么就来看看怎么在Unity3D中实现太阳光晕效果吧。
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity 中 使用代码切换天空盒
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。
【Unity3D 灵巧小知识点】☀️ | Unity 中 使用代码切换天空盒

热门文章

最新文章