Arhn - архитектура программирования

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

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

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

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

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

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

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

canvas html jquery kineticjs
26.01.2012

Ответы:


1

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

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

26.01.2012

2

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

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

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

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

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

$("#exampleCanvas").children("canvas").animate( ... );
05.03.2012
  • Спасибо за ваш ответ, когда я создавал это, у меня было очень мало понимания того, как все работает за кулисами, что заставило меня поискать несколько вещей и создать поток stackoverflow.com/questions/9026543/. 05.03.2012
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..