lichess-org / chessground

Mobile/Web chess UI for lichess.org
https://lichess.org
GNU General Public License v3.0
1.02k stars 262 forks source link

Drawn arrows can look better when they overlap #221

Open hb20007 opened 2 years ago

hb20007 commented 2 years ago
Chess board with arrows

Using the arrows, I am trying to show a sequence of moves. It is Black to play. First the moves shown by the red arrows are played, then the moves shown by the green arrows.

The problem is the overlapping red and green arrows showing the movements of the white queen. I am using different colors to make it easier to see, because if both arrows were green it would look even less clear. But still it is not ideal.

One way it might be improved is to change the styling of the bottom arrow when it is detected that 2 arrows overlap. For example, the bottom arrow can be made thicker when it's detected that a square it covers overlaps with one covered by an arrow drawn later.

I am not sure if this is feasible though.


I have another solution which is definitely feasible but I'm not sure if it will be good. The 3 colors of arrows can have very slightly different widths. So this will allow using them in drawing complex drawings with overlapping lines. And if they are used for simpler things maybe the different widths will not be so noticeable to the eye.

To show how it will look like, I have tried giving all the red arrows a stroke width of 0.2, instead of the original 0.15625:

Same diagram with arrows of different widths