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

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

时间:2023-05-13 20:36:47浏览次数:29  
标签:外层 缩放 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";
  }
}

亲测实验可以

标签:外层,缩放,js,宽高比,矩形,溢出
From: https://www.cnblogs.com/tianmiaogongzuoshi/p/17398119.html

相关文章

  • GDI-InvalidateRect使客户区矩形区域的图形变得无效
     RECTrect;::GetClientRect(m_hWnd,&rect);//获取窗口客户区的坐标BOOLb=::InvalidateRect(m_hWnd,&rect,TRUE);//使客户区矩形区域的图形变得无效/*使原来画的图像无效参数1:HWNDhWnd窗口句柄如果为NULL,则系统将在函数返......
  • js计算一个矩形内部,有一个等比缩放的矩形,如何判断宽和高那个先溢出外层的矩形
    最近在做jscanvas绘图需求时,遇到一个矩形图形重叠逻辑判断问题。一个任意矩形内部,有一个任意等比缩放的矩形,如何判断宽和高那个先溢出外层的矩形?宽和高那个先贴到边上?可以根据两个矩形的比例关系来判断宽和高那个先溢出。首先计算出两个矩形的宽高比,然后比较它们的大小关系。......
  • 常用模块,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类似但其可以重复使用......