美文网首页
Canvas中的矩形相交问题

Canvas中的矩形相交问题

作者: 依然还是或者其他 | 来源:发表于2021-02-23 23:07 被阅读0次

矩形相交问题

近期碰到一个问题,需要在一个Canvas画布中,画出多个矩形且不重叠,即矩形相交且不相互包含。
矩形1(x1,y1,w1,h1)
矩形2(x2,y2,w2,h2)
即左上角x坐标,左上角y坐标,宽,高

判断两个矩形的中心坐标的水平和垂直距离

矩形1中心(x1c,y1c)
矩形2中心(x2c,y2c)
当中心满足一下条件,即可说明两个矩形相交

  1. |x1c-x2c|<=w1/2+w2/2
  2. |y1c-y2c|<=h1/2+h2/2

相交矩形的面积

假设两个矩形相交,设相交之后的矩形3,且矩形3的左上角坐标为(x3_1,y3_1),右下角坐标为(x3_2,y3_2)
x3_1=max(x1,x2)
y3_1=max(y1,y2)
x3_2=max(x1+w1,x2+w2)
y3_2=max(y1+h1,y2+h2)
即可求出相交矩形的面积

由此问题也衍生出其他相关的计算几何问题,也可以做相关的了解

参考:
https://yq.aliyun.com/articles/398884
https://www.cnblogs.com/zhoug2020/p/7451340.html

相关文章

  • Canvas中的矩形相交问题

    矩形相交问题 近期碰到一个问题,需要在一个Canvas画布中,画出多个矩形且不重叠,即矩形相交且不相互包含。矩形1...

  • 学习canvas

    HTML中的元素canvas只支持一种原生的图形绘制:矩形。canvas提供了三种方法绘制矩形 fillRect(...

  • HTML5 Canvas笔记——Canvas绘制矩形(外角矩形和

    Canvas绘制内角矩形 效果如图: Canvas绘制外角矩形 效果如图:

  • canvas

    canvas动画思想 canvas 面向对象思想 绘制矩形、直线 填充矩形 矩形边框 擦除画布 绘制路径(逆时针绘...

  • 【python】判定矩形交集?

    题目:给定两个坐标轴对齐的矩形,判定它们是否相交;如果相交,给出它们相交所形成的矩形。 分析:在二维平面中,如果一...

  • UI框架

    canvas strokeRect() 矩形 不填色fillrect() 矩形 ...

  • 判断矩形是否相交以及求出相交的区域(含Demo)

    设计一个算法,确定两个矩形是否相交(即有重叠区域) 如果两个矩形相交,设计一个算法,画出相交的区域矩形 拖动矩形,...

  • HTML5中canvas使用

    1、Canvas基础 2、Canvas画直线 3、Canvas画矩形 4、Canvas画文字 5、Canvas画圆...

  • canvas

    canvas 画布标签strokeRect() 绘制空心矩形fillRect() 绘制实心矩形clearRe...

  • Android绘图理解与使用

    1.Android canvas基本API: 矩形的点: drawPoint()线: drawLine()矩形:d...

网友评论

      本文标题:Canvas中的矩形相交问题

      本文链接:https://www.haomeiwen.com/subject/oztmnctx.html