UI:Offline mobiiliapp

Leht kuulub aine Kasutajaliidesed juurde.

Ülesanne

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada 'pointer-evente'.

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

Joonistusosa koodinäide

   // shim layer with setTimeout fallback
   window.requestAnimFrame = (function () {
       return window.requestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           function (callback) {
               window.setTimeout(callback, 1000 / 60);
       };
   })();

   window.addEventListener('load', init);

   var canvas = null;
   var ctx = null;

   // currently active stroke
   var stroke = null;

   function init() {
       canvas = document.querySelector('canvas');
       ctx = canvas.getContext("2d");

       // Set the default line style.
       ctx.lineWidth = 3;
       ctx.lineCap = "round";
       ctx.fillStyle = "cyan";
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.strokeStyle = "black";

       canvas.addEventListener('mousedown', onMouseDown);
       canvas.addEventListener('mousemove', onMouseMove);
       canvas.addEventListener('mouseup', onMouseUp);
       canvas.addEventListener('mouseleave', onMouseUp);

       requestAnimFrame(drawPointers);
   }

   function onMouseDown(event) {
       stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
   }

   function onMouseMove(event) {
       // Are we currently drawing this pointer?
       if (stroke) {
           stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
       }
   };

   function onMouseUp(event) {
       stroke = null;
   };

   function drawPointers() {
       // If we have an active stroke, draw any undrawn segments.
       if (stroke) {
           stroke.draw();
       }

       requestAnimFrame(drawPointers);
   };

   function Point(x, y) {
       this.x = x;
       this.y = y;
   }

   function Stroke(x, y) {
       this.points = [new Point(x, y)];
   }

   Stroke.prototype.addPoint = function (x, y) {
       this.points.push(new Point(x, y));
   };

   Stroke.prototype.draw = function () {
       if (this.points.length < 2) {
           return;
       }

       ctx.beginPath();
       ctx.moveTo(this.points[0].x, this.points[0].y);
       for (var i = 1; i < this.points.length; i++) {
           ctx.lineTo(this.points[i].x, this.points[i].y);
       }
       ctx.stroke();
       ctx.closePath();
       this.points = this.points.slice(-1);
   };