Взялся за Canvas HTML5
Вначале попробовал LibCanvas с непонятным скриптом (не зная что выбрал), потом (временно?!) перешел на KineticJS.
Но суть одна: не могу понять принцип перерисовки анимации. Всё время наталкиваюсь на полную перерисовку. А логикой ничего не пойму. Помогите пожалуйста! Мне нужно только одну анимашку сделать а занимаюсь "быдлокодингом".
В коде главный вопрос:
1.
Как сделать анимацию перерисовкой экрана полностью. .
+ Как сделать анимацию частичной перерисовкой (не всех элементов) если возможно?
Другие вопросы:
2. как обратиться к фигуре "по имени" а не по экземпляру объекта. у меня name на каждой фигуре: 'kvadrat'+i.toString(10)
3.1. Что это за магическая функция с кодом типа: (function() { ... } )();
- там вт орой раз есть скобки (). Если это Объект, то не понимаю - помогите.
3.2. У меня фигуры иногда не клонируются а перерисовывается если не беру в "магическую функцию" или если много фигур после сего. Как сделать нормальные разделённые фигуры-объекты?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="show">
show
</button>
<button id="hide">
hide
</button>
</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<!-- script src="mod/canvas/KineticJS/kinetic-v4.5.5.min.js"></script -->
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
// Далее какие-либо действия над холстом
});
var layer = new Kinetic.Layer();
var pages_LRbalance = 0;
var pageList = [];
var buttonLR = [];
var book_xx = 200.5; // центральная точка для середины книги -отсчет от центра(верх) сшивки листов
var book_yy = 50.5;
for (i = 9; i>=0; i--) {
(function() {
var book_x = book_xx +(i*4);
var book_y = book_yy +(i*4);
var pageListFF = new Kinetic.Shape ({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
// рисуем фгуру сложную или простую (сейчас квадрат из линий)
context.moveTo(book_x,book_y);
context.lineTo(book_x,book_y +20); // правая сторона
context.lineTo(book_x +20,book_y +20); // ближний край (переплёта) книги
context.lineTo(book_x +20,book_y); // левая сторона
context.lineTo(book_x,book_y); // дальний край (переплёта) книги
// drawing
context.closePath();
canvas.fillStroke(this);
},
fill: '#AAE',
stroke: '#888',
strokeWidth: 2,
visible: true,
name: 'kvadrat'+i.toString(10) // имена должны быть индивид. для каждого пересозданного объекта 'pageListFF'
});
pageList[0,i] = pageListFF; // ссылка(+сохранение) на объект, пока он существует таким
//Тут вопрос !! как сохранять или использовать потом фигуру (иным способом)
layer.add(pageListFF);
})();
(function() {
// ...
context.moveTo(book_x +50,book_y); // не описывал в начале создания темы, но это 2я колонка
// - по вопросам заданным в теме, не суть важно, но визуальный эффект более явный,
// это 2-й столбик прямоугольников
pageList[1,i] = pageListFF; // ссылка(+сохранение) на объект, пока он существует таким
//Тут вопрос !! как сохранять или использовать потом фигуру (иным способом)
layer.add(pageListFF);
})();
}
// ...
stage.add(layer);
// add button event bindings
document.getElementById('hide').addEventListener('click', function() {
pageList[0,0].hide();
layer.draw();
}, false);
document.getElementById('show').addEventListener('click', function() {
pageList[0,0].show();
layer.draw();
}, false);
</script>
</body>
</html>
P.S. извините, так и не нашел подраздел форума специально для Canvas и SVG.