Отслеживание положения объекта
Здравствуйте! Помогите неумехе. Есть баннер-растяжка. Есть скрипт который позволяет менять размеры 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 в зависимости от ресайза страницы браузера. |
Спасибо, за подсказку. Но мне важно чтобы отслеживались и изменялись координаты объекта b2, а скрипт по ресайзу канваса и так худо-бедно, но работал...
|
Нет, управление объектами находится в отдельном подгружаемом скрипте.
А первый скрипт находится непосредственно в 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. |
butch16,
function resaizer() {
var okno = document.body.clientWidth;
canvas.width = okno;
if (exportRoot.b2) {
exportRoot.b2.setTransform(canvas.width / 2, 120);
stage.update();
}
}
|
Большое спасибо! Все заработало. Но есть одна досадная мелочь. Раньше размер канваса менялся в реальном времени, теперь при изменении размера окна все изображение внутри баннера исчезает примерно на 1-2 секунды пока не пересчитается с новыми параметрами, можно от этого избавиться или нет?
|
Вот теперь действительно все супер! Еще раз огромное спасибо!
|
Здравствуйте, а вы бы не могли выложить исходник, очень хочется посмотреть как у вас получилось, или вышлите, пожалуйста на почту onegoa@ya.ru
|
| Часовой пояс GMT +3, время: 14:45. |