(Да, я из Швеции, поэтому мой английский может быть не идеальным;)
У меня проблемы с памятью на iPad. Этот код не дает сбой броузеру, он просто останавливается. В какой-то момент он никогда не входит ни в один из обработчиков событий объекта Image. Понятия не имею, почему ..? Я искал форум и гуглил пару дней об обходных путях. Но они не совсем соответствуют тому, чего я пытаюсь достичь (?). (Потому что у меня есть только 1 объект изображения).
Я создал следующее:
1 основной холст, который виден пользователю.
16 других полотен, на которых я рисую.
1 Объект изображения, с которым я загружаю изображения.
все изображения в формате png с альфа-каналом и имеют следующий размер 900x373 px. Все полотна имеют одинаковые размеры.
На 16 других полотнах нарисовано 8 изображений.
Цель этого состоит в том, чтобы иметь возможность вращать объект, который имеет взаимозаменяемые слои.
(1 угол - это объект под другим углом, поэтому он будет выглядеть так, как будто он вращается во время работы основного цикла.) Предполагается, что вращением будет управлять касание / мышь, но это должно продемонстрировать, чего я хочу достичь.
Я знаю, что это большой код для просмотра, и он может быть не лучшим написанным кодом, так как я новичок в javascript. Однако он отлично работает на моем ноутбуке в Chrome.
Я читал кое-что о событиях, содержащих ссылки на imageObjects, и поэтому они не получат GC'd. Но подразумевается ли это здесь, когда у меня есть только один объект изображения?
Я также попытался добавить и удалить слушателей с синтаксисом jquery, но безуспешно.
Было бы очень признательно, если бы кто-нибудь нашел время, чтобы ответить на этот вопрос.
С уважением, Оскар.
инициализация переменных:
var drawingCanvas = null;
var context = null;
var numAngles = 8;
var angleStep = 32/ numAngles;
var canvasAngles = [];
var loadStatus = {};
var basePath = "assets_900/";
var layerPaths = [];
var layerPathsA = ["black/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsB = ["red/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsC = ["black/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsD = ["red/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsArr = [layerPathsA,layerPathsB,layerPathsC,layerPathsD];
layerPathsCounter = 0;
var numLayers = layerPaths.length;
var imageInit = null;
var SW = 900; //1920
var SH = 373; //796
var loopcounter = 0;
первая настройка холстов и прочего:
layerPaths = layerPathsArr[0];
drawingCanvas = document.getElementById('myDrawing');
context = drawingCanvas.getContext('2d');
for(var i = 0; i < numAngles; i++){
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
canvasContext.createImageData(SW, SH);
canvas.height = SH;
canvas.width = SW;
canvasAngles.push(canvas);
}
это запустит цикл, а затем никогда не остановится, а продолжится, пока не произойдет сбой мобильного сафари:
loadImage(0,0,0);
это цикл, который загружает изображения:
когда он загрузил 8 изображений, он рисует их на одном из 16 полотен, а затем этот холст рисуется на видимом холсте. затем он загружает новый угол и 8 новых изображений, и так далее ...
function loadImage(pathIndex,layerIndex,angleIndex){
if(layerIndex < layerPaths.length ){
//logger.log("path :" + pathIndex +" lajr : "+ layerIndex + " angl: " + angleIndex);
imageInit = new Image();
imageInit.onload = function(){
var canvas = canvasAngles[angleIndex];
var canvasContext = canvas.getContext('2d');
canvasContext.drawImage(imageInit,0, 0);
imageInit.onload = null;
imageInit.onerror = null;
imageInit.onabort = null;
imageInit.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
imageInit = null;
delete imageInit;
loadImage(pathIndex,layerIndex+1,angleIndex);
}
imageInit.onerror = function(){
logger.log("Error loading, retrying....");
loadImage(pathIndex,layerIndex,angleIndex);
}
imageInit.onabort = function(){
logger.log("Error loading (aborted)");
}
var path = "";
if(pathIndex < 10){
path = basePath + layerPaths[layerIndex] + "img000"+ pathIndex + ".png";
}else{
path = basePath + layerPaths[layerIndex] + "img00"+ pathIndex + ".png";
}
imageInit.src = path;
}else{
displayAngle(angleIndex);
if(angleIndex > numAngles-2){
logger.log("turns : " + loopcounter++ +" C: " + layerPathsCounter);
clearCanvases();
loadImage(0,0,0);
layerPathsCounter++;
if(layerPathsCounter > layerPathsArr.length-1){
layerPathsCounter = 0;
}
layerPaths = layerPathsArr[layerPathsCounter];
}else{
loadImage(pathIndex+angleStep,0,angleIndex+1);
}
}
}
вот пара вспомогательных функций:
function clearCanvases(){
for(var i = 0; i < numAngles; i++){
var canvas = canvasAngles[i];
var canvasContext = canvas.getContext('2d');
canvasContext.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);
}
}
function displayAngle(index){
context.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);
var canvas = canvasAngles[index];
context.drawImage(canvas,0,0);
}
HTML:
<body >
<canvas id="myDrawing" width="900" height="373">
<p>Your browser doesn't support canvas. (HEHE)</p>
</canvas>
</body>