Flex实现自定义图形按钮+按钮区域响应

<s:Button label="myButton" x="6" y="14" skinClass="MyButtonSkin"/>

步骤一：为Button组件设置自定义皮肤类：MyButtonSkin.mxml

步骤二：删除编译器自动生成的部分代码，只保留状态states，和id为labelDisplay的label部分（用于显示按钮上的文本信息）。

步骤三：根据需求绘制不同的形状，我这里使用Path来实现，其他方式如椭圆Elipse或者矩形等道理类似。边框，内部填充可以自选。

<s:Path data="M 195.307 95.719 C 195.307 103.702 206.101 113.422 204.132 120.785 C 202.096 128.404 204.87 141.279 201.011 147.949 C 197.097 154.715 171.372 145.538 165.881 151.029 C 160.39 156.52 158.618 163.32 151.852 167.234 C 145.182 171.093 146.125 197.982 138.507 200.019 C 131.145 201.986 118.555 196.832 110.571 196.832 C 102.588 196.832 88.935 205.962 81.572 203.993 C 73.954 201.957 63.453 192.709 56.783 188.851 C 50.017 184.936 47.379 169.893 41.888 164.401 C 36.397 158.911 56.453 135.965 52.538 129.199 C 48.679 122.529 40.694 122.617 38.658 114.999 C 36.69 107.636 0 103.702 0 95.719 C 0 87.736 10.102 76.695 12.07 69.332 C 14.106 61.714 27.476 56.64 31.334 49.97 C 35.249 43.204 53.419 49.549 58.91 44.058 C 64.401 38.567 53.156 11.925 59.923 8.01 C 66.593 4.151 77.68 3.416 85.298 1.38 C 92.661 -0.588 102.588 0.133 110.571 0.133 C 118.555 0.133 123.642 17.522 131.005 19.489 C 138.624 21.526 143.709 22.891 150.379 26.751 C 157.145 30.665 166.349 28.961 171.839 34.452 C 177.331 39.943 169.701 52.574 173.615 59.34 C 177.475 66.01 187.039 67.06 189.075 74.678 C 191.044 82.041 195.307 87.736 195.307 95.719 Z"
winding="nonZero" x="18.929" y="67.781"
width="127.40123" height="114.30193">
<s:stroke>
<s:SolidColorStroke caps="none" color="#5380D0" joints="miter" miterLimit="4" weight="1"/>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="0">
<s:entries>
<s:GradientEntry ratio="0.0" color="yellow" color.over="blue" color.down="green"/>
<s:GradientEntry ratio="0.5" color="red" color.over="white" color.down="blue"/>
<s:GradientEntry ratio="1.0" color="blue" color.over="black" color.down="red"/>
</s:entries>
</s:LinearGradient>
</s:fill>

</s:Path>

步骤四：设置按钮名称的Label目标格式

<s:Label id="labelDisplay"
textAlign="center"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
left="10" right="10" top="2" bottom="2"
rotation="90">
</s:Label>

步骤五：使用mask绘制和上面区域一样的区域，实现遮挡效果。这样只有当鼠标移动到所绘制区域内，对应的事件才会响应

<s:mask>
<s:Group width="100%" height="100%">
<s:Path data="M 195.307 95.719 C 195.307 103.702 206.101 113.422 204.132 120.785 C 202.096 128.404 204.87 141.279 201.011 147.949 C 197.097 154.715 171.372 145.538 165.881 151.029 C 160.39 156.52 158.618 163.32 151.852 167.234 C 145.182 171.093 146.125 197.982 138.507 200.019 C 131.145 201.986 118.555 196.832 110.571 196.832 C 102.588 196.832 88.935 205.962 81.572 203.993 C 73.954 201.957 63.453 192.709 56.783 188.851 C 50.017 184.936 47.379 169.893 41.888 164.401 C 36.397 158.911 56.453 135.965 52.538 129.199 C 48.679 122.529 40.694 122.617 38.658 114.999 C 36.69 107.636 0 103.702 0 95.719 C 0 87.736 10.102 76.695 12.07 69.332 C 14.106 61.714 27.476 56.64 31.334 49.97 C 35.249 43.204 53.419 49.549 58.91 44.058 C 64.401 38.567 53.156 11.925 59.923 8.01 C 66.593 4.151 77.68 3.416 85.298 1.38 C 92.661 -0.588 102.588 0.133 110.571 0.133 C 118.555 0.133 123.642 17.522 131.005 19.489 C 138.624 21.526 143.709 22.891 150.379 26.751 C 157.145 30.665 166.349 28.961 171.839 34.452 C 177.331 39.943 169.701 52.574 173.615 59.34 C 177.475 66.01 187.039 67.06 189.075 74.678 C 191.044 82.041 195.307 87.736 195.307 95.719 Z"
winding="nonZero" x="18.929" y="67.781"
width="127.40123" height="114.30193">
<s:fill>
<s:SolidColor/>
</s:fill>
</s:Path>

</s:Group>

</s:mask>