在画布上绘制的图像上添加另一个图像,然后让它响应onclick事件,是否可能?

时间:2010-08-05 07:20:37

标签: javascript html5 canvas yui

这是我遇到的一个画布应用程序:canvasphoto(我相信使用YUI 2,我之前没有使用过)。它在画布上显示图像,并允许您在画布上调整图像大小/移动图像。我想要做的是在画布上绘制的图像的右上方添加一个关闭按钮,并在单击时触发onclick事件(我会显示一个确认按钮,询问用户是否要删除图片)。

这可能吗?如果是这样,你能帮助我开始这个(资源/链接在画布上绘制的另一个图像上绘制图像,基本画布操作等)谢谢!

编辑:解决了渲染图像将响应点击的部分(仅在右上角)。因此,唯一的问题是在图像的右上角绘制关闭按钮。

2 个答案:

答案 0 :(得分:0)

如果没有额外的工作,就无法将canvas内的某些内容用于响应事件。您可以存储关闭框的位置,并在画布上有一个onclick事件,检查是否在矩形内发生了单击,或者您可以在画布上放置矩形的元素,并使用它来处理单击。相对定位的div没有内容可行。

答案 1 :(得分:0)

通过设置比画布更高的z-index和绝对位置(而不是在软木板上绘图),在图像的右上角上方上呈现带有图像的div。当然还有右上角的坐标。