如何在 Two.js 中为形状添加事件？答案

【问题标题】：How to add an event for shapes in Two.js?如何在 Two.js 中为形状添加事件？
【发布时间】：2019-01-13 04:54:24
【问题描述】：

我有一组 two.js 形状。当用户将鼠标悬停在一个形状上时，我希望那个形状旋转。

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

css 动画问题：如果我将 :hover 动画应用于 svg 形状，它会以某种方式影响形状的位置，将其移动到左上角。

所以我试图为每个孩子绑定一个鼠标悬停事件，让他们旋转。

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 中的形状？

【问题讨论】：

标签： javascript animation onclicklistener two.js

【解决方案1】：

将单个事件处理程序/动画添加到 two.js 对象的两个问题（哈哈）。

第一个我仍然不明白：它只会将事件处理程序添加到循环中的最后一个形状。也许是因为它在 html 中作为一个 svg 呈现，所以 onclick 应用于一个或所有路径。似乎是 Two.js 部分的错误。
正如this post 中提到的，通过动画转换SVG 的路径对于浏览器来说非常繁重。如果将动画应用到 SVG 的容器，它不会对路径中的每个点应用变换。

解决方案：

为每一行创建一个 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>');
  }
}

对于每个单元格，创建一个 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();
});

使用 CSS 将悬停动画添加到 div

.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 和div 添加两个结合起来。 div 可能不会添加到 html 中，然后它会将多个两个实例添加到 div 以及其他时髦的东西

【讨论】：