文本图元

阅读(159) 标签: 文本图元,

在集算器绘制的各类图形中,文字的使用都很常见。除了调整各个图元中的各类文本属性,在集算器中还可以使用文本图元,在所需的位置绘制文本。

文本图元及其数据属性

文本图元的功能比较简单,就是在指定的位置绘制指定的文字,绘制文本图元时,使用物理轴定义位置,不使用任何逻辑轴。

我们先来看看下面的画法中,文本图元的使用:

 

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","x":0.5,"y":-30,"textFont":"Arial","textStyle":3, "textSize":16,"textColor":-16750900)

8

=A1.plot("Text","text":"Column chart","x":0.5,"y":-14,"textFont":"Arial", "textColor":-16711732)

9

=A1.draw@p(300,200)

这是一个柱形图的画法,除了背景、坐标轴和柱图元之外,在A7A8中用文本图元添加了文字,相关属性如下:

 

文本图元的数据直接定义在Text属性中,并用坐标参数的XY设定文本图元的物理轴位置。在这里,设定X时使用的是用比例设定的物理坐标,设定Y时则使用了像素值。坐标是使用物理坐标还是像素值,是由数据范围决定的。

文本图元的外观属性就是字体、字型、字号和字色,与其它图元中的文字属性没有区别。在这里,A7中文本为蓝色3号字,字型为斜体加粗。A8中只改变了文本的字色。

先来查看绘图结果:

可以看到图中在指定位置绘制了标题文字。

 

通过改变文本图元中的Rotation angle属性,可以使得文字旋转。如修改A7中文本图元的绘图参数如下:

此时,绘制的文字Fruits会以设定的坐标点为中心,顺时针旋转。

文本图元的位置

文本图元位置用物理坐标,类似于12.2坐标系与转换 中逻辑轴的定位,当坐标值小于或等于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绘制背景,A3A4绘制坐标轴,坐标轴位于最左侧和最底端,布满绘图区域。坐标轴的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","x":0.4,"y":0.4,"textStyle":1,"textColor":-65536)

7

=A1.plot("Text","text":"T2","x":0.4,"y":0.8,"textStyle":1,"textColor":-65281)

8

=A1.plot("Text","text":"T3","x":60,"y":60,"textStyle":1,"textColor":-16776961)

9

=A1.plot("Text","text":"T4","x":-60,"y":-60,"textStyle":1)

10

=A1.draw@p(300,200)

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","x":0.5,"y":0.5,"textStyle":1,"textSize":22, "textColor":-65536,"hAlign":0)

7

=A1.plot("Text","text":"T2","x":0.5,"y":0.5,"textStyle":1,"textSize":22, "textColor":-65281,"hAlign":4,"vAlign":8)

8

=A1.plot("Text","text":"T3","x":0.5,"y":0.5,"textStyle":1,"textSize":22, "textColor":-16776961,"hAlign":4,"vAlign":32)

9

=A1.plot("Text","text":"T4","x":0.5,"y":0.5,"textStyle":1,"textSize":22,"vAlign":8)

10

=A1.draw@p(300,200)

在这里,仍然是绘制4个文本T1,T2,T3T4,它们的位置坐标均设为0.5,即设定的坐标点为画布中心,在这里绘制了一个参考点。同时,为了看得更为清晰,我们加大了文本的字号并使用粗体。除了使用不同的颜色,这些文本图元设定了不同的对其属性:

   

此时绘制结果如下:

从绘制结果中,可以看到对其属性是如何起作用的。4个文本图元定义的坐标点同为画布中心,但是,坐标点位于T1左侧居中的位置,位于T2右侧靠上的位置,位于T3右侧靠下的位置,位于T4中间靠上的位置,这与它们的对齐属性设置是相同的。