Touchstart / Mousedown

**coincoin22** · 11/11/2012, 19h49

Bonjour,

J'ai un PC tactile, et je voudrais transformer ce code JS [Paint], pour pouvoir "peindre" avec le doigt !

Il faudrait remplacer les évènements mouse par touch je pense mais je n'y comprends rien ;-)

Si vous pouviez me donner un coup de main ? Merci !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
$(document).ready(function() {
 
	// Variables :
	var color = "#000";
	var painting = false;
	var started = false;
	var width_brush = 5;
	var canvas = $("#canvas");
	var cursorX, cursorY;
	var restoreCanvasArray = [];
	var restoreCanvasIndex = 0;
 
	var context = canvas[0].getContext('2d');
 
	// Trait arrondi :
	context.lineJoin = 'round';
	context.lineCap = 'round';
 
	// Click souris enfoncÃ© sur le canvas, je dessine :
	canvas.mousedown(function(e) {
		painting = true;
		// CoordonnÃ©es de la souris :
		cursorX = (e.pageX - this.offsetLeft);
		cursorY = (e.pageY - this.offsetTop);
 
	});
 
	// Relachement du Click sur tout le document, j'arrÃªte de dessiner :
	$(this).mouseup(function() {
		painting = false;
		started = false;
	});
 
	// Mouvement de la souris sur le canvas :
	canvas.mousemove(function(e) {
		// Si je suis en train de dessiner (click souris enfoncÃ©) :
		if (painting) {
 
 
			// Set CoordonnÃ©es de la souris :
			cursorX = (e.pageX - this.offsetLeft) - 10; // 10 = dÃ©calage du curseur
			cursorY = (e.pageY - this.offsetTop) - 10;
 
			// Dessine une ligne :
			drawLine();
		}
	});
 
 
 
	// Fonction qui dessine une ligne :
	function drawLine() {
		// Si c'est le dÃ©but, j'initialise
		if (!started) {
			// Je place mon curseur pour la premiÃ¨re fois :
			context.beginPath();
			context.moveTo(cursorX, cursorY);
			started = true;
 
		} 
		// Sinon je dessine
		else {
			context.lineTo(cursorX, cursorY);
			context.strokeStyle = color;
			context.lineWidth = width_brush;
			context.stroke();			
 
		}
	}
 
	// Clear du Canvas :
	function clear_canvas() {
		context.clearRect(0,0, canvas.width(), canvas.height());
	}
 
	// Pour chaque carrÃ© de couleur :
	$("#couleurs a").each(function() {
		// Je lui attribut une couleur de fond :
		$(this).css("background", $(this).attr("data-couleur"));
 
		// Et au click :
		$(this).click(function() {
			// Je change la couleur du pinceau :
			color = $(this).attr("data-couleur");
 
			// Et les classes CSS :
			$("#couleurs a").removeAttr("class", "");
			$(this).attr("class", "actif");
 
			return false;
		});
	});
 
	// Largeur du pinceau :
	$("#largeurs_pinceau input").change(function() {
		if (!isNaN($(this).val())) {
			width_brush = $(this).val();
			$("#output").html($(this).val() + " pixels");
		}
	});
 
	// Bouton Reset :
	$("#reset").click(function() {
		// Clear canvas :
		clear_canvas();
 
		// Valeurs par dÃ©faut :
		$("#largeur_pinceau").attr("value", 5);
		width_brush = 5;
		$("#output").html("5 pixels");
 
	});
 
	// Bouton Save :
	$("#save").click(function() {
		var canvas_tmp = document.getElementById("canvas");	// Ca merde en pernant le selecteur jQuery
		window.location = canvas_tmp.toDataURL("image/png");
	});
 
});

**tidus_6_9_2** · 13/11/2012, 09h27

Hello,

Normalement tout ce qui est tactile tu peux le gérer avec JQuery Mobile.

Tu as sinon une possibilité, c'est d'utiliser ce petit plugin bien sympa et bien pratique :

http://eightmedia.github.com/hammer.js/

Ou encore d'utiliser les événements suivants :
- touchstart
- touchmove
- touchend
- touchcancel

par exemple pour le touchmove :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
document.addEventListener('touchmove',
	function(event){
		event.preventDefault();
		var mvment = e.touches[0];
		alert(mvment.pageX + " - " + mvment.pageY);
	}
	,false);