javascript - canvas画两个四边形的问题

问题描述

问 题

如图,我在一个canvas上画了两个四边形,这两个四边形都可以拉伸

现在是有两个需求:
1.这两个四边形都不可以拉成凹四边形;
2.小四边形要在大四边形范围之内;

我的思路是这样的:

A点是四边形要拖动的那个点,他的活动范围是如图的阴影部分
分别计算这三条线的斜率,使a点满足图中的不等式...
同理计算外面的大四边形斜率 ,a点只能在同时满足这些条件的范围内拉伸

不知道我想的是否可行,大神门有没有更好的办法求教~~~

解决方案

1.对于这两个四边形自身,他们任意一点都不在其他三点组成的三角形区域内;//保证自身是不是凹四边形
2.拖动小四边形时,小四边形任意一点都必须在大四边形区域内;
3.拖动大四边形时,小四边形任意一点都必须在大四边形区域内;
满足这三个条件,就基本完成了楼主的需求.
关于判断点是否在区域内,参考了芋头大神的js代码:http://html-js.com/article/1185

这篇关于javascript - canvas画两个四边形的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！