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

子功能：图片边框
【问题原因】
交互重新设计
【改动思路】
【review建议】

designer-form/src/main/java/com/fr/design/gui/xpane/BorderLineAndImagePane.java

@@ -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();
+            previewPane.setPreferredSize(new Dimension(615, 462));
-            content.setBorder(BorderFactory.createEmptyBorder(
+            previewPane.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);
         }
 
         @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 BACKGROUND_PANE_COLOR = Color.WHITE;
-
+        public final Color BACKGROUND_IMG_COLOR = Color.lightGray;
-        public final Color PATCH_COLOR = new Color(0, 0, 0, 38);
+        public final Color DIVIDER_BACKGROUND_COLOR = Color.WHITE;
-        public final Color DIVIDER_COLOR = new Color(250, 250, 250);
+        public final Color DIVIDER_FOREGROUND_COLOR = Color.BLACK;
-        public final Color TEXT_COLOR = Color.WHITE;
+        public final Color HINT_BACKGROUND_COLOR = new Color(255, 255, 255, 100);
-        public final int PADDING = 15;
+        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);
+            drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, scaleImgX, topYInPane, scaleImgX + scaleImgWidth, topYInPane);
-            // draw vertical patch
+            // 底部
-            GraphDrawHelper.fillRect(g2d, scaleImgX + scaleLeft, 0,scaleImgWidth - scaleLeft - scaleRight, getHeight());
+            drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, scaleImgX, bottomYInPane, scaleImgX + scaleImgWidth, bottomYInPane);
-
+            // 左侧
-            g2d.setColor(DIVIDER_COLOR);
+            drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, leftXInPane, scaleImgY, leftXInPane, scaleImgY + scaleImgHeight);
-            // draw top divider
+            // 右侧
-            GraphDrawHelper.drawLine(g2d, 0, topYInPane, getWidth(), topYInPane);
+            drawLine(g2d, DIVIDER_BACKGROUND_COLOR, DIVIDER_FOREGROUND_COLOR, rightXInPane, scaleImgY, rightXInPane, scaleImgY + scaleImgHeight);
-            // draw bottom divider
+
-            GraphDrawHelper.drawLine(g2d, 0, bottomYInPane, getWidth(), bottomYInPane);
+            // 绘制分割线位置提示
-            // draw left divider
+            // 顶部
-            GraphDrawHelper.drawLine(g2d, leftXInPane, 0, leftXInPane, getHeight());
+            drawLine(g2d, HINT_LINE_BACKGROUND_COLOR, HINT_LINE_FOREGROUND_COLOR, (leftXInPane + rightXInPane) / 2.0F, scaleImgY, (leftXInPane + rightXInPane) / 2.0F, topYInPane);
-            // draw right divider
+            drawHint(g2d, Integer.toString(ninePointTop), (leftXInPane + rightXInPane) / 2.0F, (scaleImgY + topYInPane) / 2.0, topField);
-            GraphDrawHelper.drawLine(g2d, rightXInPane, 0, rightXInPane, getHeight());
+            // 底部
-
+            drawLine(g2d, HINT_LINE_BACKGROUND_COLOR, HINT_LINE_FOREGROUND_COLOR, (leftXInPane + rightXInPane) / 2.0F, bottomYInPane, (leftXInPane + rightXInPane) / 2.0F, scaleImgY + scaleImgHeight);
-            g2d.setColor(TEXT_COLOR);
+            drawHint(g2d, Integer.toString(ninePointBottom), (leftXInPane + rightXInPane) / 2.0F, (bottomYInPane + scaleImgY + scaleImgHeight) / 2.0, bottomField);
-            // draw nine point info
+            // 左侧
-            GraphDrawHelper.drawString(g2d, Integer.toString(ninePointTop), (leftXInPane + rightXInPane) / 2.0F, topYInPane / 2.0);
+            drawLine(g2d, HINT_LINE_BACKGROUND_COLOR, HINT_LINE_FOREGROUND_COLOR, scaleImgX, (topYInPane + bottomYInPane) / 2.0, leftXInPane, (topYInPane + bottomYInPane) / 2.0);
-            GraphDrawHelper.drawString(g2d, Integer.toString(ninePointBottom), (leftXInPane + rightXInPane) / 2.0F, (bottomYInPane + getHeight()) / 2.0);
+            drawHint(g2d, Integer.toString(ninePointLeft), (scaleImgX + leftXInPane) / 2.0, (topYInPane + bottomYInPane) / 2.0, leftField);
-            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, 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) {
+                    this.onNinePointLeftChanged(nextLeft);
-                        ninePointLeft = nextLeft;
-                        repaint();
-                    }
                     return;
                 }
                 case Cursor.E_RESIZE_CURSOR: {
                     int nextRight = (int) ((scaleImgX + scaleImgWidth - x) / scale);
-                    if (1 <= nextRight && nextRight < imgWidth - ninePointLeft) {
+                    this.onNinePointRightChanged(nextRight);
-                        ninePointRight = nextRight;
-                        repaint();
-                    }
                     return;
                 }
                 case Cursor.N_RESIZE_CURSOR: {
                     int nextTop = (int) ((y - scaleImgY) / scale);
-                    if (1 <= nextTop && nextTop < imgHeight - ninePointBottom) {
+                    this.onNinePointTopChanged(nextTop);
-                        ninePointTop = nextTop;
-                        repaint();
-                    }
                     return;
                 }
                 case Cursor.S_RESIZE_CURSOR: {
                     int nextBottom = (int) ((scaleImgY + scaleImgHeight - y) / scale);
-                    if (1 <= nextBottom && nextBottom < imgHeight - ninePointTop) {
+                    this.onNinePointBottomChanged(nextBottom);
-                        ninePointBottom = nextBottom;
-                        repaint();
-                    }
                 }
             }
         }
@@ -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 hoveringLeftDivider = false;
-            boolean hoveringRightDivider = Math.abs(x - (scaleImgX + scaleImgWidth - scaleRight)) < 2;
+            boolean hoveringRightDivider = false;
-            boolean hoveringTopDivider = Math.abs(y - (scaleImgY + scaleTop)) < 2;
+            boolean hoveringTopDivider = false;
-            boolean hoveringBottomDivider = Math.abs(y - (scaleImgY + scaleImgHeight - scaleBottom)) < 2;
+            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() {