☰

tikz マトリックスの余白に関する問題

tag-icon • tag-icon tikz-pgf tikz-matrix
tikz マトリックスの余白に関する問題

私は正方形のボードゲームを作っていますが、セル内のテキストを回転させる必要があるため（すべてのプレイヤーが読めるようにするため）。問題は、セルを回転させると余分なスペースがいくつか現れ、それを排除できないことです。このサイトの他の回答で提案されているように、私は

anchor=base,minimum width=1.75cm,minimum height=1.75cm,text height=2ex,text depth=0.25ex

そして

column sep=0cm, row sep=0cm, outer sep=0pt,inner sep=0

適切な場所に配置します。しかし、まだエラーが発生します。私のコードは次のとおりです。

\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{calc,matrix}
\usepackage{amsthm}
\usepackage{colortbl}
\begin{document}

\begin{tikzpicture}[element/.style={anchor=base,minimum width=1.75cm,minimum height=1.75cm,draw=black,line width=1pt,text height=2ex,text depth=0.25ex}]
\matrix (m) [matrix of nodes,nodes={element},column sep=0cm, row sep=0cm, outer sep=0pt,inner sep=0]{
|[draw,rotate=-90]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 & |[draw,rotate=-90]|3 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=-90]|31 & |[draw,fill=blue!20,rotate=180]|23 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=-90]|2 & |[draw,fill=red!20,rotate=180]|9 & |[draw,rotate=-90]|12 & |[draw,fill=red!20,rotate=180]|19 & |[draw,fill=red!20,rotate=180]|22 & |[draw,rotate=-90]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=-90]|3 & |[draw,fill=blue!20,rotate=180]|8 & |[draw,rotate=-90]|13 & |[draw,fill=yellow!20,rotate=180]|18 & |[draw,fill=red!20,rotate=180]|23 & |[draw,rotate=-90]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=-90]|4 & |[draw,fill=red!20,rotate=180]|7 & |[draw,rotate=-90]|14 & & & & & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21\\
|[draw,rotate=-90]|5 & |[draw,fill=red!20,rotate=180]|6 & |[draw,rotate=-90]|15 & & & & & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=-90]|4 & |[draw,fill=red!20,rotate=180]|7 & |[draw,rotate=-90]|14 & & & & & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21\\
|[draw,rotate=-90]|5 & |[draw,fill=red!20,rotate=180]|6 & |[draw,rotate=-90]|15 & & & & & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=-90]|3 & |[draw,fill=blue!20,rotate=180]|8 & |[draw,rotate=-90]|13 & |[draw,fill=yellow!20,rotate=180]|18 & |[draw,fill=red!20,rotate=180]|23 & |[draw,rotate=-90]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=-90]|4 & |[draw,fill=red!20,rotate=180]|7 & |[draw,rotate=-90]|14 & |[draw,fill=red!20,rotate=180]|17 & |[draw,fill=blue!20,rotate=180]|24 & |[draw,rotate=-90]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21\\
|[draw,rotate=-90]|5 & |[draw,fill=red!20,rotate=180]|6 & |[draw,rotate=-90]|15 & |[draw,fill=blue!20,rotate=180]|16 & |[draw,fill=yellow!20,rotate=180]|25 & |[draw,rotate=-90]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=-90]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
};

\end{tikzpicture}

\end{document}

私の出力:

ここに画像の説明を入力してください

回転によってボードが乱れないように、空白スペースをすべて取り除くにはどうすればよいでしょうか?

答え1

基本的な問題の解決策はシグル コメント。ただし、次の方法でコードを簡素化して簡潔にすることができます。

  • 各列ごとにスタイルを個別に定義します。これにより、回転に関するすべてのローカルコマンドと色に関する多くのコマンドが不要になります。
  • ノードのスタイルを1か所で定義する方がよいでしょう。matrix
  • ノードの内容は数値なので、 text depth余分なものを規定することは
  • ノードの最小サイズを決定するには、ノードが正方形であることが十分である。

結果として得られる mwe は次のようになります。

\documentclass{standalone}
%\usepackage[table]{xcolor}
\usepackage{tikz}
\usetikzlibrary{matrix}
\usepackage{amsthm}

\begin{document}
    \begin{tikzpicture}
\matrix (m) [matrix of nodes,
             nodes={draw, line width=1pt,
                    minimum size=4ex, outer sep=0pt,
                    anchor=center},
             column sep=-1pt, row sep=-1pt,
             column 1/.style = {nodes={rotate=-90}},
             column 2/.style = {nodes={rotate=180}},
             column 3/.style = {nodes={rotate=-90}},
             column 4/.style = {nodes={rotate=180}},
             column 5/.style = {nodes={rotate=180}},
             column 6/.style = {nodes={rotate=-90}},
             column 7/.style = {nodes={fill=blue!20,rotate=180}},
             column 8/.style = {nodes={rotate=-90}},
             column 9/.style = {nodes={fill=blue!20,rotate=180}},
            column 10/.style = {nodes={fill=red!20,rotate=-90}},
            ]{
1 & |[fill=blue!20]|10 & 11 & |[fill=blue!20]|20   & |[fill=red!20]|21 & 3 & 10 & 31 & 23 & 21 \\
%
2 & |[fill=red!20]|9    & 12  & |[fill=red!20]|19    & |[fill=red!20]|22 & 1 & 10 & 11 & 20 & 21 \\
%
3 & |[fill=blue!20]|8   & 13  & |[fill=yellow!20]|18 & |[fill=red!20]|23 & 1 & 10 & 11 & 20 & 21 \\
%
4 & |[fill=red!20]|7    & 14  & & & & & 11 & 20 & 21 \\
%
5 & |[fill=red!20]|6    & 15  & & & & & 11 & 20 & 21 \\
%
4 & |[fill=red!20]|7    & 14  & & & & & 11 & 20 & 21 \\
%
5 & |[fill=red!20]|6    & 15  & & & & & 11 & 20 & 21 \\
%
3 & |[fill=blue!20]|8   & 13  & |[fill=yellow!20]|18 & |[fill=red!20]|23  & 1 & 10 & 11 & 20 & 21 \\
%
4 & |[fill=red!20]|7    & 14  & |[fill=red!20]|17    & |[fill=blue!20]|24 & 1 & 10 & 11 & 20 & 21 \\
%
5 & |[fill=red!20]|6 & 15 & |[fill=blue!20]|16 & |[fill=yellow!20]|25 & 1 & 10 & 11 & 20 & 21 \\
};
    \end{tikzpicture}

結果は次のとおりです:

ここに画像の説明を入力してください

答え2

免責事項: 問題を解決した Sigur に全責任があります。私が行ったのは、いくつかの小さな追加調整だけです。主な問題はanchor=center、Sigur が指摘したように、 を設定することで解決されます。そうしないと、回転の中心が同じになりません。小さな変更はコード内にマークされています。

\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{calc,matrix,shapes,positioning}
\usepackage{amsthm}
\usepackage{colortbl}
\begin{document}

\begin{tikzpicture}[element/.style={regular polygon,
regular polygon sides=4, %<- make sure that the nodes end up being quadratic
anchor=center,%<- Sigur
minimum width=1.75cm,
draw=black,line width=1pt,text height=2ex,text depth=0.25ex
}]
\matrix (m) [matrix of nodes,nodes={element},column sep=0cm, row sep=0cm, 
outer sep=0pt,inner sep=0,row sep=-1pt,column sep=-1pt]{%<- to have the same line width everywhere
|[draw,rotate=270]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 & |[draw,rotate=270]|3 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=270]|31 & |[draw,fill=blue!20,rotate=180]|23 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=270]|2 & |[draw,fill=red!20,rotate=180]|9 & |[draw,rotate=270]|12 & |[draw,fill=red!20,rotate=180]|19 & |[draw,fill=red!20,rotate=180]|22 & |[draw,rotate=270]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=270]|3 & |[draw,fill=blue!20,rotate=180]|8 & |[draw,rotate=270]|13 & |[draw,fill=yellow!20,rotate=180]|18 & |[draw,fill=red!20,rotate=180]|23 & |[draw,rotate=270]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=270]|4 & |[draw,fill=red!20,rotate=180]|7 & |[draw,rotate=270]|14 & & & & & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21\\
|[draw,rotate=270]|5 & |[draw,fill=red!20,rotate=180]|6 & |[draw,rotate=270]|15 & & & & & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=270]|4 & |[draw,fill=red!20,rotate=180]|7 & |[draw,rotate=270]|14 & & & & & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21\\
|[draw,rotate=270]|5 & |[draw,fill=red!20,rotate=180]|6 & |[draw,rotate=270]|15 & & & & & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=270]|3 & |[draw,fill=blue!20,rotate=180]|8 & |[draw,rotate=270]|13 & |[draw,fill=yellow!20,rotate=180]|18 & |[draw,fill=red!20,rotate=180]|23 & |[draw,rotate=270]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
|[draw,rotate=270]|4 & |[draw,fill=red!20,rotate=180]|7 & |[draw,rotate=270]|14 & |[draw,fill=red!20,rotate=180]|17 & |[draw,fill=blue!20,rotate=180]|24 & |[draw,rotate=270]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21\\
|[draw,rotate=270]|5 & |[draw,fill=red!20,rotate=180]|6 & |[draw,rotate=270]|15 & |[draw,fill=blue!20,rotate=180]|16 & |[draw,fill=yellow!20,rotate=180]|25 & |[draw,rotate=270]|1 & |[draw,fill=blue!20,rotate=180]|10 & |[draw,rotate=270]|11 & |[draw,fill=blue!20,rotate=180]|20 & |[draw,fill=red!20,rotate=180]|21 \\
};
\end{tikzpicture}

\end{document}

ここに画像の説明を入力してください

楽しいゲームを！

関連情報