如何获取画布中绘制对象的位置

Question

我想做的是绘制简单的形状，比如说用鼠标绘制矩形，并直接从画布获取他的坐标、高度和宽度，这可能吗？

我写了这个函数：

function getImageProperties(image){
    var xMin = image.width;
    var xMax = 0;
    var yMin = image.height;
    var yMax = 0;
    var w = image.width, h = image.height;
     for (var y = 0; y < h; y ++) {
       for (var x = 0; x < w; x ++) {
           for (var c = 1; c < 5; c += 1) {
           var i = (x + y * w) + c;
           if(image.width* image.height * 4 != i){
                if(image.data[i] != 0){
                    if(x<xMin)
                        xMin = x;
                    if(x>xMax)
                        xMax = x;
                    if(y<yMin)
                        yMin = y;
                    if(y>yMax)
                        yMax = y;
                }
            }
         }
       }
     }
    var imgProp = {
        x : xMin,
        y : yMin,
        width: (xMax-xMin),
        height : (yMax-yMin)
    };
    return imgProp;
}

但

image = context.getImageData(0, 0, context.canvas.width, context.canvas.height);

返回的数据与我发送到绘图函数的数据不同：/

Answer 1

它看起来就像您试图找到包围图像数据中所有非黑色像素的矩形，但如果是这样，我可以看到一些小问题，主要是偏移计算。试试这个：

function getImageProperties(image){
    var xMin = image.width - 1;
    var xMax = 0;
    var yMin = image.height - 1;
    var yMax = 0;
    var w = image.width, h = image.height;
     for (var y = 0; y < h; ++y) {
        for (var x = 0; x < w; ++x) {
           var i = 4 * (y * w + x);
           for (var c = 0; c < 4; ++c, ++i) {
              if (c != 3 && image.data[i]) { // ignore the alpha channel
                 xMin = Math.min(x, xMin);
                 xMax = Math.max(x, xMax);
                 yMin = Math.min(y, yMin);
                 yMax = Math.max(y, yMax);
              }
           }
        }
     }

     return {
        x : xMin,
        y : yMin,
        width: (xMax - xMin) + 1,
        height : (yMax - yMin) + 1
     };
 }

也就是说，如果您只是用鼠标绘制矩形，那么简单地记录鼠标事件处理程序中使用的最后两对坐标会容易得多！

Answer 2

您可以尝试使用 getImageData 读取像素颜色，但这确实不是一个好主意。

最好的方法是将位置和其他数据存储在画布外部的数组中。