fanruan
/
design
6
1
Fork 2
Code Issues 2 Pull Requests Releases Wiki Activity
Browse Source

REPORT-53175 【10.0.18】组件背景分离为标题/背景/边框 

子功能：图片边框
【问题原因】
交互重新设计
【改动思路】
【review建议】
feature/10.0
Starryi 3 years ago
parent
26f2825ccb
commit
29009e8d6b
2 changed files with 183 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      designer-base/src/main/resources/com/fr/design/images/transparent_background.jpg
  2. 246
      designer-form/src/main/java/com/fr/design/gui/xpane/BorderLineAndImagePane.java

BIN
designer-base/src/main/resources/com/fr/design/images/transparent_background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

246
designer-form/src/main/java/com/fr/design/gui/xpane/BorderLineAndImagePane.java
Unescape View File

@ -20,6 +20,7 @@ import com.fr.design.gui.ibutton.UIButtonUI;
import com.fr.design.gui.ibutton.UIColorButton;
import com.fr.design.gui.icombobox.LineComboBox;
import com.fr.design.gui.ilable.UILabel;
import com.fr.design.gui.itextfield.UIIntNumberField;
import com.fr.design.layout.FRGUIPaneFactory;
import com.fr.design.layout.TableLayout;
import com.fr.design.layout.TableLayoutHelper;
@ -44,11 +45,13 @@ import javax.swing.plaf.basic.BasicButtonUI;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.FocusAdapter;
import java.awt.event.FocusEvent;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.geom.Line2D;
import java.awt.geom.RoundRectangle2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.net.URI;
@ -65,7 +68,7 @@ import java.util.Arrays;
public class BorderLineAndImagePane extends JPanel implements UIObserver {
private final int SETTING_LABEL_WIDTH = LayoutStylePane.SETTING_LABEL_WIDTH;
private final Style DEFAULT_IMAGE_LAYOUT_STYLE = Style.DEFAULT_STYLE.deriveImageLayout(Constants.IMAGE_DEFAULT);
private final String TWEAK_NINE_POINT_HELP_URL = "";
private final String TWEAK_NINE_POINT_HELP_URL = "https://help.fanruan.com/finereport/doc-view-4135.html";
private UIObserverListener uiObserverListener;
@ -415,18 +418,11 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
private void initComponents() {
setLayout(new BorderLayout());
setBorder(BorderFactory.createTitledBorder(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Widget_Style_Border_Image_Config_Nine_Point_Fill_Preview")));
setBorder(BorderFactory.createEmptyBorder());
add(previewPane, BorderLayout.CENTER);
JPanel content = FRGUIPaneFactory.createBorderLayout_S_Pane();
content.setBorder(BorderFactory.createEmptyBorder(
IntervalConstants.INTERVAL_W1,
IntervalConstants.INTERVAL_W1,
IntervalConstants.INTERVAL_W1,
IntervalConstants.INTERVAL_W1));
content.add(previewPane);
previewPane.setPreferredSize(new Dimension(611, 457));
add(content, BorderLayout.CENTER);
previewPane.setPreferredSize(new Dimension(615, 462));
previewPane.setBorder(BorderFactory.createEmptyBorder());
}
@Override
@ -436,18 +432,23 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
}
private class NinePointLinePreviewPane extends JPanel implements MouseMotionListener, MouseListener {
private final BufferedImage transparentImage = IOUtils.readImage("/com/fr/design/images/transparent_background.jpg");
public final Color PATCH_COLOR = new Color(0, 0, 0, 38);
public final Color DIVIDER_COLOR = new Color(250, 250, 250);
public final Color TEXT_COLOR = Color.WHITE;
public final int PADDING = 15;
public final Color BACKGROUND_PANE_COLOR = Color.WHITE;
public final Color BACKGROUND_IMG_COLOR = Color.lightGray;
public final Color DIVIDER_BACKGROUND_COLOR = Color.WHITE;
public final Color DIVIDER_FOREGROUND_COLOR = Color.BLACK;
public final Color HINT_BACKGROUND_COLOR = new Color(255, 255, 255, 100);
public final Color HINT_FOREGROUND_COLOR = Color.RED;
public final Color HINT_LINE_BACKGROUND_COLOR = Color.WHITE;
public final Color HINT_LINE_FOREGROUND_COLOR = Color.RED;
public final int PADDING = 20;
private int ninePointLeft = -1;
private int ninePointTop = -1;
private int ninePointRight = -1;
private int ninePointBottom = -1;
private static final int MIN_NINE_POINT = 0;
private int imgWidth;
private int imgHeight;
private int scaleImgWidth;
@ -456,9 +457,52 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
private int scaleImgY;
private double scale = 1.0;
private final UIIntNumberField topField = createNumberField();
private final UIIntNumberField bottomField = createNumberField();
private final UIIntNumberField leftField = createNumberField();
private final UIIntNumberField rightField = createNumberField();
public NinePointLinePreviewPane() {
this.setLayout(null);
this.addMouseMotionListener(this);
this.addMouseListener(this);
this.setFocusable(true);
this.add(topField);
this.add(bottomField);
this.add(leftField);
this.add(rightField);
topField.addFocusListener(new FocusAdapter() {
@Override
public void focusLost(FocusEvent e) {
int value = (int) topField.getValue();
onNinePointTopChanged(value);
}
});
bottomField.addFocusListener(new FocusAdapter() {
@Override
public void focusLost(FocusEvent e) {
int value = (int) bottomField.getValue();
onNinePointBottomChanged(value);
}
});
leftField.addFocusListener(new FocusAdapter() {
@Override
public void focusLost(FocusEvent e) {
int value = (int) leftField.getValue();
onNinePointLeftChanged(value);
}
});
rightField.addFocusListener(new FocusAdapter() {
@Override
public void focusLost(FocusEvent e) {
int value = (int) rightField.getValue();
onNinePointRightChanged(value);
}
});
}
@Override
@ -466,7 +510,9 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(transparentImage, 0, 0, getWidth(), getHeight(), null);
g2d.setColor(BACKGROUND_PANE_COLOR);
g2d.fillRect(0, 0, getWidth(), getHeight());
Image image = imagePreviewPane.getImage();
@ -491,6 +537,8 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
scale = 1.0 * scaleImgHeight / imgHeight;
}
g2d.setColor(BACKGROUND_IMG_COLOR);
g2d.fillRect(scaleImgX, scaleImgY, scaleImgWidth, scaleImgHeight);
g2d.drawImage(image, scaleImgX, scaleImgY, scaleImgWidth, scaleImgHeight, null);
int scaleLeft = (int) (ninePointLeft * scale);
@ -503,28 +551,45 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
double leftXInPane = scaleImgX + scaleLeft;
double rightXInPane = scaleImgX + scaleImgWidth - scaleRight;
g2d.setColor(PATCH_COLOR);
// draw horizontal patch
GraphDrawHelper.fillRect(g2d, 0, topYInPane, getWidth(), scaleImgHeight - scaleTop - scaleBottom);
// draw vertical patch
GraphDrawHelper.fillRect(g2d, scaleImgX + scaleLeft, 0,scaleImgWidth - scaleLeft - scaleRight, getHeight());
g2d.setColor(DIVIDER_COLOR);
// draw top divider
GraphDrawHelper.drawLine(g2d, 0, topYInPane, getWidth(), topYInPane);
// draw bottom divider
GraphDrawHelper.drawLine(g2d, 0, bottomYInPane, getWidth(), bottomYInPane);
// draw left divider
GraphDrawHelper.drawLine(g2d, leftXInPane, 0, leftXInPane, getHeight());
// draw right divider
GraphDrawHelper.drawLine(g2d, rightXInPane, 0, rightXInPane, getHeight());
g2d.setColor(TEXT_COLOR);
// draw nine point info
GraphDrawHelper.drawString(g2d, Integer.toString(ninePointTop), (leftXInPane + rightXInPane) / 2.0F, topYInPane / 2.0);
GraphDrawHelper.drawString(g2d, Integer.toString(ninePointBottom), (leftXInPane + rightXInPane) / 2.0F, (bottomYInPane + getHeight()) / 2.0);
GraphDrawHelper.drawString(g2d, Integer.toString(ninePointLeft), leftXInPane / 2.0, (topYInPane + bottomYInPane) / 2.0);
GraphDrawHelper.drawString(g2d, Integer.toString(ninePointRight), (rightXInPane + getWidth()) / 2.0, (topYInPane + bottomYInPane) / 2.0);
// 绘制分割线
// 顶部
drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, scaleImgX, topYInPane, scaleImgX + scaleImgWidth, topYInPane);
// 底部
drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, scaleImgX, bottomYInPane, scaleImgX + scaleImgWidth, bottomYInPane);
// 左侧
drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, leftXInPane, scaleImgY, leftXInPane, scaleImgY + scaleImgHeight);
// 右侧
drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, rightXInPane, scaleImgY, rightXInPane, scaleImgY + scaleImgHeight);
// 绘制分割线位置提示
// 顶部
drawLine(g2d, HINT_LINE_BACKGROUND_COLOR, HINT_LINE_FOREGROUND_COLOR, (leftXInPane + rightXInPane) / 2.0F, scaleImgY, (leftXInPane + rightXInPane) / 2.0F, topYInPane);
drawHint(g2d, Integer.toString(ninePointTop), (leftXInPane + rightXInPane) / 2.0F, (scaleImgY + topYInPane) / 2.0, topField);
// 底部
drawLine(g2d, HINT_LINE_BACKGROUND_COLOR, HINT_LINE_FOREGROUND_COLOR, (leftXInPane + rightXInPane) / 2.0F, bottomYInPane, (leftXInPane + rightXInPane) / 2.0F, scaleImgY + scaleImgHeight);
drawHint(g2d, Integer.toString(ninePointBottom), (leftXInPane + rightXInPane) / 2.0F, (bottomYInPane + scaleImgY + scaleImgHeight) / 2.0, bottomField);
// 左侧
drawLine(g2d, HINT_LINE_BACKGROUND_COLOR, HINT_LINE_FOREGROUND_COLOR, scaleImgX, (topYInPane + bottomYInPane) / 2.0, leftXInPane, (topYInPane + bottomYInPane) / 2.0);
drawHint(g2d, Integer.toString(ninePointLeft), (scaleImgX + leftXInPane) / 2.0, (topYInPane + bottomYInPane) / 2.0, leftField);
// 右侧
drawLine(g2d, HINT_LINE_BACKGROUND_COLOR, HINT_LINE_FOREGROUND_COLOR, rightXInPane, (topYInPane + bottomYInPane) / 2.0, scaleImgX + scaleImgWidth, (topYInPane + bottomYInPane) / 2.0);
drawHint(g2d, Integer.toString(ninePointRight), (rightXInPane + scaleImgX + scaleImgWidth) / 2.0, (topYInPane + bottomYInPane) / 2.0, rightField);
}
private void drawHint(Graphics2D g2d, String hint, double centerX, double centerY, UIIntNumberField hintField) {
FontMetrics metrics = GraphDrawHelper.getFontMetrics(g2d.getFont());
double height = metrics.getAscent() + metrics.getDescent();
double width = Math.max(metrics.stringWidth(" " + hint + " "), metrics.stringWidth(" 123 "));
hintField.setBounds((int) (centerX - width / 2.0), (int) (centerY - height / 2.0), (int) width, (int) height);
}
private void drawLine(Graphics2D g2d, Color backgroundColor, Color foregroundColor, double x1, double y1, double x2, double y2) {
g2d.setColor(backgroundColor);
GraphDrawHelper.draw(g2d, new Line2D.Double(x1, y1, x2, y2), Constants.LINE_THIN, 2.0F);
g2d.setColor(foregroundColor);
GraphDrawHelper.draw(g2d, new Line2D.Double(x1, y1, x2, y2), Constants.LINE_DASH, 1.0F);
}
@Override
@ -537,34 +602,22 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
switch (cursorType) {
case Cursor.W_RESIZE_CURSOR: {
int nextLeft = (int) ((x - scaleImgX) / scale);
if (1 <= nextLeft && nextLeft < imgWidth - ninePointRight) {
ninePointLeft = nextLeft;
repaint();
}
this.onNinePointLeftChanged(nextLeft);
return;
}
case Cursor.E_RESIZE_CURSOR: {
int nextRight = (int) ((scaleImgX + scaleImgWidth - x) / scale);
if (1 <= nextRight && nextRight < imgWidth - ninePointLeft) {
ninePointRight = nextRight;
repaint();
}
this.onNinePointRightChanged(nextRight);
return;
}
case Cursor.N_RESIZE_CURSOR: {
int nextTop = (int) ((y - scaleImgY) / scale);
if (1 <= nextTop && nextTop < imgHeight - ninePointBottom) {
ninePointTop = nextTop;
repaint();
}
this.onNinePointTopChanged(nextTop);
return;
}
case Cursor.S_RESIZE_CURSOR: {
int nextBottom = (int) ((scaleImgY + scaleImgHeight - y) / scale);
if (1 <= nextBottom && nextBottom < imgHeight - ninePointTop) {
ninePointBottom = nextBottom;
repaint();
}
this.onNinePointBottomChanged(nextBottom);
}
}
}
@ -584,10 +637,17 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
// determine cursor
int cursorType = Cursor.DEFAULT_CURSOR;
boolean hoveringLeftDivider = Math.abs(x - (scaleImgX + scaleLeft)) < 2;
boolean hoveringRightDivider = Math.abs(x - (scaleImgX + scaleImgWidth - scaleRight)) < 2;
boolean hoveringTopDivider = Math.abs(y - (scaleImgY + scaleTop)) < 2;
boolean hoveringBottomDivider = Math.abs(y - (scaleImgY + scaleImgHeight - scaleBottom)) < 2;
boolean hoveringLeftDivider = false;
boolean hoveringRightDivider = false;
boolean hoveringTopDivider = false;
boolean hoveringBottomDivider = false;
if (scaleImgX - 2 <= x && x <= scaleImgX + scaleImgWidth + 2 && scaleImgY - 2 <= y && y <= scaleImgY + scaleImgHeight + 2) {
hoveringLeftDivider = Math.abs(x - (scaleImgX + scaleLeft)) < 2;
hoveringRightDivider = Math.abs(x - (scaleImgX + scaleImgWidth - scaleRight)) < 2;
hoveringTopDivider = Math.abs(y - (scaleImgY + scaleTop)) < 2;
hoveringBottomDivider = Math.abs(y - (scaleImgY + scaleImgHeight - scaleBottom)) < 2;
}
if (hoveringLeftDivider) {
cursorType = Cursor.W_RESIZE_CURSOR;
@ -609,7 +669,7 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
@Override
public void mouseClicked(MouseEvent e) {
requestFocus();
}
@Override
@ -634,12 +694,72 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
}
private void onNinePointTopChanged(int value) {
if (value < MIN_NINE_POINT) {
value = MIN_NINE_POINT;
} else if (value >= imgHeight - ninePointBottom) {
value = imgHeight - ninePointBottom - MIN_NINE_POINT;
}
this.ninePointTop = value;
topField.setText(Integer.toString(value));
repaint();
}
private void onNinePointBottomChanged(int value) {
if (value < MIN_NINE_POINT) {
value = MIN_NINE_POINT;
} else if (value >= imgHeight - ninePointTop) {
value = imgHeight - ninePointTop - MIN_NINE_POINT;
}
this.ninePointBottom = value;
bottomField.setText(Integer.toString(value));
repaint();
}
private void onNinePointLeftChanged(int value) {
if (value < MIN_NINE_POINT) {
value = MIN_NINE_POINT;
} else if (value >= imgWidth - ninePointRight) {
value = imgWidth - ninePointRight - MIN_NINE_POINT;
}
this.ninePointLeft = value;
leftField.setText(Integer.toString(value));
repaint();
}
private void onNinePointRightChanged(int value) {
if (value < MIN_NINE_POINT) {
value = MIN_NINE_POINT;
} else if (value >= imgWidth - ninePointLeft) {
value = imgWidth - ninePointLeft - MIN_NINE_POINT;
}
this.ninePointRight = value;
rightField.setText(Integer.toString(value));
repaint();
}
private UIIntNumberField createNumberField() {
UIIntNumberField field = new UIIntNumberField();
field.setBorder(BorderFactory.createLineBorder(Color.GRAY, 1));
field.setOpaque(true);
field.setMinValue(MIN_NINE_POINT);
field.setForeground(HINT_FOREGROUND_COLOR);
field.setBackground(HINT_BACKGROUND_COLOR);
field.setHorizontalAlignment(SwingConstants.CENTER);
return field;
}
public void setNinePoint(int[] ninePoint) {
ninePointLeft = ninePoint[0];
ninePointTop = ninePoint[1];
ninePointRight = ninePoint[2];
ninePointBottom = ninePoint[3];
leftField.setValue(ninePointLeft);
rightField.setValue(ninePointRight);
topField.setValue(ninePointTop);
bottomField.setValue(ninePointBottom);
}
public int[] getNinePoint() {

Write Preview
Loading…
Cancel
Save