Canvas

@painzp · Регистрация: 31.01.2013

Author24 — интернет-сервис помощи студентам

Доброе время суток!
Столкнулся с проблемой в дипломе и не знаю как её решить.
Нужно сделать импорт и экспорт .txt файла,в котором будут записаны данные массивов,то есть сохранение и загрузка проекта.Возможно я чего-то не до понимаю и не правильно описал ситуацию,в php не силён.
Вкратце, должно быть 2 кнопки "сохранить" и "загрузить".Сохранение таблицы координат и фигур,но не обязательно в txt формате...
Вот сам проект:

HTML5

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<!--<link rel="icon" href="/favicon.ico" type="image/x-icon">-->
<link rel="shortcut icon" href="images/favicon.ico" type= "image/x-icon">
<title>Рисовалка</title>
<style type="text/css">
    #wrapper { position: relative; }
    #tablet { border: 1px solid #111; }
    #imageTemp { position: absolute; top: 1px; left: 1px; }
    
    #CoordOutput{
            position: relative;
            float: right;
            top: -500px;
            left: -200px;
        }
        
    #FiguresOutput{
            position: relative;
            float: bottom;
            top: 20px;
    }
    
   </style>
</head>
<body>
 
<div id = "wrapper">
<canvas id = "tablet" width = "900" height = "500">
 
</canvas>
    
</div>
    
    <div id="CoordOutput">Таблица координат:<br></div>    
    
<input type = "button" id = "_close" name = "_close" value = "Замкнуть" />
<input type = "button" id = "clear" name = "clear" value = "Очистить" />
<!--<input type = "button" id = "_clearLast" name = "_clearLast" value = "Удалить" />-->
 
    <div id="FiguresOutput">Таблица фигур:<br></div>
 
</body>
</html>
 
<script type = "text/javascript">
 
 first = new Boolean(false);
 first = true;
 var x1, y1, x2, y2;
 clear = new Boolean(false);
 clear = false;
 _closed = new Boolean(false);
 _closed = false;
 
 var coordX = []; //координата точки
 var coordY = []; //координата точки
 var n = 0; //счетчик для массива
 
 var figure = []; //массив фигур
 var fn =  0; //счетчик фигур
 var point = []; //массив точек
 var pn = 0; //счетчик точек
 
 var exists = false; //проверка на существование точки
 var e = 0; //номер точки, с которой происходит совпадение
 
 var newFigure = false;
 
 var drawFigure = []; //массив для рисования
 
 var ex = false; //проверка при удалении точки
 var exi = 0; //номер совпавшей точки
 var dif = 0; //разница длин массивов
 
if(window.addEventListener) {
    window.addEventListener('load', function () {
    
    var canvas, context, tool;
 
    function init () {
        // Находим canvas элемент
        canvas = document.getElementById('tablet');
        
        if (!canvas) {
            alert('Ошибка! Canvas элемент не найден!');
            return;
        }
 
        if (!canvas.getContext) {
            alert('Ошибка: canvas.getContext не существует!');
            return;
        }
 
        // Получаем 2D canvas context.
        context = canvas.getContext('2d');
        if (!context) {
            alert('Ошибка: getContext! не существует');
            return;
        }
        
        tool = new tool_pencil();
        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mouseup',   ev_canvas, false);
    }
 
    // Здесь мы будем ловить движения мыши
    function tool_pencil () {
        var tool = this;
        this.started = false;
 
    
        this.mousedown = function (ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
        };
 
        // Событие при отпускании мыши
        this.mouseup = function (ev) {
            if (tool.started) {
                tool.mousemove(ev);
                tool.started = false;
            }
        };
    }
 
    // Эта функция определяет позицию курсора относительно холста
    function ev_canvas (ev) {
        if (ev.layerX || ev.layerX === 0) { // Firefox
            ev._x = ev.layerX;
            ev._y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX === 0) { // Opera
            ev._x = ev.offsetX;
            ev._y = ev.offsetY;
        }
 
        // Вызываем обработчик события tool
        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }
 
    init();
    document.getElementById('clear').addEventListener('click', function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    location.reload();
    clear = true;
}, false);
 
 
/*document.getElementById('_clearLast').addEventListener('click', function() {
    //Удаление последней нарисованой точки
    //alert(point[point.length-1]);
    for(var l = 0; l < point.length-1-dif; l++)
    {
        if(point[point.length-1-dif] === point[l]){ex = true; exi = point[l]+1; alert(exi);}else{ex = false;}
    }
    
    if(ex === true)
    {
        document.getElementById('FiguresOutput').innerHTML += (" Точка №"+exi+" удалена ");
            alert(point.length-dif); alert(point);
            delete point[point.length-1-dif]; dif++;
            alert(point.length-dif); alert(point);
            //нужно удалять ещё из массива точек и во всех массивах учитывать dif
    }
    else
    {
        document.getElementById('FiguresOutput').innerHTML += (" Точка №"+(point[point.length-1-dif]+1)+" удалена ");
        document.getElementById('CoordOutput').innerHTML += ("Точка №"+(point[point.length-1-dif]+1)+" удалена "+'<br>');
        alert(point.length-dif); alert(point);
        delete point[point.length-1-dif]; dif++;
        alert(point.length-dif); alert(point);
        //нужно удалять ещё из массива точек...
    }
}, false);*/
 
 
//Кнопка "Замкнуть"
document.getElementById('_close').addEventListener('click', function(){
    
    figure[fn] = point;
    fn++;
    point = [];
    pn = 0;
    newFigure = true;
    dif = 0;
    
    drawFigure = figure[fn-1];   
    
   for(var i = 1; i < drawFigure.length; i++)
   {
       context.beginPath();
       context.moveTo(coordX[drawFigure[i-1]], coordY[drawFigure[i-1]]);
       context.lineTo(coordX[drawFigure[i]], coordY[drawFigure[i]]);
       context.strokeStyle="black";
       context.stroke();
   }
   context.beginPath();
   context.moveTo(coordX[drawFigure[drawFigure.length-1]], coordY[drawFigure[drawFigure.length-1]]);
   context.lineTo(coordX[drawFigure[0]], coordY[drawFigure[0]]);
   context.strokeStyle="black";
   context.stroke();
   
    img_update();
    _closed = true;
    
    
}, false);
 
}, false); }
if(window.addEventListener) {
    window.addEventListener('load', function () {
        var canvas, context, canvaso, contexto;
        
        // По умолчанию прямоугольник - инструмент по умолчанию
        var tool;
        var tool_default = 'rect';
 
        function init () {
            canvaso = document.getElementById('tablet');
            if (!canvaso) {
                alert('Ошибка! Canvas элемент не найден!');
                return;
            }
 
            if (!canvaso.getContext) {
                alert('Ошибка! canvas.getContext не найден!');
                return;
            }
 
            contexto = canvaso.getContext('2d');
            if (!contexto) {
                alert('Ошибка! Не могу получить getContext!');
                return;
            }
 
            var container = canvaso.parentNode;
            canvas = document.createElement('canvas');
            if (!canvas) {
                alert('Ошибка! Не могу создать canvas элемент!');
                return;
            }
 
            canvas.id = 'imageTemp';
            canvas.width = canvaso.width;
            canvas.height = canvaso.height;
            container.appendChild(canvas);
 
            context = canvas.getContext('2d');
 
            
            var tool_select = 'rect';    
       
 
            // Активируем способ рисования по-умолчанию
            
                tool = new tools[tool_default]();
                tool_select.value = tool_default;
          
 
            canvas.addEventListener('mousedown', ev_canvas, false);
            
            canvas.addEventListener('mouseup',   ev_canvas, false);
        }
 
        function ev_canvas (ev) {
            if (ev.layerX || ev.layerX === 0) {
                ev._x = ev.layerX;
                ev._y = ev.layerY;
            } else if (ev.offsetX || ev.offsetX === 0) {
                ev._x = ev.offsetX;
                ev._y = ev.offsetY;
            }
 
            var func = tool[ev.type];
            if (func) {
                func(ev);
            }
        }
 
        
 
        // Эта функция вызывается каждый раз после того, как пользователь
        // завершит рисование. Она очищает imageTemp.
        function img_update () {
            contexto.drawImage(canvas, 0, 0);
            context.clearRect(0, 0, canvas.width, canvas.height);           
        }
 
        // Содержит реализацию каждого инструмента рисования
        var tools = {};
        
 
    // Прямоугольник
    tools.rect = function () {
        var tool = this;
        this.started = false;
 
        this.mousedown = function (ev) {
            tool.started = true;
            tool.x0 = ev._x;
            tool.y0 = ev._y;
            
            var x = Math.min(ev._x,  tool.x0),
                y = Math.min(ev._y,  tool.y0),
                w = Math.abs(5),
                h = Math.abs(5);
        
        if(coordX.length === 0){document.getElementById('FiguresOutput').innerHTML += ("Фигура №"+(fn+1)+": ");}
        if(newFigure === true){document.getElementById('FiguresOutput').innerHTML += ('<br>'+"Фигура №"+(fn+1)+": ");}
        newFigure = false;
    
    for(p = 0; p <= coordX.length; p++)
    {
        if(((x === coordX[p]+5) || (x === coordX[p]+4) || (x === coordX[p]+3) || (x === coordX[p]+2) || (x === coordX[p]+1) || (x === coordX[p])) && ((y === coordY[p]+5) || (y === coordY[p]+4) || (y === coordY[p]+3) || (y === coordY[p]+2) || (y === coordY[p]+1) || (y === coordY[p])))
        {
          exists = true;
          e = p+1;
        }         
    }
            if(exists === true)
            {      
                point[pn] = e-1;               
                pn++;
                document.getElementById('FiguresOutput').innerHTML += (" "+e);
            }
            else
            {
              coordX[n] = x; var m = n+1;
              coordY[n] = y; document.getElementById('CoordOutput').innerHTML += ("Точка "+m+" ("+coordX[n]+";"+coordY[n]+");"+'<br>');
              n = n+1;    
            
              context.fillStyle="red";
              context.fillRect(x, y, w, h);
              
              document.getElementById('FiguresOutput').innerHTML += (" "+n);
              
              point[pn] = n-1;
              pn++;
              
                context.fillStyle = "#00F";                
                context.font = "italic 10pt Arial";
                context.fillText(n, (x-5), (y-5));
                
            }
            
            exists = false;
            
        };   
 
        this.mouseup = function (ev) {
            if (tool.started) {
                //tool.mousemove(ev);
                tool.started = false;
                img_update();
                
        
            }
        };
    };   
 
    init();
 
}, false); }
</script>

За ранее спасибо!

	30.04.2014, 11:05