Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.08.2013, 22:46
Новичок на форуме
Отправить личное сообщение для ConTrast Посмотреть профиль Найти все сообщения от ConTrast
 
Регистрация: 11.08.2013
Сообщений: 3

Canvas - разобраться с перерисовкой
Взялся за 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.

Последний раз редактировалось ConTrast, 20.08.2013 в 12:50.
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2013, 16:51
Новичок на форуме
Отправить личное сообщение для ConTrast Посмотреть профиль Найти все сообщения от ConTrast
 
Регистрация: 11.08.2013
Сообщений: 3

проблема с pageList[0,i]
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 ({
			// ...
			  });
			// ...

			pageList[0,i] = pageListFF;
			layer.add(pageListFF);
		})();


		// если добавляю это, (вторую магическую) функцию, то почемуто всё идёт наперекосяк, и кнопками управляется НЕ ТА фигура ....
		(function() {
			var book_x = book_xx +50 +(i*4);
			var book_y = book_yy +(i*4);
			var pageListFF = new Kinetic.Shape ({
			// ...
			  });
			// ...

			pageList[1,i] = pageListFF;
			layer.add(pageListFF);
		})();
	}


косяки необъятной вселенной ?
Ответить с цитированием
  #3 (permalink)  
Старый 20.08.2013, 12:43
Новичок на форуме
Отправить личное сообщение для ConTrast Посмотреть профиль Найти все сообщения от ConTrast
 
Регистрация: 11.08.2013
Сообщений: 3

Проблема решена следующим образом:

было (двумерный массив):
// ...
pageList[0,i] = pageListFF;
// ...
pageList[1,i] = pageListFF;


стало (одномерный массив):
// ...
pageList[0+ i*2] = pageListFF;
// ...
pageList[1+ i*2] = pageListFF;


Соответственно внёс изменения в реакцию по нажатию мыши.
теперь вместо ошибки, которая "обслуживала" только "второй столбик" рисованных квадратов, не зависимо от pageList[0,i] или pageList[1,i] , уже обслуживаются все.
// ...
pageList[0].hide();
pageList[1].hide();
pageList[12].hide();

К нужному столбику и номеру квадрата обращаться так: каждая чётная цифра, начиная с "0" - это номера левой колонки, каждая "нечётная" цифра, начиная с "1" - это номера правой колонки квадратов.


Код работает, каждый рисованный квадрат в двух столбиках теперь "индивидуален". Но теперь более трудно обрабатывать такой массив, просто не правильно.... так содержать код. Но работает.

Помощи так не дождался у спецов, а в жизни обратиться не к кому. (

Последний раз редактировалось ConTrast, 20.08.2013 в 13:30.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas картинка с обесцвечиванием. cheba Общие вопросы Javascript 9 31.05.2013 09:13
canvas и drawImage() jussik Элементы интерфейса 0 27.10.2012 16:57
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16