Как добавить событие для фигур в Two.js? - PullRequest
Новая
       21

Как добавить событие для фигур в Two.js?

0 голосов
/ 02 января 2019

У меня есть группа фигур two.js.Когда пользователь наводит курсор на фигуру, я хочу, чтобы эта фигура вращалась.

http://merhoo.github.io/secrets.html

Проблема с анимацией CSS: , если я применяю анимацию: hover кфигуры svg, это как-то влияет на положение фигуры, перемещая ее в верхний левый угол.

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

var shapes = makeFlowers();

for (var r = 0; r < rows; r++) {
  for (var c = 0; c < cols; c++) {
    ...
    var shape = pickFlower();
    shape.translation.set(hi * two.width, vi * two.height);
    two.add(shape);
  }
}
two.update();

for (var f in flowers) {
  var flower = flowers[f];
  $(flower._renderer.elem)
    .click(function(e) {
      flower.fill = "blue";
    })
}

Итак, как применить анимацию при наведении / наведении мыши к фигурам в two.js?

1 Ответ

0 голосов
/ 12 января 2019

Две проблемы (ха-ха) с добавлением отдельных обработчиков событий / анимаций к объектам two.js.

  1. Первое, что я до сих пор не понимаю: он только добавит обработчик событий к последней фигуре в цикле.Возможно, поскольку он отображается в html как один svg, onclick применяется к одному или ко всем путям.Похоже на ошибку в части Two.js.
  2. Как упоминалось в этом посте , преобразование пути SVG с помощью анимации очень тяжело для браузера.Если вы примените анимацию к контейнеру SVG, она не будет применять преобразование к каждой точке пути.

Решение:

  1. Сделайте div для каждой строки и заполните его div для каждой ячейки 

    for (var r = 0; r < rows; r++) {
  var rowId = "row" + r;
  var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
  for (var c = 0; c < cols; c++) {
    var cellId = "cell" + ((r * rows) + c);
    $(row).append('<div class="cell" id="' + cellId + '"></div>');
  }
}

  2. Для каждой ячейки создайте экземпляр Two, добавьте форму к этому 

    $(".cell").each(function (index, object) {
  var two = new Two({
    width: size + padding,
    height:size + padding
  }).appendTo(object);
  var shape = pickFlower(shapes);
  shape.translation.set(two.width / 2, two.height / 2);
  two.add(shape);
  two.update();
});

  3. Добавьте анимацию при наведении курсора в div с помощью CSS 

    .cell:hover {
  animation: loaderAnim 5s ease-in-out infinite normal forwards;
  padding: 0;
  margin: 0;
}


@keyframes loaderAnim {
  0% {
    transform:rotate(0deg);
  }
  50% {
    transform:rotate(90deg);
  }
  100% {
    transform:rotate(0deg);
  }
}

Примечания:

  • Не пытайтесьсовместить создание div и добавление Two к div.div не может быть добавлен в html, и затем он добавит несколько двух экземпляров в div и другие интересные вещи
...