java - 如何制作曲线形状的 JSlider？

Question

我想为我 parent 的 Estate Agency 假期出租在线预订服务创建一个 Java 应用程序。

不幸的是，我还不能发布图片，但他们想要一种 slider 式的预订服务，用户可以在其中滑动条来选择价格、卧室等。他们给我的设计使用了弯曲的 slider ，但我似乎不能在线查找任何帮助。他们想要一个圆圈中的 5 个 slider ，用于显示所选数字并有一个按钮来确认。

有人有什么想法吗？它会涉及绘制圆形曲线或类似的东西吗？此外，它是否会比它的值(value)更麻烦 - 毕竟有在线替代预订系统，但创建一个定制的系统会很好。

谢谢你的帮助。

Answer 1

当谈到 GUI 组件及其外观、风格、行为和预期用途的细节时，通常有无限多的自由度。

是否应该通过专门的外观来解决这个问题？是否可以影响颜色？ “旋钮”的宽度？曲线的起始角和结束角？您是否希望在后台使用 BoundedRangeModel，将其用作 JSlider 的替代品？ ....

但是，我写了一个非常简单的草图，完全基于自己的绘画和鼠标听众:可以修改最小和最大角度和值，并用鼠标拖动旋钮。

由于缺少详细信息，尚不清楚这是否是适合您的解决方案。它没有“BoundedRangeModel”。它不支持监听器(尽管这是最容易添加的)。关于边界情况的行为可能存在一些小故障，这些小故障的解决方案将取决于您根本没有指定的细节。

这是它的样子:

代码为 MCVE :

import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.geom.Arc2D;
import java.awt.geom.Area;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Line2D;
import java.io.IOException;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.SwingUtilities;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;


public class CurvedSliderTest
{
    public static void main(String[] args) throws IOException
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            @Override
            public void run()
            {
                createAndShowGUI();
            }
        });
    }

    private static void createAndShowGUI()
    {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        f.getContentPane().setLayout(new BorderLayout());

        CurvedSlider gaugePanel = new CurvedSlider();
        f.getContentPane().add(gaugePanel, BorderLayout.CENTER);

        JPanel controlPanel = createControlPanel(gaugePanel);
        f.getContentPane().add(controlPanel, BorderLayout.NORTH);

        f.setSize(600,800);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }

    static JPanel createControlPanel(final CurvedSlider gaugePanel)
    {
        final JSlider minAngleSlider = new JSlider(0, 100, 0);
        final JSlider maxAngleSlider = new JSlider(0, 100, 0);
        final JSlider minValueSlider = new JSlider(0, 100, 0);
        final JSlider maxValueSlider = new JSlider(0, 100, 0);
        final JSlider valueSlider = new JSlider(0, 100, 0);

        JPanel controlPanel = new JPanel(new GridLayout(0,2));
        controlPanel.add(new JLabel("minAngle"));
        controlPanel.add(minAngleSlider);
        controlPanel.add(new JLabel("maxAngle"));
        controlPanel.add(maxAngleSlider);
        controlPanel.add(new JLabel("minValue"));
        controlPanel.add(minValueSlider);
        controlPanel.add(new JLabel("maxValue"));
        controlPanel.add(maxValueSlider);
        controlPanel.add(new JLabel("value"));
        controlPanel.add(valueSlider);

        ChangeListener changeListener = new ChangeListener()
        {
            @Override
            public void stateChanged(ChangeEvent e)
            {
                double minAngle = minAngleSlider.getValue() / 100.0 * Math.PI * 2;
                double maxAngle = maxAngleSlider.getValue() / 100.0 * Math.PI * 2;
                double minValue = minValueSlider.getValue() / 100.0;
                double maxValue = maxValueSlider.getValue() / 100.0;
                double value = valueSlider.getValue() / 100.0;

                gaugePanel.setAngles(minAngle, maxAngle);
                gaugePanel.setRange(minValue, maxValue);
                gaugePanel.setValue(value);
            }
        };
        minAngleSlider.addChangeListener(changeListener);
        maxAngleSlider.addChangeListener(changeListener);
        minValueSlider.addChangeListener(changeListener);
        maxValueSlider.addChangeListener(changeListener);
        valueSlider.addChangeListener(changeListener);

        minAngleSlider.setValue(50);
        maxAngleSlider.setValue(0);
        minValueSlider.setValue(10);
        maxValueSlider.setValue(90);
        valueSlider.setValue(50);

        return controlPanel;
    }


}



class CurvedSlider extends JPanel implements MouseListener, MouseMotionListener
{
    private double minAngleRad = 0.0;
    private double maxAngleRad = 0.0;
    private double minValue = 0.0;
    private double maxValue = 0.0;
    private double value = 0.0;

    CurvedSlider()
    {
        addMouseListener(this);
        addMouseMotionListener(this);
    }

    void setAngles(double minAngleRad, double maxAngleRad)
    {
        this.minAngleRad = minAngleRad;
        this.maxAngleRad = maxAngleRad;
        repaint();
    }

    void setRange(double minValue, double maxValue)
    {
        this.minValue = minValue;
        this.maxValue = maxValue;
        repaint();
    }

    void setValue(double value)
    {
        this.value = value;
        repaint();
    }

    @Override
    protected void paintComponent(Graphics gr)
    {
        super.paintComponent(gr);
        Graphics2D g = (Graphics2D)gr;
        g.setRenderingHint(
            RenderingHints.KEY_ANTIALIASING, 
            RenderingHints.VALUE_ANTIALIAS_ON);
        g.setColor(Color.WHITE);
        g.fillRect(0,0,getWidth(),getHeight());

        boolean printValues = false;
        printValues = true;
        if (printValues)
        {
            int ty = 20;
            g.setColor(Color.BLACK);
            g.drawString("minAngle "+Math.toDegrees(minAngleRad), 20, ty+=20);
            g.drawString("maxAngle "+Math.toDegrees(maxAngleRad), 20, ty+=20);
            g.drawString("minValue "+minValue, 20, ty+=20);
            g.drawString("maxValue "+maxValue, 20, ty+=20);
            g.drawString("value "+value, 20, ty+=20);
        }

        double alpha = (value - minValue) / (maxValue - minValue);
        double angleRad = minAngleRad + alpha * (maxAngleRad - minAngleRad);

        double radius = Math.min(getWidth(), getHeight()) / 3.0;

        final double thickness = 15;
        double xC = getWidth() / 2.0;
        double yC = getHeight() / 2.0;
        double x0 = xC + Math.cos(angleRad) * (radius - thickness);
        double y0 = yC - Math.sin(angleRad) * (radius - thickness);
        double x1 = xC + Math.cos(angleRad) * radius;
        double y1 = yC - Math.sin(angleRad) * radius;

        Shape background0 = new Arc2D.Double(
            xC-radius, yC-radius, 
            radius+radius, radius+radius, 
            Math.toDegrees(minAngleRad), 
            Math.toDegrees(maxAngleRad-minAngleRad), 
            Arc2D.PIE);

        Shape background1 = new Ellipse2D.Double(
            xC-radius+thickness, yC-radius+thickness, 
            radius+radius-thickness-thickness, 
            radius+radius-thickness-thickness);

        Area a = new Area(background0);
        a.subtract(new Area(background1));

        g.setColor(Color.GRAY);
        g.fill(a);
        g.setStroke(new BasicStroke(3.0f, 
            BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
        g.setColor(Color.LIGHT_GRAY);
        g.draw(a);

        g.setStroke(new BasicStroke(8.0f, 
            BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
        g.setColor(Color.BLACK);
        g.draw(new Line2D.Double(x0, y0, x1, y1));
    }

    private void updateAngle(Point p)
    {
        double xC = getWidth() / 2.0;
        double yC = getHeight() / 2.0;
        double dx = p.getX() - xC;
        double dy = p.getY() - yC;
        double angleRad = Math.atan2(-dy, dx);
        if (angleRad < -Math.PI / 2)
        {
            angleRad = 2 * Math.PI + angleRad;
        }
        angleRad = Math.max(maxAngleRad, Math.min(minAngleRad, angleRad));
        double alpha = (angleRad - minAngleRad) / (maxAngleRad - minAngleRad);
        double value = minValue + alpha * (maxValue - minValue);
        setValue(value);
    }

    @Override
    public void mouseDragged(MouseEvent e)
    {
        updateAngle(e.getPoint());
    }

    @Override
    public void mouseMoved(MouseEvent e)
    {
    }

    @Override
    public void mousePressed(MouseEvent e)
    {
        updateAngle(e.getPoint());
    }

    @Override
    public void mouseClicked(MouseEvent e)
    {
    }

    @Override
    public void mouseReleased(MouseEvent e)
    {
    }

    @Override
    public void mouseEntered(MouseEvent e)
    {
    }

    @Override
    public void mouseExited(MouseEvent e)
    {
    }
}