当前位置: 首页 > 知识库问答 >
问题:

Java:保持JPanel背景图像的纵横比

叶阳
2023-03-14
public class MonitorPanel extends JPanel {
    Image img;
    public MonitorPanel() throws MalformedURLException {
        //add components

        try {
            img = ImageIO.read(new File("src/customer_vlans.jpg"));
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }
protected void paintComponent(Graphics g)
{
    //paint background image
    super.paintComponent(g);
    //g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
    g.drawImage(img, 0, 0, this);

}

}

编辑:我应该提到的是,我知道纵横比公式:原始高度/原始宽度x新宽度=新高度,但是,我不知道如何正确地使用它,以我的优势。

共有1个答案

诸新霁
2023-03-14

那么,最快捷、最简单的解决方案就是使用image.getScaledInstance

g.drawImage(img.getScaledInstance(newWidth, -1, Image. SCALE_SMOOTH), x, y, this);

如果您想知道负数,java文档会说:

如果宽度或高度为负数,则替换一个值以保持原始图像尺寸的纵横比。如果宽度和高度均为负值,则使用原始图像尺寸。

通过阅读Image.GetScaledInstance了解更多信息

更新

缩放图像以适应一个区域要比简单地缩放纵横比稍微复杂一些。你必须做出一个选择,是想让图像“适合”在区域内(可能在其周围留下空白区域),还是想让图像“填充”区域(这样它的最小维度适合区域的最大维度)。

public static double getScaleFactor(int iMasterSize, int iTargetSize) {

    double dScale = 1;
    if (iMasterSize > iTargetSize) {

        dScale = (double) iTargetSize / (double) iMasterSize;

    } else {

        dScale = (double) iTargetSize / (double) iMasterSize;

    }

    return dScale;

}

这两种方法都使用它。它们只需要两个维度。原物和目标。

public static double getScaleFactorToFit(Dimension original, Dimension toFit) {

    double dScale = 1d;

    if (original != null && toFit != null) {

        double dScaleWidth = getScaleFactor(original.width, toFit.width);
        double dScaleHeight = getScaleFactor(original.height, toFit.height);

        dScale = Math.min(dScaleHeight, dScaleWidth);

    }

    return dScale;

}

public static double getScaleFactorToFill(Dimension masterSize, Dimension targetSize) {

    double dScaleWidth = getScaleFactor(masterSize.width, targetSize.width);
    double dScaleHeight = getScaleFactor(masterSize.height, targetSize.height);

    double dScale = Math.max(dScaleHeight, dScaleWidth);

    return dScale;

}

将图像传入(直接或通过支持方法)相对简单。例如,您可以从paint方法中调用此命令

double factor getScaledFactorToFit(new Dimension(image.getWidth(), image.getHeight()), getSize());

int scaledWidth = image.getWidth() * scale;
int scaledHeight *= image.getWidth() * scale;

这将自动为您处理纵横比;)

public double getScaleFactor(int iMasterSize, int iTargetSize) {

    double dScale = 1;
    if (iMasterSize > iTargetSize) {

        dScale = (double) iTargetSize / (double) iMasterSize;

    } else {

        dScale = (double) iTargetSize / (double) iMasterSize;

    }

    return dScale;

}

public double getScaleFactorToFit(Dimension original, Dimension toFit) {

    double dScale = 1d;

    if (original != null && toFit != null) {

        double dScaleWidth = getScaleFactor(original.width, toFit.width);
        double dScaleHeight = getScaleFactor(original.height, toFit.height);

        dScale = Math.min(dScaleHeight, dScaleWidth);

    }

    return dScale;

}

@Override
protected void paintComponent(Graphics g) {

    super.paintComponent(g);

    double scaleFactor = Math.min(1d, getScaleFactorToFit(new Dimension(image.getWidth(), image.getHeight()), getSize()));

    int scaleWidth = (int) Math.round(image.getWidth() * scaleFactor);
    int scaleHeight = (int) Math.round(image.getHeight() * scaleFactor);

    Image scaled = image.getScaledInstance(scaleWidth, scaleHeight, Image.SCALE_SMOOTH);

    int width = getWidth() - 1;
    int height = getHeight() - 1;

    int x = (width - scaled.getWidth(this)) / 2;
    int y = (height - scaled.getHeight(this)) / 2;

    g.drawImage(scaled, x, y, this);

}
 类似资料:
  • 我在较小的设备宽度上遇到问题,其中div变得更加方形,景观也更少。div的背景图像设置为,因此它只占用div顶部60%的高度和100%的宽度。 如何将背景图像设置为覆盖div高度的100%,但保持其纵横比,以便部分背景图像被切断。 如何对齐背景图像,使其右侧位于div的右侧(因此背景图像的左侧将被div的左侧截断)。

  • 我有一个宽度为1900和高度为1000的图像,我使用的是和但我希望div高度与图像更改的高度相同。 示例: 在1366个屏幕中,图像将缩小尺寸以适应屏幕大小(宽度100%),因此,图像高度也将减小,因此我想获得该高度。 我试图做的是: HTML: CSS: 问题:vw是用滚动条宽度计算的,我想要没有,我可以使用宽度%而不是vw吗? 我接受别人的想法来做这件事,但我更喜欢使用CSS。

  • 使用CSS flex box模型,如何强制图像保持其纵横比? JS小提琴:http://jsfiddle.net/xLc2Le0k/2/ 请注意,为了填充容器的宽度,图像会拉伸或收缩。这很好,但是我们也能让它拉伸或收缩高度来保持图像比例吗? HTML CSS

  • 我希望一个图像填充其容器宽度的100%,并且我希望它设置最大高度属性,所有这些都保持纵横比,但允许丢失图像的任何部分。 我知道可以用背景大小属性做类似的事情,但我想把它变成内联的 你知道我如何使用CSS实现这一点吗?还是javascript?

  • 我在响应式站点上设置了flexSlider。我正在创建的滑块可以拍摄横向和纵向图像。我设置了,以便调整高度以适应图像。 在最大的媒体查询中,flexslider容器的宽度为750px。这对于横向图像很好,但纵向图像太大了。肖像图像的宽度设置为与容器相同的大小-750px宽,因此高度至少是容器宽度的两倍,因此如果不滚动,则无法查看整个图像。 在css中,我尝试设置最大高度:750px,这解决了高度问

  • 在我的网站上,用户可以上传图片。它们可以是各种大小的,但我想让它们装在相同高度的盒子里,这样它们就可以挨着放在一起,形成一个网格。图像应该在框中居中,保持其纵横比。我可以在CSS中这样做吗?我一直在尝试flexbox的东西,但我不能让它工作。