.NET Core使用canvas的常用方法 SKPath SKPaint SKRect等

た入场券 2022-12-05 05:15 153阅读 0赞

### 用Canvas绘制朋友圈分享图小程序、名片 ###

*   *  初始化画布
     *  开始在底图上绘制-放入产品图
     *  添加文字描述
     *  最后把你画的图片保存到本地

## 初始化画布 ##

var httpClient = new System.Net.Http.HttpClient();
                // info 为你的画布大小 例如 with=750 hight=1024
                var info = new SKImageInfo(750, 1024);
                // create the surface using the information
                var surface = SKSurface.Create(info);
    //载入底图
     var bmp = SKBitmap.Decode(httpClient.GetByteArrayAsync("你的底图").Result);
                //初始化画布
                var canvas = surface.Canvas;
    
                // create a paint object so that drawing can happen at a higher resolution
                using (var paint = new SKPaint())
                { 
                    paint.IsAntialias = true;
                    paint.FilterQuality = SKFilterQuality.High;
                    canvas.DrawBitmap(bmp, info.Rect, paint);
                }

## 开始在底图上绘制-放入产品图 ##

小方法解释  
AddCircle-切圆  
例如：avatarPath.AddCircle(375, 395, 500);  
解释：375，395是你要切的中心点坐标 500是radius(越小越圆)

//产品图
                //保存当前画布状态，即正常全图绘制状态
                canvas.Save();
                var avatarPath = new SKPath(); 
                avatarPath.AddCircle(375, 395, 500);
                canvas.ClipPath(avatarPath, SKClipOperation.Intersect, true);
                using (var avatarImage = SKImage.FromBitmap(SKBitmap.Decode(httpClient.GetByteArrayAsync("你的产品图").Result)))
                { 
                    // 35,50是你图片的坐标 注意：不要超出画布的大小，否则无法显示 680 465是图片的大小
                    var rect = SKRect.Create(35, 50, 680, 465);
    
                    canvas.DrawImage(avatarImage, rect);
                }
                //恢复画布状态为全图绘制状态
                canvas.Restore();

## 添加文字描述 ##

using (var paint = new SKPaint())
                { 
                    //字体
                    paint.Typeface = SKTypeface.FromFamilyName(
           "SimHei",
           SKFontStyleWeight.Normal,
           SKFontStyleWidth.Normal,
           SKFontStyleSlant.Upright);
                    //字体大小
                    paint.TextSize = 40;
                    //字体颜色
                    paint.Color = SKColor.Parse("#333333");
                    //抗锯齿不能少
                    paint.IsAntialias = true;
                    var tRect = new SKRect();
    
                    //84.522是文字的坐标 paint是前面设置的文字样式
                    //调用画单行文字扩展方法
                    canvas.DrawMuiltLineText("你的文字", 84, 522, paint, 581, 90);
                }
    
                canvas.Restore();

灵活运用图片跟文字就可以画出你想要的效果

## 最后把你画的图片保存到本地 ##

var image = surface.Snapshot(); 
                    // encode the image as a PNG+
                    var data = image.Encode(SKEncodedImageFormat.Png, 100);
                    string filname = "ss.png";
                    using (var stream = File.OpenWrite(filname))
                    { 
                        data.SaveTo(stream);
                    }