Как получить положение нарисованного объекта на холсте

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, но это действительно не очень хорошая идея.

Наилучший подход - хранить позиции и другие данные в массиве вне холста.