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。