From 29009e8d6be4d9c384c61389da5ddc07dd16aa05 Mon Sep 17 00:00:00 2001 From: Starryi Date: Tue, 13 Jul 2021 17:51:41 +0800 Subject: [PATCH] =?UTF-8?q?REPORT-53175=20=E3=80=9010.0.18=E3=80=91?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=83=8C=E6=99=AF=E5=88=86=E7=A6=BB=E4=B8=BA?= =?UTF-8?q?=E6=A0=87=E9=A2=98/=E8=83=8C=E6=99=AF/=E8=BE=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 子功能：图片边框 【问题原因】 交互重新设计 【改动思路】 【review建议】 --- .../design/images/transparent_background.jpg | Bin 24869 -> 0 bytes .../gui/xpane/BorderLineAndImagePane.java | 246 +++++++++++++----- 2 files changed, 183 insertions(+), 63 deletions(-) delete mode 100644 designer-base/src/main/resources/com/fr/design/images/transparent_background.jpg diff --git a/designer-base/src/main/resources/com/fr/design/images/transparent_background.jpg b/designer-base/src/main/resources/com/fr/design/images/transparent_background.jpg deleted file mode 100644 index b04da96ea64527351d96ba579a8195ffa940a785..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24869 zcmeI)KS&!<9KiASJk6go*W@5tjL3zkZK!pSYNHVwF*UYs6%i^3LJJkUYnOtHQbZ{2 zE?B#iwsw#@>7e4EOL0*AQ(ElSC9OjzmouldHlvUe zXYOZ&lu``lUc&w=(!%fY`n(>$&+F55f2mO(Gy(ymGF%oak5=oI#|n>qfwc1cQ-8tyP;i_hK&#()PBIDjB{rvDlt{ zSn=&g_s6MUhqHAL{xt2&{+Dk)ZMODhMxXV3sBT?~Pi{RoM#lOWm_woBzoO&xY#Qt2 zY+>SH4lN`n(Gz>_6=Ms`a>Y@|i!ab(rY_`6O+@i81_CV=qX5EW_cI2d1zMoxO5zT* zK#Sb28)#GSTA&45paoi>#mz}*sI-REw8-MAoyBvlNuNjyTa>n?-L0GCK?}4%i$)9@F=)h~ z5rakyG*nwdA}t~E+QPZNPg@#INNP3WfNbP`#nid2oO@M2qC)WlBEzkn3 bi>hg@_j_)iJ(`_&f1iG@=8=f5NPF)X8B;4H diff --git a/designer-form/src/main/java/com/fr/design/gui/xpane/BorderLineAndImagePane.java b/designer-form/src/main/java/com/fr/design/gui/xpane/BorderLineAndImagePane.java index fcd9ed0103..6c19c9a63f 100644 --- a/designer-form/src/main/java/com/fr/design/gui/xpane/BorderLineAndImagePane.java +++ b/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(); - 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() {