Блог

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

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

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

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

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

Будем признательны за любую информацию или помощь!

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

Учитывая черно-белое изображение на холсте, вы можете прикрепить 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) таким образом, вы получите образец окна пикселей с центром прямо над курсором. Оттуда вы могли бы выполнить простую проверку, чтобы увидеть, есть ли в окне какие-либо цветные пиксели, или вы могли бы быть более строгими и потребовать определенного количества цветных пикселей для объявления пользователя в path.

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

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

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