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读取像素颜色，但这确实不是一个好主意。

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

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

2 个答案: