Pizarra con canvas que responda a scroll
Publicado por David (1 intervención) el 19/03/2016 12:45:35
Buenas.
Mis disculpas pero estuve dando vueltas entre javascript y jquery para intentar resolver ésto, y como no sé con cuál de los dos quedarme lo publico acá.
Actualmente estoy con esta la página: http://japonesdetodos.com;
El sitio está soso, así que de a poco quiero poner mejoras además de mejorar el estilo para que se vea más amigable.
Una de esas mejoras es una minipizarra (en la parte de abajo a la derecha que dice «Practicar Kanji/Kana»), para que los estudiantes puedan practicar escritura mientras lean.
Mi idea fue crear una pequeña pizarra con canvas, con propiedad fixed para que fija por toda la página.
El problema que estoy teniendo y no puedo resolver, es que no se captura bien el scrolling, y al scrollear el punto de escritura en la pizarra baja cerca del doble que la pizarra en sí (scroleen una vez hacia abajo y al dibujar van a ver que el trazo se hace varios píxeles más abajo).
Probé cambiar valores, usar otras fórmulas, mirar ejemplos de todos lados, y el resultado siempre es el mismo. Calculo que no estoy entendiendo cómo manejar el evento hacer click luego de hacer el scroll.
Este es el código que tengo (ignoren el estilo, que lo puse como div independiente por velocidad).
Espero una mano. ¡Gracias!
Mis disculpas pero estuve dando vueltas entre javascript y jquery para intentar resolver ésto, y como no sé con cuál de los dos quedarme lo publico acá.
Actualmente estoy con esta la página: http://japonesdetodos.com;
El sitio está soso, así que de a poco quiero poner mejoras además de mejorar el estilo para que se vea más amigable.
Una de esas mejoras es una minipizarra (en la parte de abajo a la derecha que dice «Practicar Kanji/Kana»), para que los estudiantes puedan practicar escritura mientras lean.
Mi idea fue crear una pequeña pizarra con canvas, con propiedad fixed para que fija por toda la página.
El problema que estoy teniendo y no puedo resolver, es que no se captura bien el scrolling, y al scrollear el punto de escritura en la pizarra baja cerca del doble que la pizarra en sí (scroleen una vez hacia abajo y al dibujar van a ver que el trazo se hace varios píxeles más abajo).
Probé cambiar valores, usar otras fórmulas, mirar ejemplos de todos lados, y el resultado siempre es el mismo. Calculo que no estoy entendiendo cómo manejar el evento hacer click luego de hacer el scroll.
Este es el código que tengo (ignoren el estilo, que lo puse como div independiente por velocidad).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<style>
canvas{position:fixed;bottom: 0;right:24.75%;
z-index: 20000;
}#limpiar {
position:fixed;bottom: 230px;right:24.75%;
cursor:pointer;width:181px;background-color: black;
text-align: center;
color: white;display: none;z-index: 20000;
}</style>
<div>
<a id="limpiar" href="#limpiar">Borrar</a>
<canvas id="can" width="181" height="230"></canvas>
</div>
<script language="JavaScript">
$(document).ready(function(){
var clic=false;var xCoord,yCoord="";
var canvas=document.getElementById("can");
var cntx=canvas.getContext("2d");
cntx.strokeStyle="black";
cntx.lineWidth=1;
cntx.lineCap="round";
cntx.fillStyle="white";
cntx.fillRect(0,0,canvas.width,canvas.height);
$("#can").mousedown(function(canvas){
clic=true;cntx.save();
var a=document.getElementById("can");
xCoord=canvas.pageX-a[0];
yCoord=canvas.pageY-a[0];
});
$(document).mouseup(function(){
clic=false});
$(document).click(function(){
clic=false});
$("#can").mousemove(function(canvas){
if(clic==true){
//Calculo que está por acá, setear correctamente el lugar de inicio
cntx.beginPath();
cntx.moveTo(canvas.pageX-this.offsetLeft,canvas.pageY-this.offsetTop);
cntx.lineTo(xCoord,yCoord);
cntx.stroke();
cntx.closePath();
xCoord=canvas.pageX-this.offsetLeft;
yCoord=canvas.pageY-this.offsetTop;
}});
$("#limpiar").click(function(){
cntx.fillStyle="#fff";
cntx.fillRect(0,0,canvas.width, canvas.height);
cntx.strokeStyle="black";
cntx.fillStyle="black";
});
$("#toggler").click(function(){
$("#limpiar").toggle("fast");
$("#can").toggle("fast");
})
})
</script>
Espero una mano. ¡Gracias!
Valora esta pregunta
0