Таргетинг PaperJS на форму

#javascript #event-handling #paperjs

#javascript #обработка событий #paperjs

Вопрос:

Я создаю клон 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);
}

Спасибо за любую помощь

демонстрационная ссылка

1. у вас есть тип в последней строке scalce . Можете ли вы сделать эскиз на sketch.paperjs.org ? Это будет намного лучше, чтобы помочь вам; нам нужно больше кода, чтобы понять и помочь вам.

2. @артур. sw спасибо! не знал, что есть такая вещь. Я только что добавил это

3. хорошо, я думаю, ваш вопрос: «Как я могу узнать, что эта фигура представляет собой прямоугольник или круг, чтобы выполнить преобразование в соответствии с этим типом?»?

4. Теоретически в javascript вы могли бы использовать instanceof (if( shape[i] instanceof Path.Circle) ), но я только что попробовал, и это не сработало, поэтому вы можете просто добавить свойство name к своей форме.

Ответ №1:

Вы можете использовать Path.data свойство, чтобы добавлять то, что вам нужно для вашей логики, я обновил вашу приятную демонстрацию, добавив name свойство, задающее тип фигуры.