Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Canvas funcion como funciona??

Estas en el tema de Canvas funcion como funciona?? en el foro de Javascript en Foros del Web. Hola, como funciona esto: http://jsfiddle.net/XYHpJ/ Ya que no creo que exista event.point ?? Alguien me puede explicar con pocas palabras como funciona??...
  #1 (permalink)  
Antiguo 06/08/2013, 06:22
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Canvas funcion como funciona??

Hola, como funciona esto:
http://jsfiddle.net/XYHpJ/
Ya que no creo que exista event.point ??

Alguien me puede explicar con pocas palabras como funciona??
  #2 (permalink)  
Antiguo 06/08/2013, 06:40
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Canvas funcion como funciona??

buenas...
paso a paso no creo que se te pueda explicar, a menos que alguien que conozca del tema coincida con este tema. pues parece que se trata de una librería llamada paperjs. mientras tanto, lo mejor que puedes hacer es consultar la documentación. en todo caso, hasta donde conozco event.point no es una propiedad nativa de los objetos Event.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 06/08/2013, 07:05
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Canvas funcion como funciona??

En pocas palabras, se detectan los eventos onmousemove, onmousedown y onmouseup. Se crea una función que observa, cuando es invocada, si el evento onmousedown está activo y, si lo está, dibuja un punto (puede ser un círculo) en las coordenadas actuales del ratón (se calculan utilizando datos que se obtienen del evento onmousemove: encontrarás muchas maneras de averiguar estas coordenadas). Si el evento onmousedown está inactivo, la función no dibuja nada y queda en espera.
Finalmente, la función se mete dentro de un temporizador que la llama continuamente (setInterval, setTimeout o requestAnimationFrame).
  #4 (permalink)  
Antiguo 06/08/2013, 07:50
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Canvas funcion como funciona??

buenas @panino!!! ¿sabes si ese event.point es parte del DOM o canvas? hice una busqueda ligera pero los resultados hacen referencia a paperjs.

saludos!
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 06/08/2013, 08:05
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Canvas funcion como funciona??

Hola, Zero!
En efecto, es algo de paper.js, no tiene que ver con canvas
Aprovecho para mandarte un abrazo!
  #6 (permalink)  
Antiguo 06/08/2013, 08:52
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: Canvas funcion como funciona??

Hola muchas gracias a los dos. Bueno Panino5001 muy clara la explicacion pero no veo setInterval() ni nada paserido solo un objeto y tres funciona para el raton que no se llaman nunca?? O sea falta algo como document.addEventListener(); ???

Un objeto hace todo. Es algo de la libreria? Me estoy poniendo loco.

Y una cosa mas. <script type="text/paperscript" canvas="canvas"> No lo he visto nunca... porque esta paperscript y luego canvas="canvas" ???

Las liberias no son archivos por separado?

Saludos
  #7 (permalink)  
Antiguo 06/08/2013, 09:25
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Canvas funcion como funciona??

Fijate:
http://fiddle.jshell.net/XYHpJ/show/
Viendo código fuente:
http://alexismangin.com/public/cbc/js/paper.js
Y ahí:
Código:
//...
DomEvent.requestAnimationFrame = new function() {
	var part = 'equestAnimationFrame',
		request = window['r' + part] || window['webkitR' + part]
			|| window['mozR' + part] || window['oR' + part]
			|| window['msR' + part];
	if (request) {
		request(function(time) {
			if (time == undefined)
				request = null;
		});
	}

	var callbacks = [],
		focused = true,
		timer;

	DomEvent.add(window, {//....


Y si seguís mirando vas a encontrar un setInterval también.

La que yo describí es una manera sencilla de hacerlo, también puede usarse el mismo evento onmousemove y prescindir de timmers. No analicé el código en profundidad para ver qué es exactamente lo que usan acá, porque la verdad me parece absurdo usar semejante librería para un ejercicio tan básico
Lo de customizar el atributo type es una mala manera (no estandar) de ejecutar el javascript de manera postergada o temporizada o a demanda, ya que los tipos que no son text/javascript (o, para ser más exactos, los que no tienen un valor que el navegador reconozca) no se ejecutan hasta no ser evaluados ex profeso por un script de tipo text/javascript (en realidad no hay garantías de que esto deba ser respetado por los navegadores, aunque en la práctica suceda). Un ejemplo:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
alert(123);
onload=function(){
var sc=document.getElementsByTagName('script'),i=0,l=sc.length;
	for(;i<l;i++){
                 //sin esto, el 2do. alert no saldría
		if(sc[i].getAttribute('type')=='panino5001')eval(sc[i].text);
	}
}
</script>
</head>

<body>

<script type="panino5001">
alert(456);
</script>
</body>
</html>

Última edición por Panino5001; 06/08/2013 a las 12:29
  #8 (permalink)  
Antiguo 06/08/2013, 13:35
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: Canvas funcion como funciona??

Muchas gracias. Ya me quedo claro. Bueno veo que casi todo es la libreria.

Tema resuelto

Etiquetas: canvas, funcion, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:50.