Показать сообщение отдельно
  #9 (permalink)  
Старый 10.08.2018, 14:26
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Самовар
клик срабатывал именно на элементы массива.
Он сработает на элементе, но выдаст индекс массива
<body><style>img {
  clip-path: polygon(99% 50%, 74.5% 92.4%, 25.5% 92.4%, 1% 50%, 25.5% 7.6%, 74.5% 7.6%);
}
img:hover {
  filter: brightness(1.2);
}</style>
<script>

let fieldStartX = 0;
let fieldStartY = 0;
const r = 30;

const fieldHex = [];
for (let i = 0; i < 10; i++) {
  fieldHex[i] = [];
  fieldStartY += .5 * Math.sqrt(3) * r;
  if (i % 2 == 0)
    fieldStartX = 1.5 * r;
  else
    fieldStartX = 0;
  
  for (let j = 0; j < 6; j++) {
    const image = new Image();
    image.width = 2 * r;
    image.height = 2 * r;
    image.style.position = "absolute";
    image.style.left = fieldStartX + "px";
    image.style.top = fieldStartY + "px";
    image.src = "http://javascript.ru/cat/list/donkey.gif";
    image.onclick = () => test(i, j);

    document.body.appendChild(image);
    fieldHex[i][j] = image;

    fieldStartX += 3 * r;
  }
}

function test(x, y) {
  alert(`Кликнули в шестиугольник (${x}, ${y})`);
}

</script>


UPD Добавил возможность изменения радиуса окружности описанной вокруг шестиугольника. Остальные параметры сетки стали зависеть от радиуса r

UPD2 Как вы решили проблему, что курсор не точно попадает в шестиугольник (поскольку на самом деле это квадрат), из-за чего при щелчке по одному шестиугольнику берутся координаты от другого шестиугольника?

Последний раз редактировалось Malleys, 10.08.2018 в 17:45.
Ответить с цитированием