WPF 使用渐变色在绘图中灵活应用

更新于2020年11月3日

如果将图像的大小限制于普通1080P屏幕下，并配合调度器终端更新。可以实现2*2像素大小的方块。也就是【1010*1920】的大小，960*505=484,800可控制像素块

其中绘图方式使用task等待,不过没有什么太大的改变。

即便是每10毫秒更新一竖条也不会卡。

 

代码上没有太多改变

  public override  Task<bool> Draw2()
        {
            TaskCompletionSource<bool> tcp = new TaskCompletionSource<bool>();
            GeometryGroup gp = null;

            using (var dc = RenderOpen())
            {
                gp = new GeometryGroup();
                gp.Children.Add(new RectangleGeometry(new Rect(LocationX, LocationY, DrawWidth, DrawHeight)));

                for (double x = LocationX; x < LocationX + DrawWidth; x += RectWidth)
                {
                    gp.Children.Add(
                    new LineGeometry(new Point(x, LocationY), new Point(x, LocationY + DrawHeight)));
                }
                for (double y = LocationY; y < LocationY + DrawHeight; y += RectHeight)
                { 
                    gp.Children.Add(
                      new LineGeometry(new Point(LocationX, y), new Point(LocationX + DrawWidth, y)));
                }
                gp.Freeze();
                var pen = DrawSetting.Instance.DrawPen;
                pen.Freeze();
                SetLinerColor();
                dc.DrawDrawing(new GeometryDrawing(lgb, pen, gp));
                tcp.SetResult(true);
             
            }
          
            return tcp.Task;
        }
        public LinearGradientBrush lgb = new LinearGradientBrush() { StartPoint = new Point(0.5, 0), EndPoint = new Point(0.5, 1) };
     
        public void SetLinerColor()
        {
            lgb.GradientStops.Clear();  
            for (double y = 0; y < 1.0;)
            {
                var color = DrawSetting.Instance.GetColorBrush();
                lgb.GradientStops.Add(new GradientStop(color, y));
                lgb.GradientStops.Add(new GradientStop(color, y += (RectHeight / DrawHeight)));
            }
          
        }
        public void SetLinerColor(int index,Color color)
        {
            lgb.GradientStops[index].Color = color;
            lgb.GradientStops[index%2==0?index+1:index-1].Color = color;
        }

 

更新鼠标坐标的位置为黑色

  int size = 2;
        private async  void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            List<DrawRectVisual> ld = new List<DrawRectVisual>();
            List<Task> lt = new List<Task>();
            for (int x = 0; x < 1920; x+= size)
            {
                for (int y = 0; y < this.ActualHeight; y += (int)ActualHeight)
                {
                    var item = new DrawRectVisual(x, y, size, 1010, size, size);
                    await item.Draw2();
                    await draw.Dispatcher.BeginInvoke(new Action(() => draw.AddVisual(item)),DispatcherPriority.Background);      
                }
            }
            this.MouseMove += MainWindow_MouseMove;
        }
        private void MainWindow_MouseMove(object sender, MouseEventArgs e)
        {
            var point = e.GetPosition(draw);
            int x = (int)point.X / size;
            int y = ((int)point.Y/ size) *2;
            (draw.Visuals[x] as DrawRectVisual).SetLinerColor(y, Colors.Black);
            Console.WriteLine($"鼠标:{point} 转换后{x}:{y}");
        }

 

 

**************************************

文本衔接使用DrawingVisual绘图

效果图

渐变色可以将多个颜色组合在一块，形成渐变色。

不过当颜色组合非常有规律时，就不是渐变色的变现形式了。

例如【0 0.25， 0.25 0.5， 0.5 0.75 ，0.75 1】每两个一组，就会会变成独立的颜色块。

利用这个特性，我们可以不必使用上文中第二种方式（每一个矩形一个颜色，相当于绘制了大量独立的矩形块），使用线组合的矩形就可以模拟独立矩形块了。

 

比如说简单的画一个圆

应用渐变色的算法

  public LinearGradientBrush lgb = new LinearGradientBrush() { StartPoint=new Point(0.5,0),EndPoint= new Point(0.5, 1) };//垂直拜访
        

        public void SetLinerColor()
        {
            lgb.GradientStops.Clear();
            for (double y = 0; y < 1.0;)
            {
                var color = DrawSetting.Instance.GetColorBrush();
                lgb.GradientStops.Add(new GradientStop(color, y));
                lgb.GradientStops.Add(new GradientStop(color, y += (RectHeight / DrawHeight)));
            }
        }

绘图时直接用lgb即可，其次再往后修改颜色不用重新绘制图形，只用修改颜色即可

 

简单写的小算法，不一定什么情况下都好使。

如果哪位大佬能给改改算法，那就更好了，脑子转不过来了...具体是XY位置确认某组颜色的算法..

圆的算法

其中

圆的算法是极坐标算法

20是每组矩形【内部矩形】的数量，宽10，高200，一个矩形上到下排列20个

80是横向排列的最大数量，横向80个，总共3行，共240组。

d为Y坐标对20取商数，即为是在第几行。

k为是第某组的第几个，或者可以用【余数】

n为第几组矩形

xa为xy坐标转到具体每组的算法，2N+1，每组共40个颜色，每两个一对，（0，1）（2，3）（4，5）（6，7）。。。类推，这个公式应该还可以用别的方式。

 

 

  for (int j = 2; j < 15; j++)
            {
                for (int i = 0; i <= 360; i++)
                {
                    var ra = i * 3.14 / 180;
                    int x1 = (int)(40 + (j * Math.Cos(ra)));
                    int y1 = (int)(40 + (j * Math.Sin(ra)));
                    if (!PointList.Contains(new Point(x1, y1)))
                    {
                        PointList.Add(new Point(x1, y1));
                        //await Task.Delay(30);
                    }

                }
            }
            foreach (var item in PointList)
            {
                var x = (int)item.X;
                var y = (int)item.Y;
                var d = y / 20;
                var k = 20 - ((d + 1) * 20 - y);
                var n = (d) * 80 + x;
                var xa = 2 * k + 1;
                (draw.Visuals[n] as RectByLineDrawVisual).lgb.GradientStops[y == 0 ? 0 : xa - 1].Color = Colors.Transparent;
                (draw.Visuals[n] as RectByLineDrawVisual).lgb.GradientStops[y == 0 ? 1 : xa].Color = Colors.Transparent;
                await Task.Delay(3);
            }