chessground icon indicating copy to clipboard operation
chessground copied to clipboard

Drawn arrows can look better when they overlap

Open hb20007 opened this issue 2 years ago • 0 comments

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

hb20007 avatar Feb 04 '22 20:02 hb20007