Добрый день! Я здесь, чтобы попросить помощи об именах динамических переменных в Javascript, применяемых к конструктору. Это было намного сложнее, чем ожидалось. Я читал об этой проблеме на многочисленных форумах и веб-страницах, но не могу найти, что я делаю неправильно =/
Я использую библиотеку HTML5+Javascript под названием EaselJS, но моя проблема связана не с ней, а с синтаксисом Javascript! Вот моя проблема. Я получил этот код:
stage1 = new Stage(document.getElementById("cnvs1"));
stage2 = new Stage(document.getElementById("cnvs2"));
stage3 = new Stage(document.getElementById("cnvs3"));
Здесь переменным stage назначен объект Stage, который инициализирован с идентификатором холста cnvs. Эта строка (в контексте остальной части моего кода) работает! Я хотел бы упростить это до одной строки с помощью for:
for(i = 0; i < 5; i++){
//Of course this is wrong!
stage[i] = new Stage(document.getElementById("cnvs[i]"));
}
Эта ссылка здесь показывает, как это можно сделать: с помощью eval (многие говорят, что это не рекомендуется) и с window (рекомендуется). Тогда, если я сделаю это (без for, чтобы еще больше упростить):
var varname = "stage";
var i = 1;
window[varname + i] = new Stage(document.getElementById("cnvs_terminal1"));
Код все еще работает. Но я не могу понять, как выполнить аналогичное решение с идентификатором холста в кавычках. Эти строки кода терпят неудачу:
var i = 1;
var varname = "stage";
var varname2 = 'cnvs1';
var varname3 = "\"cnvs1\"";
var varname4 = "\"cnvs1" + i + "\"";
window[varname +i] = new Stage(document.getElementById(window[varname2]));
window[varname +i] = new Stage(document.getElementById(window[varname3]));
window[varname +i] = new Stage(document.getElementById(window[varname4]));
В этих попытках даже попытка передать точное значение, которое мне нужно (без i), мне не помогает!! Я использую обратную косую черту, потому что считаю, что они необходимы для getElementbyId=( =( =(
Теперь я в неведении! =( Я уверен, что есть способ сделать это, может быть, я не знаю синтаксиса, может быть, я не знаю, как правильно вызывать переменные по ссылке или по значению, я не знаю... Пожалуйста, помогите я, я не знаю, как сделать эту простую задачу!
БОЛЬШОЕ СПАСИБО =)
РЕДАКТИРОВАТЬ: Пробую предложение @cHao. Я тоже не могу! Для простоты я установил for для i только один:
for (var i = 1; i <= 1; ++i) {
//I use only one of the following lines at a time of course, but I'll write here my failing tries all together:
stage[i] = new Stage(document.getElementById('cnvs'+i));
stage[i-1] = new Stage(document.getElementById('cnvs'+i));
//Hardcoding the first variable works!
stage1 = new Stage(document.getElementById('cnvs'+i));
}
Половина проблемы решена, но что делать с первой переменной? =/ СПАСИБО!!!!
РЕДАКТИРОВАТЬ 2: Запрошена дополнительная информация! Вот пример копирования/вставки! Просто обновите EaselJS и пути к изображениям, чтобы все заработало!
<!DOCTYPE HTML>
<html>
<head>
<script src="easeljs-0.4.0-26/lib/easel.js"></script>
<script type="text/javascript">
function init() {
//MY PROBLEM LIES HERE!!
for (var i = 1; i <= 1; ++i) {
//This code WORKS
stage1 = new Stage(document.getElementById('cnvs'+i));
//This code DOES NOT WORKS
//stage[i] = new Stage(document.getElementById('cnvs'+i));
//stage[i-1] = new Stage(document.getElementById('cnvs'+i));
}
var images = "images/itzapic.jpg";
bitmap = new Bitmap(images);
stage1.addChild(bitmap);
stage1.update();
Ticker.addListener(window);
}
function tick() {
stage1.update();
}
</script>
</head>
<body onload="init()">
<canvas id="cnvs1" width="140" height="82">
</body>
</html>
______________ ________________ _____________
РЕДАКТИРОВАНИЕ 3: РЕШЕНО! Я опубликую окончательный код для справки тем, кто хочет использовать EaselJS для рендеринга одного изображения на любом количестве холстов с одним и тем же объектом. . Для этого вам понадобится метод bitmap.clone() и массивы для этапов. Спасибо @cHao за помощь ;) Следующий код будет отображать одно и то же изображение на всех холстах! Обновляйте по мере необходимости ;)
<!DOCTYPE HTML>
<html>
<head>
<script src="easeljs-0.4.0-26/lib/easel.js"></script>
<script type="text/javascript">
stage = [];
function init() {
for (var i = 1; i <= 6; ++i) {
stage[i-1] = new Stage(document.getElementById('cnvs'+i));
}
var images = "images/itzapic.jpg";
bitmap = new Bitmap(images);
stage[0].addChild(bitmap);
for (var i = 1; i <= 5; ++i) {
stage[i].addChild(bitmap.clone());
}
stage[0].update();
Ticker.addListener(window);
}
function tick() {
for (var i = 0; i < stage.length; ++i) {
stage[i].update();
}
}
</script>
</head>
<body onload="init()">
<canvas id="cnvs1" width="140" height="82"></canvas>
<canvas id="cnvs2" width="140" height="82"></canvas>
<canvas id="cnvs3" width="140" height="82"></canvas>
<canvas id="cnvs4" width="140" height="82"></canvas>
<canvas id="cnvs5" width="140" height="82"></canvas>
<canvas id="cnvs6" width="140" height="82"></canvas>
</body>
</html>
