任务27：在IDE中直接创建不规则图形的hitArea

一、任务目标

在上一任务中我们学习了如何使用代码创建图形的点击区域，其实在IDE中我们可以可视化的创建点击区域和非点击区域。

二、任务分解

首先在IDE中添加一个图片，并且为这个图片添加点击事件。

onAwake(): void {
	this.image.on("click",this,()=>{
		console.log("image click!");
	});
}

将脚本挂载到场景中，运行可以发现目前只要是在红色框内的部分，都可以点击到。
接着我们创建不可点击区域。

在图片节点下创建Graphics节点，绘制一个长方形，接着将rendType这个属性修改为unHit。

运行后可以发现现在无论点击红色的区域还是其他没有被红色覆盖的区域，都无法触发点击事件。

• 注意：上面的图片是IDE中的样子，实际运行后Graphics节点由于设置了rendType属性所以是不会绘制图形的。

接着我们将rendType属性设置为hit，运行后可以发现现在点击下半部分可以触发点击事件，点击图片上半部分则没有触发点击事件。

现在我们尝试在同一个图片节点下创建两个Graphics节点，绘制两个长方形，上半部分设置为hit，下半部分设置为unHit.
运行后发现上半部分可以触发点击事件，但是下半部分无法触发点击事件。

三、总结

• 通过修改绘制的矢量图的rendType属性可以将矢量图变为点击或者非点击区域
• rendType属性只支持矩形、圆、多边形，其他的设置无效
• 无论设置点击区域hit还是非点击区域unHit，图片的其他部分都会变成非点击区域
• 有时非点击区域和点击区域同时设置时会造成点击区域被覆盖失效，可以尝试修改顺序或者直接使用一种实现
• 非规则图形的点击事件一般用多边形的hit实现