ищу предложения о том, как я могу выделить области на изображении

Question

Я создаю сайт тренировок, который отслеживает упражнения. Каждое упражнение имеет привязку к определенной части тела (жим лежа -> Грудь)

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

альтернативный текст http://aquaviews.net/wp-content/uploads/2009/12/Quadriceps.png

Предполагая, что я нашел хорошее изображение без выделенных областей, есть ли возможность динамически "выделять" области на изображении (красный участок) с помощью JavaScript (на стороне клиента) или C # (на стороне сервера) или мне нужна отдельная картинка для каждого упражнения?

Answer 1

Вы МОЖЕТЕ наложить базовое изображение на SVG или <canvas> элемент .

Но тогда у вас возникают проблемы с кроссбраузерностью, возможные проблемы с выравниванием и, возможно, странный вид.

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

Но вместо того, чтобы хранить их как отдельные изображения, храните / объединяйте их в одном файле - как CSS Sprite . Тогда вы получите профессиональную внешность, отличную кросс-браузерную поддержку и простое минимальное кодирование.

Answer 2

Это простая реализация, так как я сделал это выделение с помощью карты округа.Используйте карту изображения.Затем найдите скрипт подсветки, такой как (mapper.netzgesta.de) mapper.js.Все, что вам нужно сделать, это иметь правильно настроенную карту изображения (изображение должно быть обозначено div) и ссылку на этот скрипт.Подсветка начинается немедленно.Пожалуйста, проверьте лицензию.Есть несколько других скриптов, которые используют javascript css и jquery для достижения того же эффекта.Просто исследуйте выделенное изображение карты в Google.Извините, я не могу дать вам ссылку на мою реализацию этого, поскольку она находится на безопасном сайте для работы.Удачи.

Answer 3

Интересно, что раньше я был личным тренером, и я делал то же самое, но делал это мгновенно.Это моя рекомендация.

Однако, если вы хотите сделать это с помощью JS и CSS, предложение Брока о спрайтах, вероятно, поможет.

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

Один вопрос, однако, будете ли вы выполнять сложные упражнения, которые потребуют, чтобы у вас были выделены два раздела?Например, наклонная пресса выделяет часть сундука и часть дельт.Это делает все предложение более сложным из-за специфики ваших пролонгаций.

Answer 4

Я думаю, что вы ищете способ сделать это, не требуя отдельных изображений, и если так - ответ «Нет», вам нужно будет создать отдельные изображения по крайней мере для выделенных областей.Если не считать использования элемента CANVAS, который имеет проблемы с браузером, я не верю, что есть какой-либо способ наложить фильтр на произвольную область элемента изображения.

И даже если вы можете применить альфа-фильтр, вам все равно понадобится геометрия каждой фигуры, поэтому усилия / работа, возможно, будут одинаковыми ...

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

Answer 5

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

Edit: Извините, я думаю, мне следовало уточнить. Вы можете абсолютно точно позиционировать элементы с помощью CSS и использовать ролловер для изображения, чтобы поменять эту часть изображения на выделенную часть этого изображения. Вы можете сделать это, поместив каждую группу мышц в свои собственные div и поместив изображение соответствующей группы мышц в фоновое изображение. Затем поменяйте его на опрокидывание. или вы можете использовать z-index и абсолютно позиционировать элементы ролловера там, где они должны быть, и изменять z-index при необходимости.