Отслеживание положения объекта

[butch16]

Здравствуйте! Помогите неумехе. Есть баннер-растяжка. Есть скрипт который позволяет менять размеры canvas:

function init() {
	
	canvas = document.getElementById("canvas");
	
	var okno = document.body.clientWidth;
	canvas.width = okno;

	function resaizer() {
			var okno = document.body.clientWidth;
			canvas.width = okno;
		}
	window.onresize = resaizer;

// -----------------------------------

Все прекрасно работает, но нужно еще чтобы некоторый объект b2 постоянно находился в определенном месте в зависимости от ресайза окна:

// ----------------------------------- 	

(lib._600X240_Zod_Bezjalostnoe_Komfort_HTML_Lenta = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Слой 3
	this.instance = new lib.ZOD_logo85p();
	this.instance.setTransform(26,12.9);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(374));

	// Слой 8
	okno2 = canvas.width/2;

	this.b2 = new lib.Символ38();
	this.b2.setTransform(okno2,120);

// -----------------------------------

Естественно, что при таком коде координаты объекта b2 устанавливаются один раз и меняются только при принудительном обновлении страницы, а не при ее ресайзе. Вопрос собственно и состоит в том чтобы заставить переменную okno2 реагировать на изменение размера окна и соответственно менять координату x объекта b2 в зависимости от ресайза страницы браузера.

[Rise]

Есть скрипт который позволяет менять размеры canvas:

Чтобы не глобалить и не дублировать код делается так:

function init() {
	
	var canvas = document.getElementById("canvas");

	function resaizer() {
		canvas.width = document.body.clientWidth;
	}
	window.onresize = resaizer;
	window.onresize();

// -----------------------------------

[butch16]

Спасибо, за подсказку. Но мне важно чтобы отслеживались и изменялись координаты объекта b2, а скрипт по ресайзу канваса и так худо-бедно, но работал...

[Rise]

butch16, это всё в init находится?

[butch16]

Нет, управление объектами находится в отдельном подгружаемом скрипте.
А первый скрипт находится непосредственно в HTML файле:

var canvas, stage, exportRoot;

function init() {
	// --- write your JS code here ---
	
	canvas = document.getElementById("canvas");

	var okno = document.body.clientWidth;
	canvas.width = okno;

	function resaizer() {
			var okno = document.body.clientWidth;
			canvas.width = okno;
		}
	window.onresize = resaizer;	

	images = images||{};

	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
	exportRoot = new lib._600X240_Zod_Bezjalostnoe_Komfort_HTML_Lenta();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}

Я дизайнер а не программист и очень слабо разбираюсь в Javascript, баннер сделан в программе Adobe Animate CC.

[Rise]

butch16,

function resaizer() {
	var okno = document.body.clientWidth;
	canvas.width = okno;
	if (exportRoot.b2) {
		exportRoot.b2.setTransform(canvas.width / 2, 120);
		stage.update();
	}
}

[butch16]

Большое спасибо! Все заработало. Но есть одна досадная мелочь. Раньше размер канваса менялся в реальном времени, теперь при изменении размера окна все изображение внутри баннера исчезает примерно на 1-2 секунды пока не пересчитается с новыми параметрами, можно от этого избавиться или нет?

[Rise]

butch16, не знаю попробуйте добавить строку 6

[butch16]

Вот теперь действительно все супер! Еще раз огромное спасибо!

[onegoa]

Здравствуйте, а вы бы не могли выложить исходник, очень хочется посмотреть как у вас получилось, или вышлите, пожалуйста на почту onegoa@ya.ru