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

Question

我有一组two.js形状。当用户在形状上盘旋时，我希望那个形状旋转。

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

css动画的问题:如果我将a：动画应用于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中的形状呢？

Answer 1

将单个事件处理程序/动画添加到two.js对象中有两个问题(haha)。

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

解决方案：

1. 为每一行创建一个div，并为每个单元格填充一个div。 for (var r= 0；r< row；r++) { var rowId = "row“+ r；var = $("").addClass("row").attr("id"，rowId).appendTo('body')；for (var c= 0；c< cols；c++) { var cellId = "cell”+ ((r *行)+ c)；$(行).append(‘’)；}}
2. 对于每个单元格，创建一个两个的实例，将形状添加到 $(“.cell”).each(函数(索引，对象){ var 2=新的2({宽度:大小+填充}).appendTo(对象)；var shape = pickFlower(shapes)；shape.translation.set(two.width / 2，two.height / 2)；two.add(shape)；two.update()；}；
3. 将悬停动画添加到带有CSS的div中。 .cell:hover {动画: loaderAnim 5s轻松进入无限法线向前；填充: 0；边距: 0；}@键帧loaderAnim { 0% {transform:旋转(0deg)；} 50% {transform:旋转(90deg)；} 100% {transform:旋转(0deg)；}

备注：

• 不要尝试将创建div和向div中添加两个组合起来。div可能不会添加到html中，然后它会将多个实例添加到一个div中，并添加其他有趣的内容。