PaperJS 定位形状

Question

我正在制作 Patatap 克隆，并尝试在每个键上制作不同的形状和不同的动画。

我已经想通了如何在 onKeyDown 函数上分配不同的形状，但我被困在 onFrame 函数上，为每个形状提供不同的动画。

我试图检查形状数组以找出不同之处，但由于它有大量的线条，我无法做到。

//Just short dummy code to roughly show how I did

function onKeyDown(event){
 if(type === 'rectangle'){
  var shape = new Path.Rectangle
 }else if(type === 'circle'){
  var shape = new Path.Circle
 }
}
... this works

function onFrame(event){
 shape.fillColor.hue += 1; //this works


 //I want to do this
 //shape.type is just a made up variable

 if(shape.type === 'rectangle'){
  shape.rotate(5);
 }else if(shape.type === 'circle'){
  shape.scale(0.95);
}

感谢您的帮助

demo link

Answer 1

您可以使用 Path.data 属性添加逻辑所需的内容，我通过添加 name 属性更新了您的 demo给出形状的类型。

PaperJS 定位形状

PaperJS targeting shape

javascript

event-handling

paperjs