検索キーワード：
Text_Box、テキスト、文字
テキスト、および、枠付きテキストです。
枠付きテキストの例
文字コードは、Shift-JIS で、改行は \r\n です。
関連
新規テキストを作成するには、キャンバスをダブルクリックするか、
ツールバーのテキストボタンを押してからキャンバスをクリックしてください。
他のテキストをクリックする前にダブルクリックしたときのテキストは、キャンバスタイプによって
異なります。
キャンバスタイプ
ドキュメント
その他
四角い枠つきテキスト
枠なしテキスト
作成されるテキスト
他のテキストをクリックした後で、キャンバスをダブルクリックすると、先にクリックしたテキストの
書式と同じテキストが作成されます。
左記ツールバーのボタンを押してからキャンバスをクリックしたときは、
そのボタンにかかれた書式のテキストが作成されます。
ボタンに対応したテキストの書式を変えるときは、
を編集します。
Shift キーや Ctrl キーを押したままダブルクリックすると、別の書式のテキストが出来ます。
キャンバスをダブルクリック
ABC
テキスト生成
ABC
クリックでテキスト生成
選択して
画面などをベースとして操作手順などを示した図解では、(1), (2), (3) という番号をつける
ことが一般的ですが、次の番号が図解のどこになるのかが分かりにくい欠点があります。
そこで、テキストのプロパティの Tab Order を設定しておくと、タブキーを押すことで、
次のテキストへフォーカスを移動させることができます。
タブキーを押すか、右クリックして「次の図形を選択」を選ぶと、
タブオーダーの順番でテキストのフォーカスを移動します。
m_10Descent
m_10H
m_BoxMarginY
m_BoxMarginX + m_DiffW
m_X, m_Y
赤字は、描画後に分かる値
緑字は、ファイルから分かる値
m_BoxRect.
right, bottom
m_BetweenOfLine
m_BoxRect.
left, top
m_10H1
Text_Box クラスのメンバ変数名
m_W, m_W1
m_W は、10倍フォントによる幅
m_W1 は、1倍フォントによる幅
m_BoxRect.right = m_X + m_W + m_BoxMarginX; (左詰のとき）
ピクセルと .0 座標の関係
ラインと .0 座標の関係
矩形と .0 座標の関係
枠付き矩形と .0 座標の関係
left
right
x - marginX
x + w + diffW + marginX
左詰
中央
右詰
x - ( w + diffW ) / 2 - marginX
rc->left + w + diffW + 2 * marginX
x - w - diffW - marginX
x + marginX
left=100
↓
right=122
↓
左詰
x=108
↓
marginX=8
w=6
marginX=8
テキスト="1"、x=108、marginX=8 の場合
中央
x=111
↓
右詰
x=114
↓
merginX=0 で
実際は w=7
SVGビューアでは、
X+0.5 でピクセルの真上
"11"と増やすと w=13,20,26
m_BasePos
Text_Box_LeftAlign など
（新版では、16倍にする）
m_BoxMarginX
m_BoxMarginY
茶線は、Rectangle で指定する位置
ズームしたときのラインキャッシュの扱い
zoom128
100%表示のラインキャッシュから、表示1文字ごとに計算する
キャンバスの最大は、32767x32767
ABC
文字H = 9
間H = 2+6
間H = 2+6
境界H = 1
境界H = 1
m_Y = 30
+m_10Descent = +1.8
y=31.8 = 32
m_10H=13.3
m_Top = 20
DrawText に指定する Y 座標 = 30 に、descent を足した位置のピクセルが、
フォントの最も下のピクセル y=32 になる。そのピクセルを含んだ高さ 13.3 が
正しくなるように、m_Top = 20 = 32 - (int)( m_10H + 0.5 - 1 )
サイズ 10pt で、高さ 13.3pixel は、Windows が 0.75pt / 1pixelのため。
水平線を生成し、
動かして数値を確認
予想される Windows のフォントの位置計算
30
13
39
21
30
63
+9
+17
+26
Y
dY
dY
エディタでは、
文字は、X+1, Y+1 している
枠の外側は一致している
左のテスト方法
左の十字線を、テストするウィンドウの背景にコピーし、
十字線の交点(30,30)にカーソルを合わせて文字を生成する
正しい図形は以下のとおり。
font size = 10
m_X, m_Y = 30, 30
m_BoxMerginY = 6
枠の描き方
Text_Box::Draw
生成
x, y
m_BoxMarginX|Y
描画
読込
x, y
m_BoxRect
描画
m_EnableState=1
m_EnableState=4
m_EnableState=5
1 : m_BoxMarginX|Y
2 : m_BetweenOfLine
4 : m_BoxRect
生成時
描画後
ファイル描画前
CChildView::OnLButtonDown など
保存
(ファイル)
m_EnableState=7
m_EnableState=6
改行入力
x, y
m_BetweenOfLine
m_BoxRect
x, y
m_BoxMarginX|Y
m_BoxRect
2行目読込
（ALL）
描画
m_EnableState の監視対象
保存
CSVGCatApp::Load_imp
Text_Editor::OnChar( '\n' )
下記の状態遷移は、CChildView::SetDrawnParam や SetDrawnParamOfAllPage から Text_Box::Draw を
呼び出して、枠の位置を再計算させる時間のかかる処理を、保存のたびに全ページで行わせないため。
m_EnableState は、下記の変数の有効/無効を監視する。
CadPrim_DrawParam は、CChildView::GetDrawParam で取得します。
描画パラメータ
Text_Box::GetBox のバリエーション
GetBox : キャンバス座標
GetBox2 : 紙、表示座標（オフセットなし）
GetBox3 : Word のスペースを考慮した GetBox2
m_BetweenOfLine のデフォルトは、
スタイルセット m_TextDesign を使う。
Text_Box::SetBox
Text_Box::OutSVG
枠マージン変更
Text_Box:::
MoveByHandle
x,y は常に有効
デバッグ
図形の ID を元に、状態を追跡してデバッグします。
123
456
789
126
789
0.更新
1.削除
2.維持
0.更新
1.削除
12
123
456
3〜5を削除
3〜6を削除
3〜5を削除
0.更新
1.削除
126
123
456
編集前
編集後
キャッシュ
0.更新
2.維持
0.更新
0.更新
MoveLineCache
ty
nLine
CalcLineGx
ty
nLine
1
-1
0
1
0
-1
1
ty2 が最終行の場合：
ty2 が最終行の tx2 が行末：
-1
0
1
ty1+1
ty1-ty2
ty1
1
1
1
ty2 が途中行のtx2 が行頭の場合：
1
0
-1
1
0.更新
1.維持
2〜3を削除
0.更新
1.維持
2.維持
1456
789
123
456
789
ty1=ty2の場合：
0.維持
1.更新
2.維持
5を削除
1
0
0
1
123
456
789
123
46
789
0.維持
1.更新
2.維持
増える場合：
0.維持
1.更新
2.更新
3.更新
4.維持
123
4abc
def
ghi9
123
5〜8を削除して貼り付け
0.維持
1.
2.
3.維持
123
456
789
123
nLine
ty
Calc
nLine
ty
Move
3
1
1
3
3
-1
1
2
0.維持
1.
2.
3.
4.維持
5〜2を削除して貼り付け
123
4abc
def3
456
0.維持
1.更新
2.更新
3.維持
123
456
789
123
456
減る場合：
(cy1=1, cy2=2, cy3=3)
(cy1=1, cy2=3, cy3=2)
cy3-cy1+1
cy1
cy2+1
cy3-cy2
cy3+1
cy3-cy2
cy3-cy1+1
cy1
3
45
3
45
3
456
23
5
56
78
abc
def
ghi
56
789
12
abc
def
この番号は、キャッシュの行番号
この番号は、編集前のキャッシュの行番号
Text_Box::MoveLineCache
ラインキャッシュの挿入削除
Text_Box::CalcLineGx
ラインキャッシュに入れる値を計算する
（MoveLineCache を呼び出した後に呼び出す）
ラインキャッシュに入れる値の計算は時間がかかるので、キャッシングしています。
行の挿入や削除があったときは、ラインキャッシュも挿入や削除が必要です。
ここでは、挿入や削除するときパラメータがどうなるかを説明します。
キャッシュ
{ 0, 5, 10 }
{ 0, 5, 10, 15, 20 }
ABC
DEFGH
テキスト
ラインキャッシュ
関連ソース
済・
済・
済・
・
済・
済・
済・
・
Left(0,3), Right(0,4) を
選択して、コピー、
そのままペースト
テストケース
Left(0,1), Right(0,2) を
選択して、
済・
済・
済・
・
をペースト
済・
済・
済・
済・
済・
済・
・
貼り付けるとき、改行の調整を行います。
行頭から次の行の行頭まで選択しているとき、貼り付ける文字列の末尾に改行がなければ、
改行を入れます。
afdsfs
abc
fadsf
"123" を追加
fadsf
123
abc
カーソルが最後にあり、貼り付ける文字列の末尾に改行文字があったら、
改行文字を入れません。（1行分の空白を空けません）
abc
fadsf
"123\r\n" を追加
abc
fadsf123
テストケース
テスト手順
クリップボードからテキストを貼り付けたときの、改行の調整をテストします。
パス条件
貼り付けた後の改行が仕様どおりかチェックします
・
123
abc
abc
d
abc
d123
テキスト 123 （最後に改行文字なし）をクリップボードに入れます。
f
abc
de
・
下記のように 「de」 と改行文字を選択状態にします。
クリップボードから貼り付けたとき、下記のようになることを確認してください。
・
f
・
下記のテキストの、d の後ろにキャレットを移動します。
123+改行を、クリップボードにコピーします。
・
abc
d123
NG
OK
クリップボードから貼り付けたとき、左下のようになることを確認してください。
・
アプリケーションを終了します。
・
de
f
abc
アンドゥと、リドゥをして、元に戻ることを確認します。
・
・
アンドゥと、リドゥをして、元に戻ることを確認します。
[ 06.10.28 ]
[ 06.10.28 ]
[ 06.10.28 ]
[ 06.10.28 ]
[ 06.10.28 ]
123
→ テストフォルダ
a.bat を実行します。 （a.svg が開きます）
・
最初までアンドゥと、最後までリドゥをして、元に戻ることを確認します。
[ 06.10.28 ]
・
123
abc
123
f
abc
d123
abc
d
abc
de
f
アンドゥ
リドゥ
縦書きにすると、縦に並びます。 日本語文字はそのままですが、英数字は +90°回転します。
文字の並ぶ方向は、横書きの +90°の角度になります。
プロパティ・バーで、方向 = 縦書き にすると、縦書きになります。
左（上）詰めの
横書きと縦書き
中央揃えの
横書きと縦書き
右（下）詰めの
横書きと縦書き
横書きでは、文字の下より少し上がベースラインになります。
縦書きでは、文字の中央がベースラインになります。
Adobe SVG Viewer、Opera 9 は、縦書きに対応しています。
FireFox 1.5 では、縦書きテキストは表示されません。
回転操作、リサイズ、整列、移動（特に開始時）
ズーム&スクロールで
回転縦書きを拡大したときのハンドルの位置
見送り
Text_Box::SetFont
Text_Box::DrawText
/* DrawText に渡す座標を計算する（縦書き用に調整する） */
Text_Box::m_bTategaki
Text_Box::GetHitHandleNum2
/* マウス座標を、縦書き用に修正する */
補足
Text_Box::Draw
/* 回転の中心と枠の座標を、縦書き用に修正する */
270°回転したフォント
テキスト描画
枠の描画
縦書きか横書きかの変数
Text_Box::DrawHandles
/* 回転の中心とハンドルの座標を、縦書き用に修正する */
ハンドルの描画
クリック位置の判定、
カーソルの形の判定
Text_Box::GetBox は、設定値に関わらず、横書き、角度 0°のものが得られます。
そこから、縦書きにするには、上記のように
Win32 API (GDI) で、縦書き表示するときは、
CreatePointFont に指定するフォント名の先頭に、@ を追加し、
CreatePointFontIndirect に指定する、lfEscapement （角度）を +270°します。
ただし、同じXY座標値で描画すると、文字の左側がベースラインになります。
Adobe SVG Viewer に合わせるには、フォントの高さの半分だけ左、ベースラインの
高さだけ右へ移動させます。 ただし、フォントサイズによって、横縦とも若干ずれます。
その法則は解明されていません。 回転軸も、同様に移動させます。
GDI で +270°回転
しただけのまま
Adobe SVG Viewer に
合わせて移動したもの
fEscapement = 0
fEscapement = 270°
高さの1/2だけ左へ、ベースライン高だけ右へ
若干左下へ（法則は不明）
回転させてから移動させます。
回転
Text_Box::DrawText
DrawText に渡す座標を計算する（縦書き用に調整する）
ソース
Text_Box::DrawText
回転の中心(center)と、枠の座標(box)の修正量を計算する
と同様に、横書きの状況に戻してから行います。
つまり、ヒット判定する前に、マウスの座標を、
（逆移動させてから逆回転）をします。
逆移動
逆回転
の逆
Step1
Step2
Step3
判定
あいう123
マウスの位置を原点としたハンドルの座標 (*dx,*dy) （Text_Box::GetHitHandleNum の
出力の１つ）は、縦書きの状況のままで構いません。
回転
VML の図形（テキストの枠）の回転（rotation）の中心は、矩形の中心に固定されているため、
調整が必要です。
テキストの回転
テキストの枠の回転
<v:shape style="position:absolute;margin-left:162;margin-top:81;
width:57;height:10;rotation:30;"
o:spt="136" stroked="false" coordsize="21600,14688">
<v:fill color="blue"/>
<v:textpath style="font-family:'ＭＳ Ｐ明朝';" string="VML あいう2" />
</v:shape>
テキストの回転は、textpath を使います
o:spt="136" は、単純な四角形で、透明な四角形の中に文字列を描画します。
回転軸は、テキストとほぼ同じ左側です。
未対応
中央揃え、右詰
Text_Box::Draw
Text_Box::CalcLineGx
Text_Box::DrawText
描画全体、枠の描画
の計算
テキストの描画
Text_Box::SetBox
の値を計算する
描画