Изменение размера холста с использованием jQuery (.animate) и рамки KineticJS

Question

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

Это работает отлично с моим кодом с помощью JQuery только: http://jsfiddle.net/dAQBD/

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

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

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

(я знаю, что мои фидели говорят «расширить» в то время как они Infact уменьшение размера. Опечатка.)

Answer 1

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

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

Answer 2

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

У вас нет правила CSS набор для exampleCanvas попробовать что-то вроде этого:

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

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

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

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