Browse Source

REPORT-107973 主页及组件视觉样式翻新

【问题原因】rt
【改动思路】翻新渐变色滑块
newui
Leo.Qin 6 months ago
parent
commit
9da10a9a6d
  1. 294
      designer-base/src/main/java/com/fine/theme/light/ui/FineGradientBarUI.java
  2. 6
      designer-base/src/main/java/com/fine/theme/light/ui/FineSliderUI.java
  3. 6
      designer-base/src/main/java/com/fr/design/style/background/gradient/FixedGradientBar.java
  4. 127
      designer-base/src/main/java/com/fr/design/style/background/gradient/GradientBar.java
  5. 43
      designer-base/src/main/java/com/fr/design/style/background/gradient/SelectColorPointBtn.java
  6. 3
      designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLaf.properties
  7. 10
      designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties
  8. 7
      designer-base/src/test/java/com/fr/design/gui/storybook/components/SliderStoryBoard.java

294
designer-base/src/main/java/com/fine/theme/light/ui/FineGradientBarUI.java

@ -0,0 +1,294 @@
package com.fine.theme.light.ui;
import com.fine.theme.utils.FineUIUtils;
import com.fr.design.style.background.gradient.GradientBar;
import com.fr.design.style.background.gradient.SelectColorPointBtn;
import com.fr.stable.AssistUtils;
import com.fr.stable.os.OperatingSystem;
import javax.swing.JComponent;
import javax.swing.UIManager;
import javax.swing.plaf.ComponentUI;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.LinearGradientPaint;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionAdapter;
import java.awt.geom.Path2D;
import java.awt.geom.Point2D;
import java.util.Collections;
import java.util.List;
/**
* 渐变色滑块 UI类
*
* @author Leo.Qin
* @since 11.0
* Created on 2023/12/19
*/
public class FineGradientBarUI extends ComponentUI {
private int directionalShapeSize;
private int recHeight;
private int width;
private int height;
private int borderWidth;
private Color borderColor;
private Color thumbBorderColor;
private Color hoverThumbColor;
private Color pressedThumbColor;
private MouseMotionAdapter mouseMotionListener;
GradientBar gradientBar;
private List<SelectColorPointBtn> list;
private SelectColorPointBtn p1;
private SelectColorPointBtn p2;
private MouseListener mouseListener;
private double offset = 0.0001;
boolean[] hoverStatus;
/**
* 创建UI
*
* @param c 组件
* @return UI
*/
public static ComponentUI createUI(JComponent c) {
return new FineGradientBarUI();
}
@Override
public void installUI(JComponent c) {
super.installUI(c);
installDefaults(c);
gradientBar = (GradientBar) c;
list = gradientBar.getList();
p1 = gradientBar.getSelectColorPointBtnP1();
p2 = gradientBar.getSelectColorPointBtnP2();
hoverStatus = new boolean[list.size()];
mouseMotionListener = new TrackMotionListener();
mouseListener = new TrackMouseListener();
gradientBar.addMouseMotionListener(mouseMotionListener);
gradientBar.addMouseListener(mouseListener);
}
private void installDefaults(JComponent c) {
directionalShapeSize = FineUIUtils.getAndScaleInt("GradientBar.thumbWidth", 12);
recHeight = FineUIUtils.getAndScaleInt("GradientBar.recHeight", 30);
width = FineUIUtils.getAndScaleInt("GradientBar.recWidth", 160);
height = recHeight + directionalShapeSize;
borderWidth = FineUIUtils.getAndScaleInt("GradientBar.borderWidth", 1);
borderColor = UIManager.getColor("GradientBar.borderColor");
thumbBorderColor = UIManager.getColor("GradientBar.thumbBorderColor");
hoverThumbColor = UIManager.getColor("GradientBar.hoverThumbColor");
pressedThumbColor = UIManager.getColor("GradientBar.pressedThumbColor");
}
private class TrackMouseListener extends MouseAdapter {
@Override
public void mouseExited(MouseEvent e) {
for (int i = 0; i < list.size(); i++) {
SelectColorPointBtn selectColorPointBtn = list.get(i);
selectColorPointBtn.setHover(false);
hoverStatus[i] = false;
}
gradientBar.repaint();
}
@Override
public void mouseEntered(MouseEvent e) {
checkHoverStatus(e);
}
@Override
public void mousePressed(MouseEvent e) {
for (SelectColorPointBtn btn : list) {
boolean hover = isOverBtn(e, btn);
btn.setPressed(hover);
}
gradientBar.repaint();
}
@Override
public void mouseReleased(MouseEvent e) {
for (SelectColorPointBtn btn : list) {
btn.setPressed(false);
}
gradientBar.repaint();
}
}
private class TrackMotionListener extends MouseMotionAdapter {
int index;
@Override
public void mouseDragged(MouseEvent e) {
if (!gradientBar.isDraggable()) {
return;
}
index = getSelectedIndex(e, index);
int halfSize = directionalShapeSize / 2;
boolean x = e.getX() <= gradientBar.getWidth() - halfSize && e.getX() >= halfSize;
if (x) {
list.get(index).setX(e.getX());
list.get(index).setStartPosition((double) (e.getX() - halfSize) / (gradientBar.getWidth() - directionalShapeSize));
gradientBar.repaint();
}
}
private int getSelectedIndex(MouseEvent e, int index) {
int oldIndex = index;
for (int i = 0; i < list.size(); i++) {
if (list.get(i).contains(e.getX(), e.getY())) {
index = i;
break;
}
}
if (OperatingSystem.isLinux() && AssistUtils.equals(oldIndex, index)) {
if (Math.abs(p1.getX() - e.getX()) > Math.abs(p2.getX() - e.getX())) {
index = 1;
} else {
index = 0;
}
}
return index;
}
@Override
public void mouseMoved(MouseEvent e) {
checkHoverStatus(e);
}
}
private void checkHoverStatus(MouseEvent e) {
boolean repaint = false;
for (int i = 0; i < list.size(); i++) {
SelectColorPointBtn btn = list.get(i);
boolean hover = isOverBtn(e, btn);
if (hoverStatus[i] != hover) {
repaint = true;
hoverStatus[i] = hover;
btn.setHover(hover);
}
}
if (repaint) {
gradientBar.repaint();
}
}
private boolean isOverBtn(MouseEvent e, SelectColorPointBtn btn) {
return btn.contains(e.getX(), e.getY());
}
@Override
public void paint(Graphics g, JComponent c) {
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_NORMALIZE);
GradientBar component = (GradientBar) c;
List<SelectColorPointBtn> btnList = component.getList();
Collections.sort(btnList);
paintBorder(g2, component);
paintContent(g2, component);
paintButton(g2, btnList);
}
/**
* 实际绘制区域x范围directionalShapeSize / 2, width - directionalShapeSize)
*/
private void paintContent(Graphics2D g2d, GradientBar c) {
List<SelectColorPointBtn> btnList = c.getList();
int halfSize = directionalShapeSize / 2;
Point2D start = new Point2D.Float(halfSize, 0);
Point2D end = new Point2D.Float(c.getWidth() - halfSize, 0);
Collections.sort(btnList);
Color[] colors = new Color[btnList.size()];
for (int i = 0; i < btnList.size(); i++) {
colors[i] = btnList.get(i).getColorInner();
}
float[] dist = new float[btnList.size()];
for (int i = 0; i < btnList.size(); i++) {
if (btnList.get(i).getStartPosition() < 0) {
dist[i] = 0;
} else if (btnList.get(i).getStartPosition() > 1) {
dist[i] = 1;
} else {
dist[i] = (float) btnList.get(i).getStartPosition();
}
btnList.get(i).setX(dist[i] * (c.getWidth() - directionalShapeSize) + (double) directionalShapeSize / 2);
}
float dist1 = dist[btnList.size() - 1];
float dist2 = dist[btnList.size() - 2];
if (AssistUtils.equals(dist1, dist2)) {
dist[btnList.size() - 1] = (float) (dist2 + offset);
}
LinearGradientPaint paint = new LinearGradientPaint(start, end, dist, colors);
g2d.setPaint(paint);
g2d.fillRect(halfSize + borderWidth, borderWidth, c.getWidth() - directionalShapeSize - borderWidth * 2, recHeight - borderWidth * 2);
}
private void paintBorder(Graphics2D g2d, GradientBar c) {
int halfSize = directionalShapeSize / 2;
if (borderColor == null) {
return;
}
g2d.setColor(borderColor);
g2d.fillRect(halfSize, 0, c.getWidth() - directionalShapeSize, recHeight);
}
private void paintButton(Graphics2D g2d, List<SelectColorPointBtn> list) {
for (SelectColorPointBtn selectColorPointBtn : list) {
Path2D directionalThumbShape = FineSliderUI.createDirectionalThumbShape((float) selectColorPointBtn.getX() - (float) directionalShapeSize / 2, (float) selectColorPointBtn.getY(), directionalShapeSize, directionalShapeSize, 0);
if (selectColorPointBtn.isHover() && hoverThumbColor != null) {
g2d.setColor(hoverThumbColor);
g2d.fill(directionalThumbShape);
} else if (selectColorPointBtn.isPressed() && pressedThumbColor != null) {
g2d.setColor(pressedThumbColor);
g2d.fill(directionalThumbShape);
} else if (thumbBorderColor != null) {
g2d.setColor(thumbBorderColor);
g2d.fill(directionalThumbShape);
}
selectColorPointBtn.updatePath(directionalThumbShape);
Path2D innerThumbShape = FineSliderUI.createDirectionalThumbShape((float) selectColorPointBtn.getX() - (float) directionalShapeSize / 2 + borderWidth, (float) selectColorPointBtn.getY() + borderWidth, directionalShapeSize - borderWidth * 2, directionalShapeSize - borderWidth * 2, 0);
g2d.setColor(selectColorPointBtn.getColorInner());
g2d.fill(innerThumbShape);
}
}
@Override
public Dimension getPreferredSize(JComponent c) {
return new Dimension(width, height);
}
}

6
designer-base/src/main/java/com/fine/theme/light/ui/FineSliderUI.java

@ -268,7 +268,7 @@ public class FineSliderUI extends FlatSliderUI {
// paint thumb focus border
if (focused) {
g2.setColor(focusedColor);
g2.fill(createDirectionalThumbShape(0, 0, tw + fw + fw, th + fw + fw + (fw * 0.4142f), fw));
g2.fill(createDirectionalThumbShape(0, 0, tw + fw + fw, th + fw + fw, fw));
}
if (thumbBorderColor != null) {
@ -279,7 +279,7 @@ public class FineSliderUI extends FlatSliderUI {
// paint thumb background
float lw = UIScale.scale(thumbBorderWidth);
g2.setColor(thumbColor);
g2.fill(createDirectionalThumbShape(fw + lw, fw + lw, tw - lw - lw, th - lw - lw - (lw * 0.4142f), 0));
g2.fill(createDirectionalThumbShape(fw + lw, fw + lw, tw - lw - lw, th - lw - lw, 0));
} else {
// paint thumb background
g2.setColor(thumbColor);
@ -325,7 +325,7 @@ public class FineSliderUI extends FlatSliderUI {
/**
* 有标签下创建Thumb形状
*/
public static Shape createDirectionalThumbShape(float x, float y, float w, float h, float arc) {
public static Path2D createDirectionalThumbShape(float x, float y, float w, float h, float arc) {
float wh = w / 2;
Path2D path = new Path2D.Float(Path2D.WIND_NON_ZERO, 9);

6
designer-base/src/main/java/com/fr/design/style/background/gradient/FixedGradientBar.java

@ -12,6 +12,7 @@ public class FixedGradientBar extends GradientBar {
public FixedGradientBar(int minvalue, int maxvalue) {
super(minvalue, maxvalue);
setDraggable(false);
}
@Override
@ -19,9 +20,4 @@ public class FixedGradientBar extends GradientBar {
setColor(getList().get(select).getColorInner());
super.clickButton(select);
}
@Override
protected void addMouseDragListener() {
//不添加拖拽事件
}
}

127
designer-base/src/main/java/com/fr/design/style/background/gradient/GradientBar.java

@ -1,5 +1,7 @@
package com.fr.design.style.background.gradient;
import com.fine.theme.light.ui.FineGradientBarUI;
import com.fine.theme.utils.FineUIUtils;
import com.fr.base.background.ColorBackground;
import com.fr.design.event.UIObserver;
import com.fr.design.event.UIObserverListener;
@ -8,34 +10,34 @@ import com.fr.design.style.color.ColorCell;
import com.fr.design.style.color.ColorSelectable;
import com.fr.design.style.color.NewColorSelectPane;
import com.fr.stable.AssistUtils;
import com.fr.stable.os.OperatingSystem;
import javax.swing.JPanel;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
import javax.swing.event.DocumentEvent;
import javax.swing.event.DocumentListener;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.awt.Color;
import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.LinearGradientPaint;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Point2D;
import java.util.ArrayList;
import java.util.List;
/**
* TODO:面板缩放的功能没有考虑就是尾值过大导致超过界面显示的情况原来的那个实现完全是个BUG要缩放的情况也比较少就干脆以后弄吧
* 渐变色滑块
* @since 11.0
* Create on 2023/12/27.
*/
public class GradientBar extends AbstractComponentPopBox implements UIObserver, ColorSelectable {
private static final String UI_CLASS_ID = "GradientBarUI";
@Override
public String getUIClassID() {
return UI_CLASS_ID;
}
private NewColorSelectPane colorPane;
/**
*
*/
private static final long serialVersionUID = -8503629815871053585L;
private List<SelectColorPointBtn> list = new ArrayList<SelectColorPointBtn>();
@ -57,6 +59,8 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
private static final int MAX_VERTICAL = 45;
private boolean draggable = true;
// 选中的颜色
private Color color;
@ -71,19 +75,17 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
endLabel = new UINumberField(11);
endLabel.setValue(max);
endLabel.getDocument().addDocumentListener(docListener);
this.setPreferredSize(new Dimension(max + 5, 50));
p1 = new SelectColorPointBtn(startLabel.getValue(), 30, Color.WHITE);
p2 = new SelectColorPointBtn(endLabel.getValue(), 30, Color.BLACK);
int recHeight = FineUIUtils.getAndScaleInt("GradientBar.recHeight", 30);
p1 = new SelectColorPointBtn(startLabel.getValue(), recHeight, Color.WHITE);
p2 = new SelectColorPointBtn(endLabel.getValue(), recHeight, Color.BLACK);
list.add(p1);
list.add(p2);
this.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
p1.setStartPosition(0);
p2.setStartPosition(1);
addMouseClickListener();
addMouseDragListener();
iniListener();
setUI(new FineGradientBarUI());
}
public List<SelectColorPointBtn> getList() {
@ -110,7 +112,7 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
protected void addMouseClickListener() {
this.addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e) {
if (e.getX() < max + MOUSE_OFFSET && e.getX() > 0) {
if (e.getX() < getWidth() && e.getX() > 0) {
int select = -1;
for (int i = 0; i < list.size(); i++) {
if (list.get(i).contains(e.getX(), e.getY())) {
@ -159,35 +161,6 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
return colorPane;
}
protected void addMouseDragListener() {
this.addMouseMotionListener(new MouseAdapter() {
public void mouseDragged(MouseEvent e) {
int oldIndex = index;
for (int i = 0; i < list.size(); i++) {
if (list.get(i).contains(e.getX(), e.getY())) {
index = i;
break;
}
}
if (OperatingSystem.isLinux() && AssistUtils.equals(oldIndex, index)) {
if (Math.abs(p1.getX() - e.getX()) > Math.abs(p2.getX() - e.getX())) {
index = 1;
} else {
index = 0;
}
}
boolean x = e.getX() <= max && e.getX() >= min;
if (x && e.getY() < MAX_VERTICAL) {
list.get(index).setX(e.getX());
}
GradientBar.this.repaint();
startLabel.setText(Double.toString(p1.getX()));
endLabel.setText(Double.toString(p2.getX()));
}
});
}
private void iniListener() {
uiObserverListener = new ArrayList<>();
if (shouldResponseChangeListener()) {
@ -216,40 +189,6 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
}
};
@Override
protected void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
Point2D start = new Point2D.Float(4, 0);
Point2D end = new Point2D.Float(max, 0);
Collections.sort(list);
Color[] c = new Color[list.size()];
for (int i = 0; i < list.size(); i++) {
c[i] = list.get(i).getColorInner();
}
float[] dist = new float[list.size()];
for (int i = 0; i < list.size(); i++) {
double value = list.get(i).getX() - 4;
double defaultMax = max - 4;
if (Double.compare(value, defaultMax) > 0) {
// 设置了预定义的渐变色 渐变色起始位置比较大 然后由预定义样式切换到自定义样式 做下等比例转换
dist[i] = (float) (value / (GradientBackgroundPane.DEFAULT_GRADIENT_WIDTH - 4));
list.get(i).setX(max * dist[i]);
} else {
dist[i] = (float) (value / defaultMax);
}
}
LinearGradientPaint paint = new LinearGradientPaint(start, end, dist, c);
g2.setPaint(paint);
g2.fillRect(4, 0, max - 4, 30);
g2.setColor(new Color(138, 138, 138));
g2.drawRect(4, 0, max - 4, 30);
for (int i = 0; i < list.size(); i++) {
list.get(i).paint(g2);
}
}
/**
* 状态改变
*/
@ -281,14 +220,14 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
* @return
*/
public double getStartValue() {
return startLabel.getValue();
return p1.getStartPosition() * (max - min) + min;
}
/**
* @return
*/
public double getEndValue() {
return endLabel.getValue();
return p2.getStartPosition() * (max - min) + min;
}
/**
@ -296,7 +235,7 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
*/
public void setStartValue(double startValue) {
startLabel.setValue(startValue);
p1.setX(startValue);
p1.setStartPosition((startValue - min) / (max - min));
}
/**
@ -304,7 +243,7 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
*/
public void setEndValue(double endValue) {
endLabel.setValue(endValue);
p2.setX(endValue);
p2.setStartPosition((endValue - min) / (max - min));
}
/**
@ -359,4 +298,12 @@ public class GradientBar extends AbstractComponentPopBox implements UIObserver,
public void colorSetted(ColorCell colorCell) {
}
public boolean isDraggable() {
return draggable;
}
public void setDraggable(boolean draggable) {
this.draggable = draggable;
}
}

43
designer-base/src/main/java/com/fr/design/style/background/gradient/SelectColorPointBtn.java

@ -4,6 +4,7 @@ import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.GeneralPath;
import java.awt.geom.Path2D;
public class SelectColorPointBtn implements Comparable<SelectColorPointBtn> {
@ -11,12 +12,19 @@ public class SelectColorPointBtn implements Comparable<SelectColorPointBtn> {
private double y;
private double a = 4;
private double b = 4;
private GeneralPath ipath;
private GeneralPath jpath;
private Path2D ipath;
private Path2D jpath;
private Color colorInner;
// 起始位置,范围(0,1)
private double startPosition;
private double max;
/*提供一个可设置拖拉按钮边框颜色*/
private Color borderColor;
private boolean hover = false;
private boolean pressed = false;
public SelectColorPointBtn(double m, double n, Color colorInner){
this(m, n, colorInner, Color.BLACK);
}
@ -40,6 +48,14 @@ public class SelectColorPointBtn implements Comparable<SelectColorPointBtn> {
this.x = x;
}
public double getStartPosition() {
return startPosition;
}
public void setStartPosition(double startPosition) {
this.startPosition = startPosition;
}
public double getY() {
return y;
}
@ -84,6 +100,13 @@ public class SelectColorPointBtn implements Comparable<SelectColorPointBtn> {
g2.setColor(new Color(228, 228, 228));
g2.draw(jpath);
}
/**
* 更新拖拉按钮路径
*/
public void updatePath(Path2D directionalThumbShape) {
this.ipath = directionalThumbShape;
}
public boolean contains(double x, double y){
return ipath.contains(x, y);
@ -93,4 +116,20 @@ public class SelectColorPointBtn implements Comparable<SelectColorPointBtn> {
public int compareTo(SelectColorPointBtn o) {
return Double.compare(x, o.x);
}
public boolean isHover() {
return hover;
}
public void setHover(boolean b) {
hover = b;
}
public boolean isPressed() {
return pressed;
}
public void setPressed(boolean pressed) {
this.pressed = pressed;
}
}

3
designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLaf.properties

@ -45,4 +45,5 @@ TreeUI=com.fine.theme.light.ui.UIFlatTreeUI
ViewportUI=com.formdev.flatlaf.ui.FlatViewportUI
HeadGroupUI=com.fine.theme.light.ui.FineHeadGroupUI
ButtonGroupUI= com.fine.theme.light.ui.FineButtonGroupUI
SelectBoxUI= com.fine.theme.light.ui.FineSelectBoxUI
SelectBoxUI= com.fine.theme.light.ui.FineSelectBoxUI
GradientBarUI=com.fine.theme.light.ui.FineGradientBarUI

10
designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties

@ -706,6 +706,16 @@ FormSliderPane.showValueWidth=40
FormSliderPane.showValueHeight=20
FormSliderPane.sliderWidth=220
FormSliderPane.sliderHeight=20
#---- GradientBar ----
GradientBar.borderColor=$border.divider
GradientBar.thumbBorderColor=$border.divider
GradientBar.borderWidth=1
GradientBar.pressedThumbColor=@BrandColor
GradientBar.hoverThumbColor=@BrandColor
GradientBar.thumbWidth=12
GradientBar.recWidth=160
GradientBar.recHeight=30
#---- Spinner ----

7
designer-base/src/test/java/com/fr/design/gui/storybook/components/SliderStoryBoard.java

@ -4,6 +4,9 @@ import com.fr.design.gui.ilable.UILabel;
import com.fr.design.gui.islider.UISlider;
import com.fr.design.gui.storybook.Story;
import com.fr.design.gui.storybook.StoryBoard;
import com.fr.design.style.background.gradient.GradientBar;
import java.awt.Color;
import static com.fine.swing.ui.layout.Layouts.*;
@ -32,7 +35,9 @@ public class SliderStoryBoard extends StoryBoard {
it.setValue(40);
it.setMaximum(90);
it.setMinimum(-90);
}))
})),
cell(new UILabel("渐变色滑块")).with(this::h3),
row(cell(new GradientBar(6, 150)).with(it -> it.updateColor(new Color(55, 104, 196), new Color(180, 97, 39))))
);
}
}

Loading…
Cancel
Save