属性编辑器 - 字体设置


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%了。
在这里插入图片描述
在这里插入图片描述
比较有收获。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值