根据屏幕的宽度,计算出图片占满屏幕的宽需要缩放的比例

根据屏幕的宽度,计算出图片占满屏幕的宽需要缩放的比例

/**
     * 计算出图片初次显示需要放大倍数
     *
     * @param imagePath 图片的绝对路径
     */
    public float getInitImageScale(String imagePath) {
        Bitmap bitmap = BitmapFactory.decodeFile(imagePath);
        WindowManager wm = this.getWindowManager();
        int width = wm.getDefaultDisplay().getWidth();
        int height = wm.getDefaultDisplay().getHeight();
        // 拿到图片的宽和高
        int dw = bitmap.getWidth();
        int dh = bitmap.getHeight();
        float scale = 1.0f;
        //图片宽度大于屏幕,但高度小于屏幕,则缩小图片至填满屏幕宽
        if (dw > width && dh <= height) {
            scale = width * 1.0f / dw;
        }
        //图片宽度小于屏幕,但高度大于屏幕,则放大图片至填满屏幕宽
        if (dw <= width && dh > height) {
            scale = width * 1.0f / dw;
        }
        //图片高度和宽度都小于屏幕,则放大图片至填满屏幕宽
        if (dw < width && dh < height) {
            scale = width * 1.0f / dw;
        }
        //图片高度和宽度都大于屏幕,则缩小图片至填满屏幕宽
        if (dw > width && dh > height) {
            scale = width * 1.0f / dw;
        }
        return scale;
    }
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3中,可以通过监听窗口大小变化事件,动态计算需要比例,从而实现根据屏幕大小自适应的效果。具体实现方法可以参考以下代码: ```html <template> <div :style="{transform: `scale(${scaleRatio})`}"> <!-- 需要自适应的内容 --> </div> </template> <script> import { reactive, onMounted, onUnmounted } from 'vue' export default { setup () { const state = reactive({ scaleRatio: 1 // 默认比例为1 }) // 监听窗口大小变化事件 const onResize = () => { const { innerWidth, innerHeight } = window const screenWidth = 1920 // 设计稿的宽度 const screenHeight = 1080 // 设计稿的高度 const scaleX = innerWidth / screenWidth const scaleY = innerHeight / screenHeight state.scaleRatio = scaleX > scaleY ? scaleY : scaleX // 取较小的比例 } onMounted(() => { window.addEventListener('resize', onResize) }) onUnmounted(() => { window.removeEventListener('resize', onResize) }) return state } } </script> ``` 在上面的代码中,我们使用了Vue3中的reactive函数创建了一个响应式对象state,用来保存当前的比例。在setup函数中,我们使用onMounted和onUnmounted函数分别在组件挂载和卸载时监听和移除窗口大小变化事件。在事件处理函数onResize中,我们根据窗口大小和设计稿的计算需要比例,并将其保存到state对象中。在模板中,我们使用:style绑定将比例应用到需要自适应的内容上,实现根据屏幕大小自适应的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值