首页 > 其他分享 >js计算一个矩形内部,有一个等比缩放的矩形,如何判断宽和高那个先溢出外层的矩形

js计算一个矩形内部,有一个等比缩放的矩形,如何判断宽和高那个先溢出外层的矩形

时间:2023-05-13 20:31:45浏览次数:29  
标签:外层 return 缩放 js 宽高比 矩形 溢出

最近在做js canvas绘图需求时,遇到一个矩形图形重叠逻辑判断问题。 一个任意矩形内部,有一个任意等比缩放的矩形,如何判断宽和高那个先溢出外层的矩形?宽和高那个先贴到边上?

在这里插入图片描述 可以根据两个矩形的比例关系来判断宽和高那个先溢出。首先计算出两个矩形的宽高比,然后比较它们的大小关系。 若外层矩形的宽高比大于内层矩形的宽高比,则内层矩形先溢出的是宽;反之,先溢出的是高。

具体实现的代码示例如下:

function checkOverflow(outerWidth, outerHeight, innerWidth, innerHeight) {
  // 父矩形比例
  let outerRatio = outerWidth / outerHeight;
  // 子矩形比例
  let innerRatio = innerWidth / innerHeight;

  if (outerRatio > innerRatio) {
    // 宽先溢出
    return "width";
  } else {
    // 高先溢出
    return "height";
  }
}

亲测实验可以

标签:外层,return,缩放,js,宽高比,矩形,溢出
From: https://blog.51cto.com/u_15650730/6273824

相关文章

  • 常用模块,time,random,json,os
    模块底层都是c语言写的模块的分类内置模块,不需要自己安装,直接拿过来用扩展模块,第三方模块,需要自己安装本地编辑器安装小白教程(forchange.cn)random随机数.random()不入参,求(0,1)之间的随机数,开区间.randint(a,b)求随机整数,闭区间[a,b].randrange(start,stop,step......
  • mockjs
    开始mock一个用于拦截ajax请求,并返回模拟数据的库。主要让前端独立于后端进行开发,通过pnpmaddmockjs来进行安装基础初窥门径vardata=Mock.mock({//属性list的值是一个数组,其中含有1到10个元素'list|1-10':[{//属性id是一个自增数,起始值为1......
  • JSP_5.11_课堂笔记
    insert.jsp<%@pageimport="java.sql.Statement"%><%@pageimport="java.sql.Connection"%><%@pageimport="java.sql.DriverManager"%><%@pagelanguage="java"contentType="text/html;charset=UT......
  • 解决vue.js出现Vue.js not detected错误
    VUEvue-devtools安装成功,但是图标为灰色,且控制台无vue选项的解决办法今天在学习VUE的过程中,安装了vue-devtools工具,但是发现图标一直是灰色,解决后,记录一下解决办法:1.查看拓展程序打开开发者模式和插件,如图所示两个开关,具体操作为:点击浏览器右上角三个点→更多工具→扩展工具......
  • js的一些常用命令
    一、数组相关1.查询数组内单个坐标array.indexof会返回指定元素坐标leta=[1,2,"aa"];letindex_aa=a.indexof("aa")console.log(index_aa)2.删除数组指定坐标array.splice(数组下标,1)会修改原数组的长度deletearr[数组下......
  • Node.js & Raspberry Pi & WS2812B RGB LEDs strip All In One
    Node.js&RaspberryPi&WS2812BRGBLEDsstripAllInOneNode.js&RaspberryPi&WS2812BRGBLED灯带Node.jshttps://www.w3schools.com/nodejs/nodejs_raspberrypi.aspdemos(......
  • com-alibaba-fastjson转换json时默认将属性第一个字母转小写
    问题描述将实体类对象转为json字符串的时候,会将属性名首字母改为小写例如此出User队形有两个属性,USER_NAME和USER_AGE,首字母均为大写将实体类对象转为JSON后首字母全都转换为了小写解决方法这是因为阿里巴巴的fastjson框架默认使用了JavaBean规范中的命名约定,将属性名首字......
  • CSS、JS、jQuery中选择器总结
    CSS、JS、jQuery中选择器总结CSS中选择器:1.元素选择器:根据标签名来选中指定元素语法:标签名{}2.将被指定的元素设为不同样式ID选择器,根据元素的ID属性值选中一个元素语法:#ID属性值{}设置了重复的ID也可设置同样的效果3.class标签属性;每个标签都有和ID类似但其可以重复使用......
  • Json序列化对象后,使用Lombok后属性xAxis大写变成小写xaxis解决方法
    一、问题描述最近在开发后端接口时,发现返回结构中,一个字段大小写转化有问题。lombok版本:1.18.14VO对象如下,字段为echarts趋势图组件。预期返回xAxis,实际返回xaxis@DatapublicclassULineBarVO{/***X轴信息*/privateULineBarDataVOxAxis;/*......
  • js小数运算出现的问题(精度丢失)及解决办法
    案例:项目中遇到的问题购物车结算时,商品价格(33.01)-优惠券价格(5),本应该是28.01,但是实际的结果是28.009999999999998本案例是在浏览器控制台里打印 出现的原因:原因其实就是js number类型运算都需要先将十进制转二进制但小数点后的位数转二进制会出现无限循环的问题,只能舍0......