Анимировать изменение размера HTML5-холста, созданного фреймворком KineticJS - PullRequest
Новая
       27

Анимировать изменение размера HTML5-холста, созданного фреймворком KineticJS

2 голосов
/ 27 января 2012

Я пытаюсь изменить размер элемента HTML5 canvas , созданного KineticJS framework - то есть не объекты внутри холста, а размер элемента.

Так как функция jQuery .animate не может использоваться в этом вопросе (она меняет CSS, я хочу, чтобы она изменила фактические атрибуты элемента), мне пришлось разработать мою собственную функцию , который использует внутреннюю функцию stage.setSize(width, height), предоставляемую API KineticJS. У меня нет никакого опыта в написании анимационных функций, поэтому я могу совершенно неправильно подходить к ситуации.

Проблема: Это зависит от производительности , поэтому часто недостаточно быстро (благодаря setInterval). Не говоря уже о том, что он только частично работает на мобильных устройствах (протестировано на iPhone 4S iOS 5.0.1) . Любое решение должно работать более или менее безупречно, даже на мобильных устройствах.

Я ищу разные способы улучшить эту функцию. Стрелять.

(Для тех, кто не получил, смотрите ссылку на мой код; http://jsfiddle.net/G4nuH/animateResize - соответствующая функция.)

Ответы [ 3 ]

1 голос
/ 29 января 2012

Не зная специфики вашего окончательного приложения, я бы порекомендовал избегать анимации размера холста, если вы можете. Как вы, вероятно, знаете, если вы измените размер элемента canvas, все, что на нем хранится, будет стерто. Это означает, что для анимации размеров необходимо постепенно изменять ширину и / или высоту, перерисовывая весь холст на каждой итерации. Для настольного компьютера это, вероятно, не является большой проблемой. Мобильные устройства будут бороться, хотя.

Вместо этого я бы предложил вам подделать анимацию, увеличив размер элемента контейнера (с рамкой, цветом фона и т. Д., Чтобы анимация была очевидной). Затем, когда анимация будет завершена, сохраните текущие данные холста во временный объект, увеличьте размер холста и верните на него старый контент.

Если вы хотите анимировать размеры холста, чтобы показать контент, который уже присутствует на более крупном теоретическом холсте (т. Е. У пользователя есть небольшое окно, в котором обрезается весь холст), вам лучше поиграть с вашим CSS * 1005. * и height вместе со свойством overflow: hidden;. При таком подходе вы будете редактировать свой полный холст во время всех операций рисования, но анимация размера вашего окна просмотра будет простой и плавной.

0 голосов
/ 14 февраля 2012

После некоторых исследований я нашел свое собственное хакерское решение.Пример использования jQuery.animate.Пришлось анимировать их всех, так как KineticJS имеет несколько фоновых слоев. 

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }
0 голосов
/ 05 февраля 2012

Канва является портом просмотра для графики, она может быть всего размера вашего документа.Вы можете использовать функцию context.clip() для определения области, которую вы хотите отобразить, вместо изменения размера холста, который требует обновления блочной модели html.(ваша проблема производительности!) 

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();
...