Faire un début de menu en canvas avec JCanvas

En Canvas avec votre lib favorite JCanvas, on peut comme déjà vu tracer du texte. Pour tracer un menu j’avais envie d’afficher un petit rectangle sous le texte ce qui fait plus classe^^.
Pour cela je trace le rectangle avant le texte autrement il sera sur le texte:

	// Le rectangle:
	canvas.drawRect({
		layer: true,
		name: 'rectangle',
		fillStyle: '#F1F1F1',
		x: 180, y: 100,
		width: 2,
		height: 2,
		cornerRadius: 10
	});
	
	// Le texte:
	canvas.drawText({
		layer: true,
		name: 'texte',
		fillStyle: '#36c',
		fontStyle: 'bold',
		fontSize: '20pt',
		fontFamily: 'Trebuchet MS, sans-serif',
		text: 'The quick brown fox jumps over the lazy dog.',
		x: 180, y: 100,
		align: 'left',
		maxWidth: 300
	});

Le problème c’est qu’on connait pas la taille du texte pour le moment, car tout dépend des options choisit. Le but c’est que ça soit dynamique!!!
Voila pourquoi j’ai mit une taille du rectangle bidon…

Comment faire ?
On récupère dans une variable les données de notre texte une fois qu’on la tracé:

layer = canvas.getLayer('texte');

Il suffit ensuite de modifier notre rectangle avec la taille du texte qu’on a récupéré:

	canvas.animateLayer('rectangle', {
		width: layer.width+20,
		height: layer.height+20,
	});

Le +20 a la taille permet de faire une sorte de padding pour pas que la bordure du rectangle soit pile sur le texte. Comme on trace a partir du centre si on rajoute +20 sur width on agrandit la longueur ce qui fait +10 de chaque coté même chose pour height la hauteur.

Si vous tester ce code, vous verrez sans doute apparaître le texte rapidement au chargement de la page et le rectangle grandir dans une animation fluide grâce à animateLayer(). Si on veut pas cet effet, il faut mettre 0 comme ici:

	canvas.animateLayer('rectangle', {
		width: layer.width+20,
		height: layer.height+20,
	}, 0);

L’inconvénient du rectangle derrière le texte c’est que quand on veut faire un menu on va pouvoir cliquer sur le texte ou sur le rectangle ce qui peut être chiant a gérer. J’avais donc eu l’idée de mettre le texte derrière et de rendre le rectangle transparent pour qu’on puisse voir le texte, mais a cause de la transparence le texte est moins visible. C’est moche.

j’ai donc changé de méthode: comme avant on trace un rectangle de fond, par dessus on affiche le texte, puis on affiche un autre rectangle ultra transparent et donc invisible et c’est lui qui va gérer les clicks. Ce qui va nous faire 3 éléments^^.

Comme on peut le voir dans le code suivant, j’ai attribué deux types de groupe a nos éléments:
Ils disposent d’un “groups” pour les modifications ce qui va nous permettre de tout modifier en une seule fois comme cacher les éléments, les delete… L’autre groupe est un dragGroups ce qui va nous permettre de déplacer nos éléments en même temps. Ca va nous simplifier la vie!!!

Le code:

	// Le rectangle:
	canvas.drawRect({
		layer: true,
		draggable: true,
		groups: ['menu'],
		dragGroups: ['menu'],
		name: 'rectangle',
		fillStyle: '#FFFFFF',
		strokeStyle: '#000000',
		strokeWidth: 5,
		x: 180, y: 100,
		width: 0,
		height: 0,
		cornerRadius: 10,
		opacity: 0.9
	});
	
	// Le texte:
	canvas.drawText({
		layer: true,
		draggable: true,
		groups: ['menu'],
		dragGroups: ['menu'],
		name: 'texte',
		fillStyle: '#36c',
		fontStyle: 'bold',
		fontSize: '20pt',
		fontFamily: 'Trebuchet MS, sans-serif',
		text: 'The quick brown fox jumps over the lazy dog.',
		x: 180, y: 100,
		align: 'left',
		maxWidth: 300
	});
	
	// Le rectangle 2:
	canvas.drawRect({
		layer: true,
		draggable: true,
		groups: ['menu'],
		dragGroups: ['menu'],
		name: 'rectangle2',
		// fillStyle: '#FF0000',
		strokeStyle: '#000000',
		strokeWidth: 5,
		x: 180, y: 100,
		width: 0,
		height: 0,
		cornerRadius: 10,
		// opacity: 0.0,
		click: function(layer) {
			log("C'est ici qu'on va gérer les clicks sur le menu");
		}
	});

	layer = canvas.getLayer('texte');
	canvas.animateLayerGroup('menu', {
		width: layer.width+20,
		height: layer.height+20,
	}, 0);

Je n’ai pas précisé dans ce tuto car ce n’est qu’un « debut de menu », mais en cliquant sur le rectangle on peut changer la couleur ou ça taille par exemple pour montrer qu’il est sélectionné ou changer son texte pour dire par exemple ouvrir ou fermer… Donc avec les 2 précédents tuto on a les bases pour faire un petit menu sympa. Voila!!!