Игнорирование прозрачных углов изображения

Question

Скажем, у вас есть изображение плитки, которое вы используете для построения изометрической карты.Каждая плитка по выбору.Проблема в том, что прозрачные углы вокруг изображения плитки перекрывают плитки позади них.Я хочу, чтобы прозрачная область изображения была проигнорирована, чтобы другие плитки можно было выбрать более точно.

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

Мы используем браузер, поддерживающий pointer-event.Мне было интересно, есть ли способ включить это в угловые области, или мне нужно найти способ заставить программу распознавать прозрачные пиксели самостоятельно.

Эти мозаичные изображения не созданы с использованием canvas.CSS это просто:

div.content 
{
   position: absolute;
   top: 105px;
   width: 10px;
   height: 50%;
}

div.content div.tile 
{
   width:96px;
   position: absolute;
   height:102px;
   line-height:96px;
   background-image:url('images/tiles.png');
}

div.content div.tile:hover 
{ 
   opacity:0.8; 
}

Answer 1

Насколько я знаю, pointer-event применяется только к элементам SVG.

Что бы я сделал

1. создать элемент холста для каждой плитки, имеющий размерtile
2. нарисует плитки на каждом холсте
3. получает imageData из каждого контекста холста и сохраняет его где-то
4. события mousedown предоставляют координаты, получить цвет пикселя из этих плиток imageData и проверить его альфа-значение.

edit:

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

Answer 2

я бы предложил:

1. создать холст размером с плитку

2. при событии мыши (при наведении, щелчке и т. Д.) Вы рисуете плитку, вызвавшую событие на этом холсте

3. получить альфа-значение и связать встречное событие для сброса холста

3,1. если альфа равна нулю, делегируйте событие в следующую геометрическую плитку (справа вверху, слева вверху, справа внизу или слева внизу) и выполните там действия

3,2. если альфа больше нуля, выполнить действия на плитке, вызвавшие событие

это будет рисовать на холсте только в случае необходимости и тем самым экономит некоторое время расчета

Answer 3

Вы могли бы:

1. используйте карты изображений HTML: карты изображений HTML . Это простой вариант. Суть в том, что вам нужно создать карту всех тайлов самостоятельно.

2. Я знаю, что некоторые люди, создавшие игровой движок Isometric, использовали объект Canvas не для рисования, а просто для вычисления, щелкнул ли мышью прозрачный тайл, чтобы делегировать событие onclick следующей тайл. Объяснение проекта, включая делегирование событий мыши, можно найти здесь .

Answer 4

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