属性编辑器 - 字体设置

QQ 282397369

字体属性

看教程，初步感觉，网页字体要比VCL的字体来得简单，居然没有粗体、斜体。
只有绘制、填充，可设置字体名称、大小，以及对齐、基线与方向。
我一定是看了个假教程。
那也先按这个教程来实现一下。以后发现可以设置粗体、斜体的时候，再回过头补充实现一下。

填充

又是填充，那肯定是与画笔、画刷共用了，以后只需要把填充这个界面整得漂亮点，整体就上了档次。
至于方向属性，暂不考虑。

在之前的基础上，设计一下界面，加几行代码，搞定。

		if(UniRadioButton_FontFill->Checked) {
			if(fillIndex > 1)
				jsCode += L"ctx.fillStyle = gradient;";
			else
				jsCode += THelper::FormatString(L"ctx.fillStyle = '#%02X%02X%02X';", GetRValue(color), GetGValue(color), GetBValue(color));
		} else {
			if(fillIndex > 1)
				jsCode += L"ctx.strokeStyle = gradient;";
			else
				jsCode += THelper::FormatString(L"ctx.strokeStyle = '#%02X%02X%02X';", GetRValue(color), GetGValue(color), GetBValue(color));
		}
		if(UniComboBox_FontName->ItemIndex >= 0)
			jsCode += THelper::FormatString(L"ctx.font = \"%dpx %s\";", UniSpinEdit_FontSize->Value, UniComboBox_FontName->Text);
		jsCode += THelper::FormatString(L"ctx.textAlign = \"%s\";", UniComboBox_FontAlign->Text);
		jsCode += THelper::FormatString(L"ctx.textBaseline = \"%s\";", UniComboBox_FontBaseline->Text);

		UnicodeString text = L"Hello World!";
		if(!UniRadioButton_FontFill->Checked)
			jsCode += THelper::FormatString(L"ctx.strokeText(\"%s\", 40, 120);", text);
		else
			jsCode += THelper::FormatString(L"ctx.fillText(\"%s\", 40, 120);", text);

单独针对轮廓与填充进行处理。

一点小问题

可以通过uniGUI获取字体名称列表，但分不清这是客户端机子的字体，还是服务端的字体。

如果是客户端的字体，那各客户端可能会有不同的字体，这在界面表现上会有问题。如果是服务端的字体就好办了，大家都一样。
待查。

真正的挑战还没开始，先用这几个基本的GDI对象练下手。我感觉要在Canvas上拖动图形对象，颇费思量。

补记

下午得闲，再多看了下别的教程，才发现自己孟浪了。字体确实是支持粗体、斜体的。
用关键词 html5 canvas font bold一搜，发现结果很多。挑个权威一点的W3 School，说得很清楚。

那就补上。
补的时候，有点汗颜。那就做得稍微专心一点，除去不常用的caption、icon、menu、message-box、status-bar，把基线、对齐效果也直观参照显示出来，即画出目标点为原点的XY轴，这样就知道各个参数调整后，与目标输出坐标点的位置关系。
实现后，发现，哦，原来如此。这下算是把font搞明白80%了。


比较有收获。