|
Firebase en español
Base de datos activa. Firebase - Juan Antonio Villalpando
-- Tutorial de iniciación de Firebase en español --
Volver al índice del tutorial
____________________________
________________________________________________________
2.- Drawing. Dibujar en una página web.
________________________________
- Vamos a crear una página web en donde podamos dibujar y compartir el dibujo.
- Simplemente copia este archivo en tu ordenador.
- Debes cambiar mi dirección:
var myDataRef = new Firebase('https://kio4.firebaseiO.com/drawing/');
por la tuya de Firebase.
drawing.htm |
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/resources/tutorial/css/example.css">
</head>
<body>
<button onclick="myFunction()">Delete</button>
<p id="demo"></p>
<script>
function myFunction() {
// document.getElementById("demo").innerHTML = "Hello World";
var pixelDataRef2 = new Firebase('https://kio4.firebaseio.com');
pixelDataRef2.child('drawing').remove();
}
</script>
<div class="l-demo-container">
<canvas id="drawing-canvas" width="480" height="420"></canvas>
</div>
<div id="colorholder"></div>
<script>
$(document).ready(function () {
//Set up some globals
var pixSize = 8, lastPoint = null, currentColor = "000", mouseDown = 0;
//Create a reference to the pixel data for our drawing.
var pixelDataRef = new Firebase('https://kio4.firebaseio.com/drawing/');
// Set up our canvas
var myCanvas = document.getElementById('drawing-canvas');
var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;
if (myContext == null) {
alert("You must use a browser that supports HTML5 Canvas to run this demo.");
return;
}
//Setup each color palette & add it to the screen
var colors = ["fff","000","f00","0f0","00f","88f","f8d","f88","f05","f80","0f8","cf0","08f","408","ff8","8ff"];
for (c in colors) {
var item = $('<div/>').css("background-color", '#' + colors[c]).addClass("colorbox");
item.click((function () {
var col = colors[c];
return function () {
currentColor = col;
};
})());
item.appendTo('#colorholder');
}
//Keep track of if the mouse is up or down
myCanvas.onmousedown = function () {mouseDown = 1;};
myCanvas.onmouseout = myCanvas.onmouseup = function () {
mouseDown = 0; lastPoint = null;
};
//Draw a line from the mouse's last position to its current position
var drawLineOnMouseMove = function(e) {
if (!mouseDown) return;
e.preventDefault();
// Bresenham's line algorithm. We use this to ensure smooth lines are drawn
var offset = $('canvas').offset();
var x1 = Math.floor((e.pageX - offset.left) / pixSize - 1),
y1 = Math.floor((e.pageY - offset.top) / pixSize - 1);
var x0 = (lastPoint == null) ? x1 : lastPoint[0];
var y0 = (lastPoint == null) ? y1 : lastPoint[1];
var dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0);
var sx = (x0 < x1) ? 1 : -1, sy = (y0 < y1) ? 1 : -1, err = dx - dy;
while (true) {
//write the pixel into Firebase, or if we are drawing white, remove the pixel
pixelDataRef.child(x0 + ":" + y0).set(currentColor === "fff" ? null : currentColor);
if (x0 == x1 && y0 == y1) break;
var e2 = 2 * err;
if (e2 > -dy) {
err = err - dy;
x0 = x0 + sx;
}
if (e2 < dx) {
err = err + dx;
y0 = y0 + sy;
}
}
lastPoint = [x1, y1];
};
$(myCanvas).mousemove(drawLineOnMouseMove);
$(myCanvas).mousedown(drawLineOnMouseMove);
// Add callbacks that are fired any time the pixel data changes and adjusts the canvas appropriately.
// Note that child_added events will be fired for initial pixel data as well.
var drawPixel = function(snapshot) {
var coords = snapshot.key().split(":");
myContext.fillStyle = "#" + snapshot.val();
myContext.fillRect(parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);
};
var clearPixel = function(snapshot) {
var coords = snapshot.key().split(":");
myContext.clearRect(parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);
};
pixelDataRef.on('child_added', drawPixel);
pixelDataRef.on('child_changed', drawPixel);
pixelDataRef.on('child_removed', clearPixel);
});
</script>
</body>
</html>
|
- Ahora pulsamos con el ratón en el archivo drawing.htm para que se abra con un navegador web.
- Dibujamos con el ratón.
____________________________________________________________
- Subimos el archivo a un servidor web.
- Voy a subir mi archivo drawing.htm a mi hosting de kio4.com
- Aquí está:
http://kio4.com/firebase/drawing.htm
- Las personas que entren en esa página pueden dibujar.
- La información se guarda con unos números que indican las coordenadas.
____________________________________
__________________________________
|
