AWTK 最新动态：shape 控件的使用方法

shape 控件的使用方法

shape 控件用于绘制各种基本图形。相对SVG控件来说，其使用简单，而且可以在运行时动态改变。

基本规则

• x/w 参数取值在 [0,1] 时，实际值为控件的宽度乘以该参数。

比如 x=0.5，那么实际的值为 0.5 * widget->w

• y/h 参数取值在 [0,1] 时，实际值为控件的高度乘以该参数。

比如 y=0.5，那么实际的值为 0.5 * widget->h

• r 参数取值在 [0,1] 时，实际值为宽度和高度的最小值乘以该参数。

比如 r=0.5 w=40 h=60，那么实际的值为 20。

公共参数

• stroke 线条颜色，默认黑色。none 表示不画线条。
• fill 填充颜色，默认白色。none 表示不填充。
• lw 线条宽度 (line width)，默认 1。

1.hline

• 功能：画水平线
• 参数：

• x（可选，默认 0) 起点 x 坐标。
• y（可选，默认 0.5) 起点 y 坐标。
• w（可选，默认 1) 宽度。
• on（可选，画虚线时指定实线长度）
• off（可选，画虚线时指定虚线长度）

如：

<shape value="hline()" />
    <shape value="hline(stroke=red,lw=3)" />
    <shape value="hline(on=5,off=5)" />
    <shape value="hline(y=0.1)" />
    <shape value="hline(y=0.9)" />      

2.vline

• 功能：画垂直线
• 参数：

• x（可选，默认 0) 起点 x 坐标。
• y（可选，默认 0.5) 起点 y 坐标。
• h（可选，默认 1) 高度。
• on（可选，画虚线时指定实线长度）
• off（可选，画虚线时指定虚线长度）

如：

<shape value="vline()" />
    <shape value="vline(on=5,off=5)" />
    <shape value="vline(x=0.1)" />
    <shape value="vline(x=0.9)" />      

3.line

• 功能：画直线
• 参数：

• x1（可选，默认 0) 起点 x 坐标。
• y1（可选，默认 0) 起点 y 坐标。
• x2（可选，默认 1) 终点 x 坐标。
• y2（可选，默认 1) 终点 y 坐标。
• on（可选，画虚线时指定实线长度）
• off（可选，画虚线时指定虚线长度）

如：

<shape value="line()"/>
    <shape value="line(on=5,off=5)"/>
    <shape value="line(x1=0.2,y1=0.2,x2=0.8,y2=0.8)"/>      

4.rect

• 功能：画矩形
• 参数：

• x（可选，默认 0) 起点 x 坐标。
• y（可选，默认 0.5) 起点 y 坐标。
• w（可选，默认 1) 宽度。
• h（可选，默认 1) 高度。
• r（可选，默认 0）圆角半径。

如：

<shape value="rect()" />
    <shape value="rect(x=0.1,y=0.1,w=0.8,h=0.8,r=5)" />      

5.circle

• 功能：画圆
• 参数：

• x（可选，默认 0.5) 圆心 x 坐标。
• y（可选，默认 0.5) 圆心 y 坐标。
• r（可选，默认 0）半径。

如：

<shape value="circle()" />
    <shape value="circle(r=30,stroke=red,fill=none)" />      

6.ellipse

• 功能：画椭圆
• 参数：

• x（可选，默认 0.5) 圆心 x 坐标。
• y（可选，默认 0.5) 圆心 y 坐标。
• rx（可选，默认 0.5）水平半径。
• ry（可选，默认 0.5）垂直半径。

如：

<shape value="ellipse()" />
    <shape value="ellipse(rx=0.4,ry=0.4)" />      

7.text

• 功能：在指定的矩形中画文本
• 参数：

• x（可选，默认 0) 起点 x 坐标。
• y（可选，默认 0.5) 起点 y 坐标。
• w（可选，默认 1) 宽度。
• h（可选，默认 1) 高度。
• size （可选，默认 18)，字体大小。
• color（可选，默认黑色），文本颜色。
• text 文本内容

如：

text(text='hello world',size=20,color=red)      

8.path

• 功能：画复杂的路径。
• 参数：

• w 画布宽度。
• h 画布高度。
• data 路径数据（兼容 SVG 路径）。

格式参考 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

如：

<shape value="path(w=200,h=200,data='m88.27,126.32l20.55,-20.62l-39.73,0l-39.73,0l0,-12.76l0,-12.76l39.27,0c21.6,0 39.27,-0.65 39.27,-1.44c0,-0.79 -8.6,-10.07 -19.11,-20.62l-19.11,-19.18l17.66,0l17.66,0l26.97,27.03l26.97,27.03l-27.03,26.97l-27.03,26.97l-18.59,0l-18.59,0l20.55,-20.62z')" />
    <shape value="path(w=200,h=200,fill=gold,data='m23.46,139.08l101.38,0l0,-74.08l-15.54,0l31.08,-37.04l31.08,37.04l-15.54,0l0,111.12l-132.46,0z')" />
    <shape value="hline();vline()" />
    <shape value="hline(on=5,off=5,stroke=red)" />
    <shape value="circle(r=50,fill=orange);circle(r=30,fill=green)" />
    <shape value="path(w=200,h=200,fill=gold,data='m99.5,5.9l19.81,73.83l76.34,-3.98l-64.1,41.65l27.37,71.38l-59.42,-48.09l-59.42,48.09l27.37,-71.38l-64.1,-41.65l76.34,3.98l19.81,-73.83l19.81,73.83z')" />
    <shape value="path(w=200,h=200,fill=gold,data='m57.78,99.43l-33.14,-33.33l0,16.66l-13.29,0l0,-73.34l72.93,0l0,13.36l-16.57,0l33.14,33.33l33.14,-33.33l-16.57,0l0,-13.36l72.93,0l0,73.34l-13.29,0l0,-16.66l-33.14,33.33l33.14,33.33l0,-16.66l13.29,0l0,73.34l-72.93,0l0,-13.36l16.57,0l-33.14,-33.33l-33.14,33.33l16.57,0l0,13.36l-72.93,0l0,-73.34l13.29,0l0,16.66l33.14,-33.33z')" />
    <shape value="path(w=200,h=200,fill=gold,data='m58.58,27.36c3.94,-6.09 12.91,-7.17 19.7,-8c7.58,0.68 13.42,6.59 17.86,12.3c5.17,4.67 11.48,8.63 14.06,15.47c6.54,3.24 14.26,4.97 18.26,11.9c6.05,7.82 9.54,17.29 12.69,26.45c0.5,6.84 3.52,13.07 4.55,19.85c1.76,6.72 3.17,13.35 5.07,20.01c2.11,6.92 5.12,13.51 7.22,20.44c3.84,6.08 7.34,12.5 9.73,19.27c-5.71,-0.48 0.53,8.63 1.6,12.22c1.56,7.4 -6.99,3.16 -8.49,-0.25c-5.28,5 -16.1,6.12 -20.88,-0.44c-5.04,-6.64 -7.83,-15.08 -14.79,-19.89c-2.74,-2.28 -5.39,-12.22 -6.37,-3.44c3.48,8.74 -10.2,3.76 -15.06,5.33c-8.71,-1.75 3.31,-6.73 7,-6.14c3.48,-3.46 9.26,-9.25 0.96,-11.07c-5.69,-2.26 -12.98,-7.99 -16.17,0.54c-4.01,2.12 -11.21,12.2 -3.24,12.94c3.22,6.59 -9.29,1.82 -12.79,3.38c-3.29,1.04 -11.5,-0.78 -3.86,-2.45c6.58,-1.08 9.72,-9.16 13.85,-14.06c-0.14,-6.28 -5.16,-11.26 -8.93,-16.01c-4.01,-6.68 -9.6,-12.41 -12.39,-19.72c-1.83,-7.6 -5.31,-14.62 -7.07,-22.23c-1.99,-7.63 -4.28,-16.23 0.01,-23.54c1.95,-6.41 2.77,-12.4 -1.33,-17.68c-5.66,-4.6 -13.72,-2.76 -20.25,-5.81c-0.79,-4.93 9.67,-6.81 14.22,-7.91c1.73,-0.06 3.05,-1.5 4.84,-1.47z')" />
    <shape value="path(w=200,h=200,fill=gold,data='m55.01,132.22q45.8,31.08 91.49,0m-81.57,-61.39c0,-4.8 3.94,-8.7 8.8,-8.7c4.86,0 8.8,3.89 8.8,8.7c0,4.8 -3.94,8.7 -8.8,8.7c-4.86,0 -8.8,-3.89 -8.8,-8.7m54.14,0c0,-4.8 3.94,-8.7 8.8,-8.7c4.86,0 8.8,3.89 8.8,8.7c0,4.8 -3.94,8.7 -8.8,8.7c-4.86,0 -8.8,-3.89 -8.8,-8.7m-102.77,24.97l0,0c0,-46.12 37.83,-83.5 84.5,-83.5c46.67,0 84.5,37.38 84.5,83.5c0,46.12 -37.83,83.5 -84.5,83.5c-46.67,0 -84.5,-37.38 -84.5,-83.5zm0,0l0,0c0,-46.12 37.83,-83.5 84.5,-83.5c46.67,0 84.5,37.38 84.5,83.5c0,46.12 -37.83,83.5 -84.5,83.5c-46.67,0 -84.5,-37.38 -84.5,-83.5z')" />
    <shape value="path(w=200,h=200,fill=gold,data='m15.43,187.44l0,-97.87l0,0c0,-42.04 33.3,-76.12 74.38,-76.12l0,0l0,0c19.73,0 38.64,8.02 52.59,22.3c13.95,14.28 21.78,33.64 21.78,53.83l0,10.88l21.25,0l-42.5,43.5l-42.5,-43.5l21.25,0l0,-10.88c0,-18.02 -14.27,-32.62 -31.87,-32.62l0,0l0,0c-17.6,0 -31.88,14.61 -31.88,32.62l0,97.87z')" />      

复合图形

可以按顺序调用多个函数，函数之间用英文的分号；分隔。

如：

<shape value="rect();text(text='hello',size=20,color=red)" />
<shape value="circle(r=50,fill=orange);circle(r=30,fill=green)" />      

使用 svg editor 绘制路径

• 用浏览器打开​​SVG Editor​​
• 编辑 SVG，并生成路径数据。

• 下载 SVG 图片，并用文本编辑器打开，拷贝出 path 数据。