Почему нет метода draw() в документации KineticJS?

Question

Я потратил много времени на поиск метода Kinetic.Layer.draw(). Все, что я нашел, это прецеденты - нет документации о том, как и когда ее использовать. Может, это уже устарело?

Эти первичные связи, которые я использую во время обучения и играть с этой замечательной структурой:

http://kineticjs.com/docs/index.html

http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

Это будет очень полезно, если кто-то объясняет мне такое недоразумение.

Answer 1

На самом деле draw() и drawHit() находятся в документации, но они плохо документированы:

• http://kineticjs.com/docs/Kinetic.Stage.html#draw

draw()

Жеребьевка слой сцены графики

• http://kineticjs.com/docs/Kinetic.Stage.html#drawHit

drawHit()

Жеребьевка слой ударил графы

Удивительно, я не смог найти 3-й и последний рисовать метод: drawScene() в К inetic Docs.Кроме того, к моему удивлению, эти 3 функции не были найдены, чтобы быть расширен от родительского класса Kinetic.Stage: Kinetic.Container

В любом случае, я думаю, этот SO вопрос объясняет различия методов идеально: What is the difference between KineticJS draw methods?

и, безусловно, , вы не избегаете использования этих функций, вы должны нуждаться в, чтобы использовать один из них в конце концов, если ваш холст/сцена не статичен во время всего вашего приложения. (* Там может быть исключением, смотри ниже)

Чтобы ответить на ваши вопросы:

Как:

Вызов .draw() на любой Kinetic.Container, который включает в себя: stagelayer и group или любой Kinetic.Node, который включает в себя все Kinetic.Shape

Примеры в:

stage.draw(); //Updates the scene renderer and hit graph for the stage 
layer.drawHit(); //Updates the hit graph for layer 
rect.drawScene(); //Updates the scene renderer for this Kinetic.Rect 

Почему:

Я думаю, что это производительность вещь, чтобы не все перекроить на Kinetic.Stage каждый раз, когда есть изменения. Использование методов рисования таким образом мы можем контролировать программно, когда хотим, чтобы этап был обновлен и отображен. Как вы можете себе представить, довольно дорого нужно рисовать сцену все время, если мы скажем 10000 узлов в сцене.

Когда:

drawScene()

В любое время вам необходимо обновить либо сцены визуализации (например, с помощью .setFill() изменить заливку формы)

drawHit()

Для обновления хит-параграф, если вы привязываете события к вашим фигурам, чтобы область попадания для любых событий была обновлена ​​до изменения узла.

draw()

Всякий раз, когда вам нужно сделать и выше.

Наконец, возможно, пример/лаборатория будет самым полезным инструментом обучения здесь, поэтому я подготовил JSFIDDLE для вас, чтобы проверить различия. Следуйте инструкциям и прочитайте мои комментарии внутри, чтобы лучше понять, что происходит.

* ПРИМЕЧАНИЕ: Я упоминал выше, было исключение из того, что нужно использовать методы рисования. Это потому, что всякий раз, когда вы добавляете слой на сцену, все в слое автоматически нарисовано. Существует небольшой пример описанного в нижней части скрипки.

Answer 2

Метод draw() в основном используется для рисования всех (видимых) элементов, связанных с контейнером, на который вы вызываете метод. Поэтому не ограничивается только Kinetic.Layer, но также могут быть использованы на Kinetic.Group, Kinetic.Container и так далее ...

Когда & Почему использовать: Всякий раз, когда вы делаете какие-либо изменения на холсте, вы вызываете соответствующий контейнер Draw() способ. KineticJS не обновляет холст, если вы явно не произнесете его, используя Draw(). В общем, попробуйте назвать наименьший контейнер, на который повлияли ваши изменения, чтобы использовать эффективное кэширование и перерисовку только на часть холста, на которую повлияли.

Возьмем, например: У вас есть 2 слоя в вашем приложении. Layer1 используется для статического фона и некоторых других статических элементов, которые не нужно перерисовывать каждый раз. И Layer2 содержит ваши движущиеся элементы или активные объекты. Затем вы можете просто позвонить по телефону Layer2.draw()

Чтобы добавить сложность, у вас есть группа объектов, позволяющая говорить все пункты меню. Когда пользователь нажимает любое меню btn, его лучше называть menuGroup.draw(), а не функцией рисования его родительского слоя.