CPF 入門教程 - 繪圖（四）

CPF NetCore跨平台UI框架，增加了Vlc支持跨平台播放視頻。

 

系列教程

CPF 入門教程（一）

CPF 入門教程 - 數據綁定和命令綁定（二）

CPF 入門教程 - 樣式和動畫（三）

CPF 入門教程 - 繪圖（四）

CPF 入門教程 - 設計器和模板庫的使用（五） 

CPF 入門教程 - 控件布局（六） 

CPF 入門教程 - 屬性和事件（七） 

CPF 入門教程 - 各個控件介紹（八） 

CPF 入門教程 - 各平台各系統發布說明（九）  

 

一般來說是不需要自己寫繪圖代碼的，大部分UI效果通過控件元素(CPF.Shapes提供基礎圖形控件)組合和SVG組合就可以實現。

如果需要自定義控件繪制特殊的控件，可以繼承Control或者UIElement重寫OnRender方法來繪制自己需要的效果。調用 Invalidate 或者在依賴屬性上設置AffectsRender來刷新界面。

        /// <summary>
        /// 背景填充
        /// </summary>
        [UIPropertyMetadata(null, UIPropertyOptions.AffectsRender)]//屬性變化之后自動刷新
        public ViewFill Background
        {
            get { return (ViewFill)GetValue(); }
            set { SetValue(value); }
        }

 

        protected override void OnRender(DrawingContext dc)
        {
            var s = ActualSize;

            var rect = new Rect(0, 0, s.Width, s.Height);

            var ba = Background;
            if (ba != null)
            {//填充背景
                  using (var brush = ba.CreateBrush(rect, Root.RenderScaling))
                  {
                        dc.FillRectangle(brush, rect);
                  }
             }
        }

其中Background 是 ViewFill 類型，ViewFill和Brush區別就是ViewFill和UI元素相關，可以支持相對或者絕對的效果，以及DPI的縮放。

繪圖使用DrawingContext來操作，支持常規的圖形繪制，比如線條，文字，路徑等等。

使用剪輯區域的時候需要PushClip和PopClip配對，就是當你設置一個剪輯區域，使用完了之后你需要把你這個剪輯區域刪除。可以設置多次剪輯區域，像括號一樣配對和范圍。

         dc.PushClip(rect);//設置一個剪輯區域
         //繪圖操作
         dc.DrawImage(bmp, rect, rect.......
         //..........
         dc.PopClip();

矩陣使用 

var old = dc.Transform;//獲取原來的矩陣
var eff = old;
eff.Translate(-off.X + effectOffset.X, -off.Y + effectOffset.Y);//矩陣變換
dc.Transform = eff;//應用新矩陣

//繪圖操作

dc.Transform = old;//恢復原來的

 

PathGeometry 支持WPF和SVG的path里的字符串格式數據，隱式轉換。可以組合貝塞爾曲線，圓弧，線段等等用來繪制各種復雜的圖形效果。再通過DrawingContext繪制出來

比如：

PathGeometry path="m85.33333,682.66667l853.33334,0l0,21.33333l-853.33334,0l0,-21.33333z";

自定義路徑，BeginFigure開始，最后面必須有EndFigure 

 

在位圖里繪圖

 

 using (Bitmap bmp = new Bitmap(width, height))
 {
      using (var dc = DrawingContext.FromBitmap(bmp))
      {
          //繪圖操作
      }
 }

 

Bitmap的指針和像素操作

        /// <summary>
        /// 將圖片轉換成黑白色效果
        /// </summary>
        /// <param name="bmp">原圖</param>
        public static unsafe void GrayScale(Bitmap bmp)
        {
            //確定圖像的寬和高
            int height = bmp.Height;
            int width = bmp.Width;

            using (var l = bmp.Lock())
            {//l.DataPointer就是數據指針，一般不建議直接使用，因為不同平台，不同圖形適配器，不同位圖格式，數據格式不一樣，那你就需要判斷不同格式來遍歷指針數據處理了
                for (int y = 0; y < height; y++)
                {
                    for (int x = 0; x < width; x++)
                    {
                        l.GetPixel(x, y, out byte a, out byte r, out byte g, out byte b);
                        var p = (byte)Math.Min(255, 0.7 * r + (0.2 * g) + (0.1 * b));
                        l.SetPixel(x, y, a, p, p, p);
                    } // x
                } // y
            }
        }