单击画布中的给定元素 [英] Click on given element in canvas

问题描述

有没有任何窍门来确定用户是否点击在canvas中呈现的给定元素？例如，我从.png文件显示菱形，透明背景，我想知道用户点击里面或外面的图（如鼠标元素碰撞）。

Is there any trick to determine if user clicks on given element rendered in canvas? For example I'm displaying rhombus from .png file with transparent background and i want to know if user click inside or outside that figure (like mouse-element collision).

推荐答案

画布中没有单个元素的概念 - 它只是一个您正在绘制像素的区域。 SVG另一方面是由元素组成，然后你可以绑定事件。但是，有几种方法可以将点击事件添加到画布中：

There is no concept of individual elements in a canvas - it is simply just an area that you're drawing pixels onto. SVG on the other hand is made up of elements which you can then bind events to. However there are a few approaches you can take to add click events to canvas:

1. 定位一个覆盖区域的html元素您想要点击的画布。

1. Position an html element that overlays the area on the canvas you want to be clickable. A for a rectangular area or an image map for something more irregular.

对每个要点击的元素使用单独的画布。

Use separate canvases for each element that you want to be clickable.

CAKE - 我没有使用这个自己，但它的描述是SVG sans XML。这可能满足您的需求。此处演示 http://glimr.rubyforge.org/cake/canvas.html#EditableCurve

CAKE - I haven't used this myself, but it's description is "SVG sans the XML". This may cover your needs. Demos here http://glimr.rubyforge.org/cake/canvas.html#EditableCurve

这篇关于单击画布中的给定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！