Измените размер холста с помощью jQuery (.animate) и платформы KineticJS. - PullRequest
Новая
       30

Измените размер холста с помощью jQuery (.animate) и платформы KineticJS.

3 голосов
/ 26 января 2012

Я пытаюсь изменить размер элемента HTML5 canvas, используя jQuery. (ВНИМАНИЕ: Не объекты внутри холста, а размер элементов!)

Он отлично работает с моим кодом, используя только jQuery: http://jsfiddle.net/dAQBD/

Но при попытке сделать то же самое с фреймворком KineticJS он вообще не работает. Мой код: http://jsfiddle.net/mLMSE/1/

Я подозреваю, что это потому, что каркас создает сам холст на основе <div> - через - (var stage = new Kinetic.Stage("div", 500, 200);)

Есть ли способ обойти это? Я бы предпочел не менять фреймворк сейчас, так как я довольно много сделал для своего реального проекта (это просто фиктивный код). Спасибо.

(Я знаю, что мои скрипки говорят "расширяться", в то время как они на самом деле уменьшаются в размерах. Опечатка.)

Ответы [ 2 ]

3 голосов
/ 26 января 2012

Анимация jQuery берет карту свойств CSS. Другими словами, вы изменяете ширину CSS холста, а не атрибут фактического width холста. Это скорее всего не то, что вы хотите. Вам нужно будет сделать свою собственную функцию анимации (или быть более умной с jQuery, поскольку она работает только на CSS).

Вы могли бы сделать несколько вещей здесь. Одна из идей (вероятно, не самая лучшая) состоит в том, чтобы анимировать div до 300 и иметь таймер, который проверяет clientWidth div. Функция таймера постоянно устанавливает canvas.width равным div.style.clientWidth. Таким образом, холст оживляет вниз с вашей фиктивной div.

2 голосов
/ 05 марта 2012

Основная причина, по которой это ничего не делает, заключается в том, что вы изменяете размер контейнера только с помощью jquery. kinetic заполняет этот контейнер элементами canvas. Он абсолютно позиционирует эти элементы холста для достижения эффекта наложения, который затем позволяет менять порядок наложения во время анимации. Эти абсолютно позиционированные элементы canvas получают свои размеры при установке нового kinetic.Stage ()

У вас нет набора правил css для exampleCanvas, попробуйте что-то вроде этого: 

#exampleCanvas{ overflow: hidden; width: 500px; height: 200px; border: 2px solid red; position: relative; }

Кроме того, у kineticjs api есть метод .setSize (), поэтому stage.setSize (ширина, высота) может стать шагом к решению. Итак, в анимации обратного вызова используйте stage.setSize (300, 200);

Если это не дает желаемого результата, вы можете настроить таргетинг на элементы холста в вашем контейнере следующим образом: 

$("#exampleCanvas").children("canvas").animate( ... );
...