`
lazyee
  • 浏览: 15548 次
社区版块
存档分类
最新评论

滑杆组件的应用实例

    博客分类:
  • java
阅读更多
滑杆JSlider类是让用户能够通过滑块的滑动来改变选择值的组件。
    与JLabel、JButton相似,JSlider也可以作为小组件放置在面板上。下面以用滑杆改变颜色使画出的图像动态变化为例,说明滑杆的使用。
在这个程序中,我们需要4个类:一个面板类三个监听器类。
    面板类:
    面板最好分成左右两块,左边放置需要的小组件(按钮、标签、滑杆),右边作为绘画区域。
    动作监听器ActionListener:
    用来监听按钮,获得按钮文本,从而判断要进行的操作。在这里由于动作监听器所需要完成的功能很少,也可以将其作为一个内部类放置在面板类中。
    鼠标监听器MouseListener:
  用来监听右边面板实现绘图操作,获取鼠标按下和释放点的坐标,并据此画出图形。  
    ChangeListener:
    用来监听滑杆滑块移动,其中的stateChanged(ChangeEvent e) 方法用来实现滑块移动后进行的操作。
    在该方法中需要获得上一次画图形的起始位置,然后根据按钮文本来判断上一次画的是什么图形,接着将画笔颜色设为滑杆显示的数值,重复鼠标监听器中的画图形方法即可。


面板类SimplePanel:
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;

/**
 * 简单画板,实现画线,画圆,画矩形,清除痕迹,颜色选择功能
 */
public class SimplePanel extends JFrame{
	
	public Graphics g;
	
	public JPanel jpChose;//按钮选择面板
	public JPanel jpDraw;//画图面板
	
	public JButton jOval;//渐变圆
	public JButton jRect;//渐变矩形
	public JButton jClear;//自定义橡皮擦
	
	public JLabel red;//标签 红色
	public JLabel green;//标签 绿色
	public JLabel blue;//标签 蓝色
	
	public JSlider jRed;//滑杆 红色
	public JSlider jBlue;//滑杆 蓝色
	public JSlider jGreen;//滑杆 绿色
	
	public static void main(String args[]){
		SimplePanel sp = new SimplePanel();
		sp.init();
	}
	
	/**
	 * 初始化面板类
	 */
	public void init(){
		//设置面板属性
		this.setTitle("简单画板");
		this.setSize(800, 700);
		this.setDefaultCloseOperation(3);
		this.setLocationRelativeTo(null);
		//设置边框布局
		this.setLayout(new BorderLayout());
		
		/*-----------------选择面板.西边----------------------*/
		jpChose = new JPanel();
		jpChose.setPreferredSize(new Dimension(200,700));
		jpChose.setLayout(new FlowLayout());
		
		jOval = new JButton("Oval");
		jRect = new JButton("Rect");
		jClear = new JButton("Clear");
		jOval.setPreferredSize(new Dimension(170,28));
		jRect.setPreferredSize(new Dimension(170,28));
		jClear.setPreferredSize(new Dimension(170,28));
		
		red = new JLabel("Red");
		green = new JLabel("Green");
		blue = new JLabel("Blue");
		
		jRed = new JSlider();
		jGreen = new JSlider();
		jBlue = new JSlider();
		
		//设置滑杆的各种属性
		this.setSlider();
		//向面板添加按钮
		jpChose.add(jOval);
		jpChose.add(jRect);
		jpChose.add(jClear);
		//向面板添加标签和滑杆
		jpChose.add(red);
		jpChose.add(jRed);
		jpChose.add(green);
		jpChose.add(jGreen);
		jpChose.add(blue);
		jpChose.add(jBlue);
		
		//添加动作监听器,获得按钮文本
		ButtonL bl = new ButtonL();
		jOval.addActionListener(bl);
		jRect.addActionListener(bl);
		jClear.addActionListener(bl);
		
		this.add(jpChose, BorderLayout.WEST);
		/*-----------------选择面板.西边----------------------*/
		
		/*-----------------绘图面板.中央----------------------*/
		jpDraw = new JPanel();
		this.add(jpDraw, BorderLayout.CENTER);
		/*-----------------绘图面板.中央----------------------*/
		
		this.setVisible(true);
		
		g = jpDraw.getGraphics();
		//鼠标监听器,根据鼠标起始位置画图形
		MouseL ml = new MouseL(g,jRed,jGreen,jBlue);
		jpDraw.addMouseListener(ml);
		//ChangeListener当移动滑杆上的滑块时,刚画过图形的颜色动态改变
		SliderL sl = new SliderL(g,jRed,jGreen,jBlue,ml);
		jRed.addChangeListener(sl);
		jGreen.addChangeListener(sl);
		jBlue.addChangeListener(sl);
	}
	
	/**
	 * 设置滑杆属性方法
	 */
	private void setSlider() {
		//红
		jRed.setMaximum(256);//设置最大值
		jRed.setMajorTickSpacing(64);//设置主刻度标记的间隔
		jRed.setMinorTickSpacing(16);//设置次刻度标记的间隔
		jRed.setPaintLabels(true);//确定是否在滑块上绘制标签
		jRed.setPaintTicks(true);// 确定是否在滑块上绘制刻度标记
		jRed.setValue(120);//设置初始值
		//绿
		jGreen.setMaximum(256);
		jGreen.setMajorTickSpacing(64);
		jGreen.setMinorTickSpacing(16);
		jGreen.setPaintLabels(true);
		jGreen.setPaintTicks(true);
		jGreen.setValue(130);
		//蓝
		jBlue.setMaximum(256);
		jBlue.setMajorTickSpacing(64);
		jBlue.setMinorTickSpacing(16);
		jBlue.setPaintLabels(true);
		jBlue.setPaintTicks(true);
		jBlue.setValue(150);
	}

}
   
    在设置滑杆属性时用到了setMajorTickSpacing(int n)方法,此方法可以用来设置主刻度标记的间隔(一般的学生用尺子为1厘米)。在调用这个方法时,会检测是否设置了标签表(如直尺上竖直平行排列的刻度)。如果还没有标签表,并且主刻度间隔为 > 0,并且 getPaintLabels 返回 true,则会生成一个在主刻度标记处带有标签的标准标签表(通过调用 createStandardLabels)。然后通过调用 setLabelTable 在滑块上设置标签表。
  还有一点要注意:要绘制主刻度,必须将setPaintTicks 设置为 true。


动作监听器类ButtonL:
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
 * 用来获得按钮上文本的类,也可以写为内部类
 */
public class ButtonL implements ActionListener{

	public static String s="null";
	public void actionPerformed(ActionEvent e) {
		s = e.getActionCommand();
	}

}



鼠标监听器类MouseL:
import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;

import javax.swing.JSlider;

/**
 * 鼠标监听器,实现图形的绘制
 */
public class MouseL implements MouseListener {

	Graphics g;
	public int x1, y1, x2, y2;
	public JSlider jRed;
	public JSlider jBlue;
	public JSlider jGreen;

	public int red;
	public int green;
	public int blue;

	/**
	 * 重载构造方法
	 * @param g	画布,用来绘图
	 * @param jRed	滑杆,用来获得颜色初始值
	 * @param jBlue	滑杆,用来获得颜色初始值
	 * @param jGreen滑杆,用来获得颜色初始值
	 */
	public MouseL(Graphics g, JSlider jRed, JSlider jGreen, JSlider jBlue) {
		this.g = g;
		this.jRed = jRed;
		this.jGreen = jGreen;
		this.jBlue = jBlue;
	}

	/**
	 * 按下鼠标,获得按下点的坐标并设置颜色为滑杆的初始颜色
	 */
	public void mousePressed(MouseEvent e) {
		x1 = e.getX();
		y1 = e.getY();
		red = jRed.getValue();
		green = jGreen.getValue();
		blue = jBlue.getValue();
		g.setColor(new Color(red, green, blue));
	}

	/**
	 * 鼠标释放时,获取释放点的坐标,根据按钮的文本画出相应的图形
	 */
	public void mouseReleased(MouseEvent e) {
		x2 = e.getX();
		y2 = e.getY();
		String str = ButtonL.s;
		if (str.equals("Clear")) {
			g.clearRect(x1, y1, x2 - x1, y2 - y1);
		}
		//在这里采用的是向图形中心渐变的方法,也可以改变调用画图方法是传入的参数,实现更多种的变幻
		for (int i = 0; i < 150; i+=3) {
			if (str.equals("Oval")) {
				//画渐变圆
				g.fillOval(x1 + i, y1 + i, x2 - x1 - i*2, y2 - y1 - i*2);
			} else if (str.equals("Rect")) {
				//画渐变矩形
				g.fillRect(x1 + i, y1 + i, x2 - x1 - i*2, y2 - y1 - i*2);
			} 
			red = red - 2;
			green-=2;
			blue-=2;
			g.setColor(new Color(red,green,blue));
		}
	}

	public void mouseClicked(MouseEvent e) {

	}

	public void mouseEntered(MouseEvent e) {

	}

	public void mouseExited(MouseEvent e) {

	}

}



滑杆监听器类SliderL:
import java.awt.Color;
import java.awt.Graphics;

import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
/**
 * 加在滑杆上的监听器,当任意滑杆上的滑块移动时,在先前画图形的位置用改变后的颜色将图形重画
 */
public class SliderL implements ChangeListener{
	
	public Graphics g;
	public JSlider jRed;
	public JSlider jBlue;
	public JSlider jGreen;
	
	public int red;
	public int green;
	public int blue;
	
	public MouseL ml;
	
	public int x1;
	public int y1;
	public int x2;
	public int y2;
	
	/**
	 * 重载构造方法
	 * @param g	画布,每移动一下滑块,都需在原来的位置画出一个颜色改变的图形
	 * @param jRed	滑杆,获得改变后的颜色值
	 * @param jBlue	滑杆,获得改变后的颜色值
	 * @param jGreen滑杆,获得改变后的颜色值
	 * @param ml	鼠标监听器,获得画图的坐标
	 */
	public SliderL(Graphics g,JSlider jRed,JSlider jGreen , JSlider jBlue,MouseL ml){
		this.g = g;
		this.jRed = jRed;
		this.jGreen = jGreen;
		this.jBlue = jBlue;
		this.ml = ml;
	}
	
	/**
	 * 滑块移动,改变颜色,重画图形
	 */
	public void stateChanged(ChangeEvent e) {
		x1 = ml.x1;
		y1 = ml.y1;
		x2 = ml.x2;
		y2 = ml.y2;
		red = jRed.getValue();
		green = jGreen.getValue();
		blue = jBlue.getValue();
		g.setColor(new Color(red,green,blue));
		
		String str = ButtonL.s;
		
		if (str.equals("Clear")) {
			g.clearRect(x1, y1, x2 - x1, y2 - y1);
		}
		for (int i = 0; i < 150; i+=3) {
			if (str.equals("Oval")) {
				g.fillOval(x1 + i, y1 + i, x2 - x1 - i*2, y2 - y1 - i*2);
			} else if (str.equals("Rect")) {
				g.fillRect(x1 + i, y1 + i, x2 - x1 - i*2, y2 - y1 - i*2);
			} 
			red = red - 2;
			green-=2;
			blue-=2;
			g.setColor(new Color(red,green,blue));
		}
	}

}


    在编写程序过程中犯的几个错误:
    1、打开程序在右边面板单击,可能会报空指针异常。原因是没有点击按钮,记录按钮文本的变量没有值。因此,最好给变量s设初值。
   
    2、由于我一开始是使用一个面板,后来才分成左右两块面板,在修改的时候就出现了坐标偏移的问题。若在A点按下,则实际出现的起始点在A点的右下方。
    出现这个问题的原因是:将一个面板分为两个后,画布是从右边面板取得,而鼠标监听器仍是加在原来的大面板上。这样,鼠标监听器取得的坐标是相对大面板的左上顶点而言的,而画布的坐标原点却是右边面板的左上顶点,用鼠标监听器取得的坐标在画布上绘图,自然就会出现坐标错位。

    3、在程序中,我画图部分的设定是:循环50次,每次颜色值减2.在这种情况下,若是3个滑杆中有任意一个的初始值小于100都会报如下错误。


程序的运行结果如下:

  • 大小: 3.2 KB
  • 大小: 33 KB
分享到:
评论

相关推荐

    swift-Swift3编写的多点滑杆组件支持一条滑杆多个滑块滑动操纵

    Swift3中的滑杆组件,全称为CHRangeSlider,是一个高度可定制的UI控件,专为iOS应用设计,用于实现多点滑动控制。在Swift3的编程环境中,这个组件提供了一种新颖的方式,允许用户通过一个单一的滑杆同时调整多个值。...

    Java滑杆演示

    本示例将深入探讨Java中的滑杆组件,包括其功能、基本用法以及如何在实际应用中实现。 滑杆组件在Java Swing库中被定义为JSlider类,它是JComponent的一个子类。JSlider有两种模式:水平模式和垂直模式,可以通过...

    jQuery滑杆改变页面和文字大小

    在这个案例中,我们将深入探讨如何使用jQuery滑杆来动态改变页面和文字的大小。 首先,我们需要了解jQuery是什么。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。它的API...

    实例23 滑动杆(java 绝对新手实例)

    总的来说,"实例23 滑动杆"是一个简单的Java Swing应用,展示了如何创建和使用JSlider组件。通过这个实例,初学者可以学习到Swing组件的使用、事件监听以及如何创建用户交互的图形界面。在实际项目中,可以进一步...

    ios-一个渐变的slider选择器.zip

    这个名为"ios-一个渐变的slider选择器.zip"的压缩包包含了一个定制的滑杆组件,它具有渐变色彩的效果,并且支持手动刷新功能。让我们详细探讨一下这个滑杆实现中的关键知识点。 首先,滑杆(UISlider)是UIKit框架...

    ios-MCSelectSlider.zip

    通过学习和使用 MCSelectSlider,你可以为你的 iOS 应用添加一个既美观又实用的自定义滑杆组件,提升用户交互体验。同时,深入理解 MCSelectSlider 的内部工作原理也有助于你进一步提升 iOS UI 开发技能。

    SOSlider.zip

    而在更复杂的场景下,如移动应用或高级Web界面,开发者可能会使用JavaScript库,比如jQuery UI、React、Vue等框架提供的滑杆组件。 在SOSlider中,"isVertical"这个属性是控制滑杆方向的关键。默认情况下,滑杆通常...

    一款实现双向滑杆效果

    它提供了一个现成的案例,可以帮助开发者掌握如何在iOS应用中创建自定义的UI组件,尤其是滑杆控件的交互逻辑和视觉反馈。 “源码实现两个滑块的滑杆效果”,这意味着该源码包含了两个独立可滑动的滑块,每个滑块都...

    几种圆环型滑杆Slider案例

    总的来说,这个圆环型滑杆Slider案例为iOS开发者提供了一种创新的UI组件实现,通过对源码的学习,开发者不仅可以提升自己的UI设计能力,也能加深对iOS编程的理解,尤其是自定义视图和手势识别等方面。同时,通过实践...

    (0122)-iOS/iPhone/iPAD/iPod源代码-滑杆(Slider)-Rotator Controller

    通过研究这个源代码,开发者和学习者可以了解到如何在iOS应用中创建自定义UI组件,以及如何通过手势识别和动画技术来提升用户体验。这样的实践有助于提高编程技巧,特别是对于那些希望在移动应用设计上有所突破的...

    类似滚轮的滑杆(Slider)效果

    本篇文章将深入探讨一种名为`UIWheelSlider`的自定义滑杆组件,它为`UISlider`带来了一种滚轮式的效果,以提供更为直观和吸引人的用户界面。 `UIWheelSlider`的核心特性在于其视觉上的创新。它不仅保持了`UISlider`...

    拇指滑杆源码案例

    《拇指滑杆源码案例——探索Swift中的UIStepper优雅替代方案》 在iOS应用开发中,UIStepper是一个常用组件,它允许用户通过点击加减按钮来递增或递减数值。然而,随着界面设计的不断进化和用户体验的提升,开发者...

    自定义的滑杆(Slider)效果

    本案例中,我们探讨的是一个名为WLRangeSlider的自定义滑杆组件,它扩展了标准滑杆的功能,增加了更多的定制选项。 首先,WLRangeSlider最显著的特点是它包含左右两个滑块,这使得用户能够选择一个数值范围,而不...

    滑杆

    在本案例中,我们关注的是基于JavaScript实现的滑杆组件,特别是通过Slider和Tabs的结合使用来增强用户体验。 首先,Slider组件通常由两个部分组成:滑块和轨道。滑块是用户可拖动的部分,而轨道则是滑块移动的路径...

    支持实现声音自定义调节滑杆效果

    本项目提供的源码正是针对这一功能的实现,通过分析和学习,开发者可以掌握如何创建一个具有视觉反馈和互动性的滑杆组件。 首先,我们要理解滑杆(Slider)控件在iOS中的基本使用。在UIKit框架中,滑杆(UISlider)...

    一种很炫的圆形滑杆样式效果

    这个源码项目旨在展示如何在iOS应用中实现一个圆形的滑杆组件,该组件具有动态和美观的效果,可用于音量控制、进度调整等场景。 首先,我们要理解这个滑杆是如何工作的。圆形滑杆不同于传统的线性滑杆,它的设计...

    超实用java控件美化及日常应用源码

    3. **实例13:使用剪贴板的复制粘贴程序** - 剪贴板操作是GUI应用程序的基本功能,这个实例将教你如何使用Java的Clipboard类来实现复制和粘贴功能,这在文本编辑器或数据处理工具中常见。 4. **实例14:文本的拖动...

    ios-滑动月份多选器.zip

    在这个案例中,滑杆不是用来选择数值,而是创新性地用于选择月份,这体现了滑杆组件的灵活性。 2. **自定义滑杆视图**: - 为了实现滑动月份选择的功能,开发者可能需要自定义滑杆的外观和行为。这可能包括创建一...

Global site tag (gtag.js) - Google Analytics