Добър ден! Тук съм, за да помоля за помощ относно имена на динамични променливи в 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 обект, който се инициализира с canvas id cnvs Този ред (в контекста на останалата част от моя код) работи! Бих искал да опростя това до един ред с for като това:
for(i = 0; i < 5; i++){
//Of course this is wrong!
stage[i] = new Stage(document.getElementById("cnvs[i]"));
}
Тази връзка тук възобновява как може да се направи това: С eval (много хора казват, че не е препоръчително) и с прозорец (препоръчително) Тогава, ако направя това (без 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 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>
