Отслеживание положения объекта
Здравствуйте! Помогите неумехе. Есть баннер-растяжка. Есть скрипт который позволяет менять размеры 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, время: 22:25. |