软件项目技术点(4)——实现点击画布上元素

元素和影子

我们在主画布上绘制所有添加到画布上的元素，主画布上的所有元素存储在commonElements中。

在hitCanvas上，对应每一个元素commonElement都有一个对应的hitElement元素，这些元素存储在另外一个集合hitElements中。每一个hitElement元素对应的是我们在另外一个hitCanvas画布上绘制的各色矩形，并且每个矩形用的颜色rgb值都是不一样的（创建元素时随机生成的颜色值）。

commonElements和hitElements这两个集合都是哈希表，hashtable的键值均为一个六位的rgb颜色值。

当我们的鼠标在画布上点击时，点到的元素呈现编辑状态，但是怎么计算得到具体点击到哪个元素上呢？这个rgb值是最关键的。

下面是展示的一个作品中commonElements和hitElements的所有元素：

主画布canvas的元素绘制如下： 

hitCanvas上每个元素的矩形如下图，

生成随机色值

我们生成随机色值的方法如下：

public getUniqueColorKey() {
            var key, elements = this.commonElements;
            while (true) {
                key = Common.Util.getRandomColor();//方法如下
                if (key && !(elements.has(key))) {//判断生成的key是否已经使用
                    break;
                }
            }
            return key;
        }

//另一个文件中的getRandomColor
   public static getRandomColor() {
            var randColor = (Math.random() * 0xFFFFFF << 0).toString(16);
            while (randColor.length < 6) {
                randColor = "0" + randColor;
            }
            return "#" + randColor;
        }

getRandomColor生成随机颜色的方法参见 http://www.neatstudio.com/archives/?article-1008.html

getImageData获取像素点数据

当鼠标点击到canvas画布上时，通过hitCanvas上的鼠标点坐标获取到该点的data

editor.canvas.canvasImp.getActiveElement(mouseInfo, editor.hitCanvas.context);//获取点击的元素

        public getActiveElement(e, cxt) {
            var p = cxt.getImageData(e.mouseX, e.mouseY, 1, 1).data;
            if (p[3] == 255) {
                // fully opaque pixel
                var colorKey = "#" + Common.Util.rgbToHex(p[0], p[1], p[2]);
                var activeEle = this.commonElements.get(colorKey);
                return activeEle;
            }
            return null;
        }

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

• R - 红色 (0-255)
• G - 绿色 (0-255)
• B - 蓝色 (0-255)
• A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

如取画布点(500,300)，该点对应上面hitCanvas图中黄色块的某一点坐标，得到的ImageData如下