文本图元和背景图元
在集算器绘制的各类图形中，文字的使用都很常见。除了调整各个图元中的各类文本属性，在集算器中还可以使用文本图元，在所需的位置绘制文本。
文本图元及其数据属性
文本图元的功能比较简单，就是在指定的位置绘制指定的文字，绘制文本图元时，使用物理轴定义位置，不使用任何逻辑轴。
我们先来看看下面的画法中，文本图元的使用：
|
|
A |
|
1 |
=canvas() |
|
2 |
=demo.query("select * from FRUITS") |
|
3 |
=A1.plot("BackGround") |
|
4 |
=A1.plot("EnumAxis","name":"x","xStart":0.2,"xEnd":0.9,"xPosition":0.7) |
|
5 |
=A1.plot("NumericAxis","name":"y","location":2,"yStart":0.7,"yPosition":0.2) |
|
6 |
=A1.plot("Column","axis1":"x","data1":A2.(NAME),"axis2":"y","data2": A2.(UNITPRICE)) |
|
7 |
=A1.plot("Text","text":"Fruits","textFont":"Arial","textStyle":3,"textSize":16,"textColor":-16750900,"data1":0.5,"data2":-30) |
|
8 |
=A1.plot("Text","text":"Column chart","textFont":"Arial","textSize":14,"textColor": -16711732,"data1":0.5,"data2":-14) |
|
9 |
=A1.draw@p(300,200) |
这是一个柱形图的画法，除了背景、坐标轴和柱图元之外，在A7和A8中用文本图元添加了文字，相关属性如下：
文本图元的数据直接定义在Text属性中，并用坐标参数的X和Y设定文本图元的物理轴位置。在这里，设定X时使用的是用比例设定的物理坐标，设定Y时则使用了像素值。坐标是使用物理坐标还是像素值，是由数据范围决定的。
文本图元的外观属性就是字体、字型、字号和字色，与其它图元中的文字属性没有区别。在这里，A7中文本为蓝色3号字，字型为斜体加粗。A8中只改变了文本的字色。
先来查看绘图结果：
可以看到图中在指定位置绘制了标题文字。
通过改变文本图元中的Rotation angle属性，可以使得文字旋转。如修改A7中文本图元的绘图参数如下：
此时，绘制的文字Fruits会以设定的坐标点为中心，顺时针旋转。
文本图元的位置
文本图元位置用物理坐标，类似于坐标系与转换 中逻辑轴的定位，当坐标值小于或等于1且大于或等于0时，按比例坐标处理；当坐标值大于1或小于0时，按像素坐标处理。
为了更清楚地了解文本图元绘制的位置，我们先来用下面的画法绘制一个网格区域：
|
|
A |
|
1 |
=canvas() |
|
2 |
=A1.plot("BackGround") |
|
3 |
=A1.plot("NumericAxis","name":"x","autoCalcValueRange":false,"scaleNum":10, "xStart":0,"xEnd":1,"xPosition":1,"regionTransparent":0.5) |
|
4 |
=A1.plot("NumericAxis","name":"y","location":2,"autoCalcValueRange":false, "scaleNum":10,"yStart":1,"yEnd":0,"yPosition":0,"regionTransparent":0.5) |
|
5 |
=A1.plot("Dot","axis1":"x","data1":5,"axis2":"y","data2":5) |
|
6 |
=A1.draw@p(300,200) |
画法中，A2绘制背景，A3和A4绘制坐标轴，坐标轴位于最左侧和最底端，布满绘图区域。坐标轴的Autocalc value range属性均设定为false，使用默认的值域 [0,10]，并将Region transparency设为0.5，可以产生间隔区交叠的效果。在A5中在中心绘制1个点以便于查看位置。
A6中绘制的结果如下：
在图中，横向与纵向均等分为10个刻度，由于图片的整体尺寸是300*200，因此横向一个刻度为30像素，而纵向为20像素。
现在，在这个网格区域中，在不同位置绘制4个文本图元：
|
|
A |
|
1 |
=canvas() |
|
2 |
=A1.plot("BackGround") |
|
3 |
=A1.plot("NumericAxis","name":"x","autoCalcValueRange":false,"scaleNum":10, "xStart":0,"xEnd":1,"xPosition":1,"regionTransparent":0.5) |
|
4 |
=A1.plot("NumericAxis","name":"y","location":2,"autoCalcValueRange":false, "scaleNum":10,"yStart":1,"yEnd":0,"yPosition":0,"regionTransparent":0.5) |
|
5 |
=A1.plot("Dot","axis1":"x","data1":5,"axis2":"y","data2":5) |
|
6 |
=A1.plot("Text","text":"T1","textStyle":1,"textColor":-65536,"data1":0.4,"data2":0.4) |
|
7 |
=A1.plot("Text","text":"T2","textStyle":1,"textColor":-65281,"data1":0.4,"data2":0.8) |
|
8 |
=A1.plot("Text","text":"T3","textStyle":1,"textColor":-16776961,"data1":60,"data2":60) |
|
9 |
=A1.plot("Text","text":"T4","textStyle":1,"data1":-60,"data2":-60) |
|
10 |
=A1.draw@p(300,200) |
4个文本图元在不同的位置绘制，并设定了不同的坐标和不同的字色，且全部使用粗体，而未修改对齐属性：
在这里并未修改文字图元的对齐属性，此时设置的坐标点位于文字中心，绘图结果如下：
从图中，可以看到每个文本是如何根据逻辑轴定位的。
除了使用逻辑轴，文本图元也可以类似普通图元，指定数据的坐标轴，根据坐标轴上的坐标值来定位，如修改本章最初的图形绘制例子，在图中添加文本图元：
|
|
A |
|
1 |
=canvas() |
|
2 |
=demo.query("select * from GYMSCORE where EVENT = 'Vault'") |
|
3 |
=A1.plot("NumericAxis","name":"y","location":2,"labelFont":"Calibri", "labelOverlapping":true) |
|
4 |
=A1.plot("EnumAxis","name":"x","categories":A2.(NAME), "labelFont":"Arial") |
|
5 |
=A1.plot("Column","axis1":"x","data1":A2.(NAME),"axis2":"y", "data2":A2.(SCORE),"text":A2.(SCORE)) |
|
6 |
=A1.plot("Text","text":A2.(NAME),"textColor":-16776961,"axis1":"x","data1":A2.(NAME),"axis2":"y","data2":A2.(SCORE+1)) |
|
7 |
=A1.draw@p(450,350) |
A6中在每个柱图的顶部绘制了文本图元，图元属性如下：
文本图元的文字是每位运动员的名字，设置为蓝色，绘图位置的坐标轴与坐标设定和柱图元类似，但y坐标调大了一些使得文字位于柱图的顶端。A7中绘图结果如下：
可以看到，设置了坐标轴之后，文本图元的位置也可以根据坐标轴上的坐标值来确定。
文本图元的对齐属性
除了定义了坐标点之外，还可以通过设置对齐属性，调整坐标点与文字的对齐关系。如下面的画法：
|
|
A |
|
1 |
=canvas() |
|
2 |
=A1.plot("BackGround") |
|
3 |
=A1.plot("NumericAxis","name":"x","autoCalcValueRange":false,"scaleNum":10, "xStart":0,"xEnd":1,"xPosition":1,"regionTransparent":0.5) |
|
4 |
=A1.plot("NumericAxis","name":"y","location":2,"autoCalcValueRange":false, "scaleNum":10,"yStart":1,"yEnd":0,"yPosition":0,"regionTransparent":0.5) |
|
5 |
=A1.plot("Dot","axis1":"x","data1":5,"axis2":"y","data2":5) |
|
6 |
=A1.plot("Text","text":"T1","textStyle":1,"textSize":22,"textColor":-65536,"hAlign":0,"data1":0.5,"data2":0.5) |
|
7 |
=A1.plot("Text","text":"T2","textStyle":1,"textSize":22,"textColor":-65281,"hAlign":4,"vAlign":8,"data1":0.5,"data2":0.5) |
|
8 |
=A1.plot("Text","text":"T3","textStyle":1,"textSize":22,"textColor":-16776961,"hAlign":4,"vAlign":32,"data1":0.5,"data2":0.5) |
|
9 |
=A1.plot("Text","text":"T4","textStyle":1,"textSize":22,"vAlign":8,"data1":0.5,"data2":0.5)v |
|
10 |
=A1.draw@p(300,200) |
在这里，仍然是绘制4个文本T1,T2,T3和T4，它们的位置坐标均设为0.5，即设定的坐标点为画布中心，在这里绘制了一个参考点。同时，为了看得更为清晰，我们加大了文本的字号并使用粗体。除了使用不同的颜色，这些文本图元设定了不同的对其属性：
此时绘制结果如下：
从绘制结果中，可以看到对其属性是如何起作用的。4个文本图元定义的坐标点同为画布中心，但是，坐标点位于T1左侧居中的位置，位于T2右侧靠上的位置，位于T3右侧靠下的位置，位于T4中间靠上的位置，这与它们的对齐属性设置是相同的。
条形码
在文本图元中，可以使用条形码来展示文本，如：
|
|
A |
|
1 |
=canvas() |
|
2 |
=A1.plot("Text","text":"12345678","barType":3,"dispText":true) |
|
3 |
=A1.draw@p(200,200) |
在这里，在文本图元属性的最底端设置了使用条形码：
条形码将根据所选类型和编码来展示，结果如下：
根据选择的条形码类型，也可以展示二维码，如：
|
|
A |
|
1 |
=canvas() |
|
2 |
=A1.plot("Text","text":"http://www.raqsoft.com","barType":256,"dispText":true) |
|
3 |
=A1.draw@p(200,200) |
条形码绘制参数如下：
A3中绘制的二维码如下：
背景图元
在前面的例子中，已经使用了简单的背景图元，除了简单填充颜色，还可以在背景图中使用图片，如：
|
|
A |
|
1 |
=canvas() |
|
2 |
=A1.plot("BackGround","imageValue":"D:\\soft\\raqsoft2022\\esProc\\logo\\logo.png") |
|
3 |
=A1.draw@p(200,200) |
在这里，在背景图元中使用了图片：
绘制结果如下：
图片的填充模式可以在Fill mode属性中调整，可以选择“左上角显示”“拉伸”和“平铺”三种模式。