HTML / CSS рисование квадратного окна в маске css - PullRequest
0 голосов
/ 17 сентября 2010

Итак, у меня есть сетка изображений (плитки карты), и я рисую полупрозрачную маску поверх нее, используя абсолютно позиционированный div с шириной и высотой, равными 100%.быть в состоянии нарисовать прямоугольник на маске, с помощью мыши, используя мышь вниз, перетащите, мышь вверх.Прямоугольник будет отрисовываться динамически при перемещении мыши, и прямоугольник будет похож на окно в маске, отображающее плитки карты внизу без полупрозрачности.

В настоящее время я смотрю на использование 5 делений - одного для окна и 4 для маски, размер которой можно изменить с помощью javascript при перетаскивании мыши.Кто-нибудь знает более простой способ сделать это?Я использую jquery, и мне нужно поддерживать IE7 и выше, так что только html5 технологии нет.

Приветствия,

Колм

Ответы [ 2 ]

1 голос
/ 17 сентября 2010

Я думаю, что плагин jQuery Crop делает именно то, что вам нужно (демонстрация здесь ).

Возможно, можно вырезать эту часть из него.

0 голосов
/ 17 сентября 2010

Вы должны попробовать SVG canvas.Есть библиотека SVG js, подходящая для начинающих: http://raphaeljs.com/, зацените

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ, ЧТО ЭТО НИЧЕГО НЕ СООБЩАЕТ С HTML5 (ПОЖАЛУЙСТА, НЕ СМЕШАЙТЕ С ХОЛСТОМ HTML5, ЭТО SVG)

...