Flex基于FXG仪表盘（附全部源代码）一

               

    近来公司项目需要要做一个仪表盘，当仁不让，相关也只能用flex来完成。在完成这个仪表盘，我发现网络上仪表盘文章基本很少，所以我就把我仪表盘的demo公开，大家一起讨论一下。

 

   首先我们看看仪表盘的demo的完成图片：

 

   制作这个仪表盘首先要一个fxg的图片，我们先通过ai来保存一个fxg图片，大概源代码如下

<?xml version="1.0" encoding="utf-8" ?><Graphic version="1.0" viewHeight="841.89" viewWidth="595.28" ai:appVersion="14.0.0.367" d:id="1" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ai="http://ns.adobe.com/ai/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt">  <Library/>  <Group id="group" x="275.02" y="72.667" d:id="2" d:type="layer" d:userLabel="图层 1">    <Path id="one" winding="nonZero" ai:knockout="0" data="M176.228 116.897C176.228 74.1919 141.664 39.6997 98.9805 39.6997 56.2969 39.6997 21.7334 74.1919 21.7334 116.897 21.7334 159.602 56.2969 194.094 98.9805 194.094 141.664 194.094 176.228 159.602 176.228 116.897Z" >      <fill>        <SolidColor color="#020403"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M53.9336 54.106C54.0742 54.3643 71.043 39.958 98.5313 39.6768L98.5313 17.9619C98.5313 17.9619 68.543 16.562 41.2285 36.5151 42.6973 39.0151 53.793 53.8477 53.9336 54.106Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M98.5313 39.6768" >      <fill>        <SolidColor color="#67bd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M99.5117 39.6768L99.4648 17.9619C99.4648 17.9619 129.309 16.5361 156.83 36.5742L143.963 54.106C143.963 54.106 126.074 39.708 99.5117 39.6768Z" >      <fill>        <SolidColor color="#67bd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M120.293 48.208" >      <fill>        <SolidColor color="#67bd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M112.324 45.1143" >      <fill>        <SolidColor color="#67bd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M144.78 54.6987L157.64 37.1631C157.64 37.1631 182.649 53.9644 193.027 85.8799 193.071 86.0112 172.325 92.5723 172.325 92.5723 172.325 92.5723 166.022 69.958 144.78 54.6987Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M172.63 93.5127L193.326 86.8018C193.326 86.8018 203.647 112.667 193.326 146.99L172.63 140.282C172.63 140.282 180.793 117.958 172.63 93.5127Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M172.32 141.238L193.014 147.955C193.014 147.955 185.918 175.771 157.71 196.578L144.834 179.055C144.834 179.055 164.168 166.396 172.32 141.238Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M144.013 179.653L156.808 197.236C156.808 197.236 133.648 215.792 99.4814 215.832L99.4814 194.093C99.4814 194.093 122.689 195.125 144.013 179.653Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M53.9482 179.653C53.9482 179.653 72.3555 194.167 98.4385 194.092L98.4414 215.832C98.4414 215.832 69.1885 217.458 41.1436 197.229L53.9482 179.653Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M53.1299 179.058L40.334 196.64C40.334 196.64 15.543 180.458 4.92041 147.873 4.92041 147.873 25.5078 141.241 25.6504 141.266 25.793 141.292 30.8555 161.708 53.1299 179.058Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M25.3203 140.248L4.62012 146.946C4.62012 146.946 -5.70703 120.271 4.61084 86.8774L25.3203 93.5469C25.3203 93.5469 17.2305 113.583 25.3203 140.248Z" >      <fill>        <SolidColor color="#67bd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M25.293 140.243L4.59277 146.94C4.59277 146.94 -5.73438 120.265 4.5835 86.8721 4.5835 86.8721 25.126 93.5 25.293 93.5415 25.3975 94.604 17.2031 113.578 25.293 140.243Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M25.6543 92.5161L4.91504 85.9365C4.91504 85.9365 12.6055 57.3955 40.293 37.1841L53.1172 54.7456C53.1172 54.7456 34.043 67.333 25.6543 92.5161Z" >      <fill>        <SolidColor color="#6abd45"/>      </fill>    </Path>    <Path winding="nonZero" ai:knockout="0" data="M259.313 0" >      <fill>        <SolidColor color="#67bd45"/>      </fill>    </Path>  </Group>  <Private>    <ai:PrivateElement d:ref="#1">      <ai:SaveOptions>        <ai:Dictionary>          <ai:DictEntry name="preserveGradientPolicy" value="3" valueType="Integer"/>          <ai:DictEntry name="clipToActiveArtboard" value="1" valueType="Boolean"/>          <ai:DictEntry name="rasterizeResolution" value="72" valueType="Integer"/>          <ai:DictEntry name="downsampleLinkedImages" value="0" valueType="Boolean"/>          <ai:DictEntry name="preserveFilterPolicy" value="3" valueType="Integer"/>          <ai:DictEntry name="preserveTextPolicy" value="3" valueType="Integer"/>          <ai:DictEntry name="includeXMP" value="0" valueType="Boolean"/>          <ai:DictEntry name="includeSymbol" value="0" valueType="Boolean"/>          <ai:DictEntry name="writeImages" value="1" valueType="Boolean"/>          <ai:DictEntry name="versionKey" value="1" valueType="Integer"/>          <ai:DictEntry name="aiEditCap" value="1" valueType="Boolean"/>        </ai:Dictionary>      </ai:SaveOptions>      <ai:DocData base="10边.assets/images"/>      <ai:Artboards originOffsetH="0" originOffsetV="841.89" rulerCanvasDiffH="298.5" rulerCanvasDiffV="-420.39" zoom="3">        <ai:Artboard active="1" index="0" right="595.28" top="841.89"/>        <ai:ArtboardsParam all="0" range="" type="0"/>      </ai:Artboards>    </ai:PrivateElement>    <ai:PrivateElement d:ref="#2">      <ai:LayerOptions colorType="ThreeColor">        <ai:ThreeColor blue="257" green="128.502" red="79.31"/>      </ai:LayerOptions>    </ai:PrivateElement>  </Private></Graphic>