Discussion :

[pitchu]

Bonjour,

Je voudrais savoir comment déplacer une même ligne sur un canvas, j'ai ce code là mais il crée une nouvelle ligne à chaque fois.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
deplaceLigne (x){
    let canvas = this.mycanvas.nativeElement
    let context = canvas.getContext('2d');
 
    context.beginPath();
    context.moveTo(canvas.width, x);
    context.lineTo(0, x);
    context.stroke();
}

[NoSmoking]

Bonjour,
le <canvas> n'est qu'une « ardoise », il te faut effacer la ligne tracée précédemment avant d'en dessiner une nouvelle.

[pitchu]

Bonjour,

En faite je voudrais avoir quatre lignes sur le canvas que je voudrais déplacer dessus il y a une autre approche pour faire cela ?

[NoSmoking]

Le plus simple reste de « nettoyer » la surface, avec un clearRect, et de redessiner dessus, en règle générale cela n'est pas perceptible à l'oeil. D'autres techniques peuvent être mise en oeuvre comme la superposition de plans mais bon ...

[pitchu]

si je nettoie je devrais sauvegarder tous les éléments qui sont dessinés sur le canvas puis les remettre juste pour déplacer une ligne ? (j'ai l'intention après de rajouter d'autres éléments sur le canvas).

[NoSmoking]

Comme dit un <canvas> est une « ardoise » donc pas forcément très souple d'utilisation.

Tu peux, pour certains éléments, les dessiner sur un <canvas> à part mais il te faudra quoiqu'il arrive définir les propriétés de tes éléments crées pour pouvoir les redessiner dans une boucle.

[pitchu]

Y-a-t-il une autre solution pour faire ce que je veux ? J'ai une image sur laquelle je déplace des lignes dessus.

[NoSmoking]

Tu peux mettre ton image en background de ton <canvas>, ou encore superposer deux <canvas>.

[pitchu]

Bonjour,

J'ai pensé aussi à mettre en place une superposition de canvas. Je vais essayer de le mettre en place.
J'ai trouver aussi une API konva http://rafaelescala.com/ng2-konva/. Mais je ne comprends pas comment ajouter dans le stage l'image téléverser.