HTML Canvas Tracing

Question

Я пытаюсь создать что-то в HTML5 / Canvas, чтобы разрешить трассировку по изображению и предупредить, если отклоняется от заданного пути.

Я выяснил, как загрузить внешнее изображение в холст и разрешить событиям mousedown / mousemovement над ним рисовать изображение, но у меня возникли проблемы с подбором головы, сравнивая их.

Все изображения представляют собой простые черные на белых контурах, поэтому из того, что я могу сказать, событие в стиле getPixel может определить, есть ли черный цвет под тем, где нарисован или под которым находится мышь.

Я мог бы сделать это только с помощью положения мыши, но для этого потребовалось бы определить пути каждого контура изображения (и их достаточно, поэтому в идеале нужно было бы сделать это путем анализа базового изображения) ..

Мне сказали, что это возможно с Flash, но я хотел бы избежать этого, если это возможно, чтобы обеспечить совместимость с не-flash платформами (а именно с ipad), поскольку они являются основной целью для запуска страницы.

Любое понимание или помощь будут оценены!

Answer 1

Я думаю, что вы уже затронули самый простой подход к решению этой проблемы.

Учитывая черно-белое изображение на холсте, вы можете прикрепить обработчик события mousemove к элементу, чтобы отслеживать, где находится курсор. Если пользователь удерживает left-mouse вниз, вы хотите определить, отслеживают ли они в настоящее время предопределенный путь. Чтобы сделать вещи менее раздражающими для пользователя, я бы подошел к этой части проблемы, выбрав небольшое окно пикселей. Что-то около 9x9 pixels, вероятно, будет хорошего размера. Обратите внимание, что вы хотите, чтобы размер вашего окна был odd в обоих измерениях, чтобы у вас была симметричная выборка в обоих направлениях.

Используя расположение курсора, вызовите getImageData() на холсте. Ваш вызов функции будет выглядеть примерно так: getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size), так что вы получите примерное окно пикселей с центром прямо над курсором. Оттуда вы можете сделать простую проверку, чтобы увидеть, есть ли какие-нибудь небелые пиксели в окне, или вы можете быть более строгими и требовать определенного количества небелых пикселей, чтобы объявить пользователя на пути.

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

В конечном итоге все сводится к одному из двух подходов. Либо вы загружаете фактический векторный путь для приложения, с которым сравнивается курсор пользователя (например, выполняете point-in-path проверки), либо вы выбираете пиксельные данные из изображения. Если вам не требуется идеальная точность проверки point-in-path, я думаю, что выборка пикселей должна работать нормально.

---

Редактировать: Я просто перечитал ваш вопрос и понял, что, основываясь на вашей ссылке на getPixel(), вы можете использовать WebGL для этого. Подход для WebGL будет таким же, за исключением того, что вы, конечно, будете использовать разные функции. Однако я не думаю, что вам нужно запрашивать WebGL, поскольку 2D-контекст должен дать вам достаточно гибкости (если только приложение не задействовано больше, чем кажется).