Как получить координаты или положение фигуры (линии) на холсте?

Question

У меня есть холст, на котором есть фигура (например, таблица).Как я могу получить координаты линии в этой таблице?или x-координаты и y-координаты первой верхней строки таблицы?

 _________________________ <- this line   
|                         |
 _________________________
|                         |
 _________________________

, например: http://jsfiddle.net/trouble/CVjwj/

Спасибо

Answer 1

Для браузера, когда что-то нарисовано на холсте, браузер имеет столько информации, как если бы это был тег <img>. Браузер не знает о строках так же, как с границей CSS или элементом SVG. Вам придется использовать концепции распознавания изображений, чтобы найти границы, которые я бы не рекомендовал.

Правильный способ передать информацию о канве и способ, который принесет вам наименьшую головную боль, состоит в том, чтобы предоставить и холст, и подробности о нем программисту. Что-то вроде: «Вот холст, и я нарисовал линии здесь, здесь и здесь».

Например, у вас может быть объект JavaScript:

var table = {
    canvas: myCanvasElement,
    rows: [
        {
            cells: [
                {
                    x: 25,
                    y: 25
                    w: 100
                    h: 50
                }
            ]
        }
    ]
};

В идеале вы должны создать этот объект во время рисования на холсте.

Если вы хотите сделать это трудным способом, вы можете технически считывать один пиксель за раз и оценивать, является ли он черным или белым (если у вас нет размытых линий), но ваш программист все равно нужно будет знать, с чего начать проверку. Это намного дороже в вычислительном отношении, сложнее программировать и более хрупко, если вы решите внести изменения в свой рисунок. Думайте о холсте как о выходе, а не как о входе.