wpf 使用Path绘制一个简单的温度计

  什么都不说,先look look 效果

  

  

  研究这个主要的原因是一个好友给我出了一道题,就是做一个这样的温度计(当然实际的温度计下面应该是不会有变化的),当时只会一些简单的圆啊,线的绘制,不知道曲线是怎么画出来的,所以一开始只做一个上面温度计里面的进度条(方法就是下面一个圆,中间一条粗线,上面也是一个小圆,xml代码当然顺序要正确,中间的粗线要覆盖住底部大圆上面的一部分,并覆盖住小圆下面的一部分,即粗线最后绘制),而且当时做出来表示进度变化的是中间的那一条粗线,本着磕到底的精神,我在网上搜了一下,发现确实有一个path的类,可以实现这样的效果,

于是就写了一个绘制方法:

    private Path DrawThermometer(int BottomCircleX,int BottomCircleY,int BottomRadius,int LineLength,Color StrokeColor,bool isDrawKedu)        {            Path p = new Path();            //设置path的线条颜色            p.Stroke = new SolidColorBrush(StrokeColor);            //设置path的线条粗线            p.StrokeThickness = 3;            //path用来绘制几何形状的类            PathGeometry geometry = new PathGeometry();            //因为不止有一条线段            PathFigureCollection pfc = new PathFigureCollection();            //path用来绘制线段的类            PathFigure pf = new PathFigure();            //这是温度计下面的大圆弧的左边点的X坐标                             float LeftPointX = BottomCircleX - (BottomRadius / 5 * 2);            //这是温度计下面的大圆弧的左边点的Y坐标                  float LeftPointY = BottomCircleY - (BottomRadius / 5 * 3);            //这是温度计下面的大圆弧的右边点的X坐标                           float RightPointX = BottomCircleX + (BottomRadius / 5 * 2);            //跟左边一样的                   float RightPointY = LeftPointY;            //上面小圆的半径            float TopSmallRoundRadius = BottomRadius / 5 * 2;            //起始点            pf.StartPoint = new Point(LeftPointX, LeftPointY);            //最后闭合            pf.IsClosed = true;            //最下面的圆弧            ArcSegment arc1 = new ArcSegment();            arc1.Size = new Size(BottomRadius, BottomRadius);            arc1.IsLargeArc = true;            arc1.Point = new Point(RightPointX, RightPointY);            //连接线到上面的小圆            LineSegment l1 = new LineSegment();            l1.Point = new Point(RightPointX, RightPointY - LineLength);            //最上面的圆弧            ArcSegment arc2 = new ArcSegment();            arc2.Size = new Size(TopSmallRoundRadius, TopSmallRoundRadius);            arc2.Point=new Point(LeftPointX, LeftPointY - LineLength);            //连接线到下面的小圆            LineSegment l2 = new LineSegment();            l2.Point = new Point(LeftPointX, LeftPointY);            pf.Segments = new PathSegmentCollection() { arc1,l1, arc2,l2 };            pfc.Add(pf);            //绘制刻度            if (isDrawKedu)            {                float startPointX = LeftPointX;                float startPointY = LeftPointY - 10;                float endPointX = LeftPointX;                float endPointY = LeftPointY - LineLength + 10;                float eachLength = (startPointY - endPointY) / 10;                //绘制12条                for (int i = 0; i < 12; i++)                {                    PathFigure pf2 = new PathFigure();                    pf2.StartPoint = new Point(startPointX, startPointY - i * eachLength);                    LineSegment l = new LineSegment();                    if (i%3==0)                    {                        l.Point = new Point(startPointX + 10, startPointY - i * eachLength);                    }                    else                    {                        l.Point = new Point(startPointX + 5, startPointY - i * eachLength);                    }                    pf2.Segments = new PathSegmentCollection() { l };                    pfc.Add(pf2);                }            }            //设置图形            geometry.Figures = pfc;            //设置数据            p.Data = geometry;            wendu_canvas.Children.Add(p);            return p;        }

如下调用即可绘制出一个温度计:

  tempPath = DrawThermometer(BottomCircleX, BottomCircleY, 43, 145, Colors.White,false);  Path p1=DrawThermometer(BottomCircleX, BottomCircleY,50,150,Colors.Black,true);

那么如何给他设置进度呢:

private void setTempPercent(float v, Path tempPath)        {            LinearGradientBrush brush = new LinearGradientBrush();            brush.StartPoint = new Point(1, 1);//1,1是path右下角            brush.EndPoint = new Point(1, 0);//1,0是path右上角  从下而上            GradientStop stop1 = new GradientStop();            stop1.Color = Colors.Violet;            stop1.Offset = v;            GradientStop stop2 = new GradientStop();            stop2.Color = Colors.Yellow;            stop2.Offset = v;            //offset的作用:            //假设上面的offset是0.3,这里的offset是1,就是0.3到1 从紫色渐变到黄色 即0.3是紫色,1是黄色 0.3-1之间是这两种颜色渐变的过程            brush.GradientStops = new GradientStopCollection() { stop1,stop2 };            tempPath.Fill = brush;            lb_percent.Content = v * 100 + "℃";        }

本来前台也是可以写的,但是我中间也要一个进度条,要两个,所以我就在后台写了方法

下面就研究一下android的如何写,就这么多咯~~~