Dessin automatique (canvas)

[Stalk3R]

Bonjour,

J'ai un code javascript qui permet de dessiner sur un CANVAS (HTML5) qu fonctionne parfaitement mais j'ai un petit problème la dessus, le crayon dessine automatiquement sans clicker sur la souris.

Je veut dessiner en cliquant sur le bouton gauche de la souris enfoncé et ne pas que le crayon se déclenche automatiquement au passage sur le canvas.

Voila le code javascript:

Code :

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
var started = false;
var canvas, context;
var stampId = '';
var lastColor = 'black';
var lastStampId = '';
 
function init() {
	canvas = $('#imageView').get(0);
	context = canvas.getContext('2d');
 
	// Auto-adjust canvas size to fit window.
	canvas.width  = window.innerWidth - 75;
	canvas.height = window.innerHeight - 75;
 
	//$('#container').get(0).addEventListener('mousemove', onMouseMove, false);
	canvas.addEventListener('mousemove', onMouseMove, false);
	canvas.addEventListener('click', onClick, false);
 
	// Add events for toolbar buttons.
	$('#red').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#pink').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#fuchsia').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#orange').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#yellow').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#lime').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#green').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#blue').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#purple').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#black').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#white').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
	$('#cat').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
	$('#dragonfly').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
	$('#ladybug').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
	$('#heart').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
	$('#dog').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
	$('#fill').get(0).addEventListener('click', function(e) { onFill(); }, false);
	$('#save').get(0).addEventListener('click', function(e) { onSave(); }, false);
}
 
function onMouseMove(ev) {
	var x, y;
 
	// Get the mouse position.
	if (ev.layerX >= 0) {
		// Firefox
		x = ev.layerX - 50;
		y = ev.layerY - 5;
	}
	else if (ev.offsetX >= 0) {
		// Opera
		x = ev.offsetX - 50;
		y = ev.offsetY - 5;
	}
 
	if (!started) {
		started = true;
 
		context.beginPath();
		context.moveTo(x, y);		
	}
	else {
		context.lineTo(x, y);
		context.stroke();
	}
 
	$('#stats').text(x + ', ' + y);
}
 
function onClick(e) {
	if (stampId.length > 0) {
		context.drawImage($(stampId).get(0), e.pageX - 90, e.pageY - 60, 80, 80);
	}
}
 
function onColorClick(color) {
	// Start a new path to begin drawing in a new color.
	context.closePath();
	context.beginPath();
 
	// Select the new color.
	context.strokeStyle = color;
 
	// Highlight selected color.
	var borderColor = 'white';
	if (color == 'white' || color == 'yellow') {
		borderColor = 'black';
	}
 
	$('#' + lastColor).css("border", "0px dashed white");
	$('#' + color).css("border", "1px dashed " + borderColor);
 
	// Store color so we can un-highlight it next time around.
	lastColor = color;
}
 
function onFill() {
	// Start a new path to begin drawing in a new color.
	context.closePath();
	context.beginPath();
 
	context.fillStyle = context.strokeStyle;
	context.fillRect(0, 0, canvas.width, canvas.height);
}
 
function onStamp(id) {
	// Update the stamp image.
	stampId = '#' + id;
 
	$(lastStampId).css("border", "0px dashed white");
	$(stampId).css("border", "1px dashed black");
 
	// Store stamp so we can un-highlight it next time around.
	lastStampId = stampId;	
}

Si vous avez une réponse merci de m'aider.

[Bovino]

Tu peux utiliser un flag sur le mousedown et le mouseup pour déterminer si le bouton est appuyé : si c'est le cas, tu dessines, sinon, tu ne fais rien.

EDIT

Code :

1
2
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('click', onClick, false);

Pas terribles tes noms de fonctions...
En dehors que tu leur donnes des noms équivoques similaires (à la casse près) à des méthodes du DOM JavaScript, dans les bonnes pratiques, on recommande de donner aux fonctions un nom qui décrit ce qu'elles font...
Enfin, je dis ça...

[Stalk3R]

Oui bien trouvé, je viens de le faire et ça marche, merci encore !

[Stalk3R]

Sinon, vous avez pas une idée pour créer un canvas infini dans une sorte de map viewer ? merci encore

[Bovino]

Comment tu feras pour naviguer dedans ? Parce qu'avec ton système de dessin, le bouton de la souris ne sera plus disponible

Sinon, je ne sais pas si ça marchera, mais tu peux t'inspirer de ce script : Déplacement dans une image style Google Maps.

[Stalk3R]

Merci Mr. bovino

Mais là comme vous avez motionné le bouton gauche de la souris ne sera pas disponible ! y a-t-il un moyen de le faire avec le bouton droit ? ou mettre un bouton sur INPUT pour pouvoir déplacer ensuite désactiver le bouton pour continuer à dessiner ?

Merci encore.

[Stalk3R]

Ou une autre idée, genre avec des scroll, à chaque fois qu'on descend ou on se déplace à droite le curseur s'agrandir, genre le système de facebook !

[Stalk3R]

Salut, désolais encore une fois pour le dérangement

Y a une possibilité pour agrandir le canvas avec la souris par exemple ? (AUTO RESIZING)