首页 > 其他分享 >SixLabors.ImageSharp 圆角矩形路径代码

SixLabors.ImageSharp 圆角矩形路径代码

时间:2023-12-14 18:12:02浏览次数:35  
标签:圆角 height width radius cornerRadius var new SixLabors ImageSharp

原因

因微软抛弃了 System.Drawing.Common
决定重写绘图底层, 在学习绘制时常会用到部分绘图引擎, 参考过几个都有缺陷
例如:
1.SkiaSharp字体布局问题 参考 布局问题
2.opencvsharp 不支持中文文字

于是乎我就用到了imageSharp, 其中看到作者有对于圆角矩形头像的示例代码, 但这样做只能使用图片而不是路径, 也就是无法绘制线条, 只能处理图片,
于是乎我便自己写了个

/// <summary>
    /// 圆角矩形
    /// </summary>
    /// <param name="width"></param>
    /// <param name="height"></param>
    /// <param name="cornerRadius"></param>
    /// <returns></returns>
public static IPath CreateRoundedRectanglePath(int width, int height, float cornerRadius)
    {
        var pathBuilder = new PathBuilder();
        width--;
        height--;

        var radius = 2 * cornerRadius;

        // Make sure the rounded corners are no larger than half the size of the rectangle
        cornerRadius = Math.Min(width * 0.5f, Math.Min(height * 0.5f, cornerRadius));

        // Start drawing path
        pathBuilder.StartFigure()
            .AddLine(cornerRadius, 0, width - cornerRadius, 0)
            .AddArc(new RectangleF(width - radius, 0, radius, radius), 0, 270, 90)
            .AddLine(width, cornerRadius, width, height - cornerRadius)
            .AddArc(new RectangleF(width - radius, height - radius, radius, radius), 0, 0, 90)
            .AddLine(width - cornerRadius, height, cornerRadius, height)
            .AddArc(new RectangleF(0, height - radius, radius, radius), 0, 90, 90)
            .AddLine(0, height - cornerRadius, 0, cornerRadius)
            .AddArc(new RectangleF(0, 0, radius, radius), 0, 180, 90)
            .CloseFigure();

        return pathBuilder.Build();
    }`

测试代码

[Fact]
    public void DrawRound()
    {
        var bg = new Vector2(100, 100);
        var size = new Vector2(50, 50);
        var rect = new Image<Rgb24>(bg.X.ToInt(), bg.Y.ToInt(), Color.White);
        var path = RoundedAlgorithm.CreateRoundedRectanglePath(size.X.ToInt(), size.Y.ToInt(), 10);
        var centerPath = path.Transform(Matrix3x2.CreateTranslation(bg / 2 - size / 2));
        rect.Mutate(w => w.Draw(Color.Black, 2, centerPath));
        rect.Save(AsPng());
    }

结果

我代码里用到的部分

    /// <summary>
    /// 使用固定圆角/预设透明背景/以达到阴影的效果
    /// </summary>
    /// <param name="origin"></param>
    /// <param name="mainIconSize"></param>
    /// <param name="color"></param>
    /// <param name="borderSize"></param>
    /// <returns></returns>
    public static Image<Rgba32> CalcRoundedRectLuminousBorder(this Image<Rgba32> origin, int mainIconSize, Color color,
        int borderSize = 0)
    {
        //取边框
        borderSize = borderSize == 0 ? mainIconSize / 42 : borderSize;
        //边缘大小
        var edgeSize = borderSize * 5;
        //外边距总大小
        var marginSize = mainIconSize + edgeSize;
        //主图+阴影大小
        var borderBoxSize = mainIconSize + borderSize;
        //输出图
        var outputImg = new Image<Rgba32>(marginSize, marginSize, Color.Transparent);
        //计算圆角矩形()
        var borderPath =
            RoundedAlgorithm.CreateRoundedRectanglePath(borderBoxSize, borderBoxSize, borderBoxSize * 0.2f);
        outputImg.Mutate(w =>
        {
            var borderBoxV2Size = new Vector2(borderBoxSize, borderBoxSize);
            //计算中心点
            var center = new Vector2(marginSize, marginSize) / 2;
            //矩阵位移
            var transform = borderPath.Transform(Matrix3x2.CreateTranslation(center - borderBoxV2Size / 2));
            //填充预设透明度阴影
            w.Fill(Color.FromRgba(238, 238, 238, 80), transform);
            //绘制带颜色线条(卡片类型的不同颜色不同)
            w.Draw(color, borderSize, transform);
            //绘制高斯模糊以达到透明毛玻璃效果
            w.GaussianBlur(borderSize);
            //绘制中心图卡片
            w.DrawCenterPoint(origin, 1);
            //重设预设大小到原图
            w.Resize(mainIconSize, mainIconSize);
        });
        //返回输出图
        return outputImg;
    }

我代码实现的效果 (微调边框阴影实现发光的圆角矩形跟随)

图片名称

半圆加直线

    /// <summary>
    /// 半圆+直线
    /// </summary>
    /// <param name="width"></param>
    /// <param name="height"></param>
    /// <returns></returns>
    public static PathBuilder GetCircularSurroundPath(int width, int height)
    {
        width--;
        height--;
        var r = height / 2;
        var pathBuilder = new PathBuilder();
        pathBuilder.MoveTo(new PointF(r, height))
            .ArcTo(r, r, 0, true, true, new Point(r, 0))
            .LineTo(new PointF(width - r, 0))
            .ArcTo(r, r, 0, true, true, new PointF(width - r, height))
            .LineTo(new PointF(r, height))
            .CloseFigure();
        return pathBuilder;
    }

测试代码


    [Fact]
    public void Semicircle()
    {
        var bg = new Vector2(100, 100);
        var size = new Vector2(70, 30);
        var rect = new Image<Rgb24>(bg.X.ToInt(), bg.Y.ToInt(), Color.White);

        var path = RoundedAlgorithm.GetCircularSurroundPath(size.X.ToInt(), size.Y.ToInt()).Build();
        var centerPath = path.Transform(Matrix3x2.CreateTranslation(bg / 2 - size / 2));
        rect.Mutate(w => w.Draw(Color.Black, 2, centerPath));
        rect.Save(AsPng());
    }

效果

测试图

图片名称

标签:圆角,height,width,radius,cornerRadius,var,new,SixLabors,ImageSharp
From: https://www.cnblogs.com/iner/p/17901722.html

相关文章

  • NX 2306 建模-倒圆角 和 圆倒角的区别
        图右画法(类似于螺栓螺母头)的步骤(也可以用扫掠,就是麻烦一点)step1:在需要倒的起始面上画起始圆,草图step2:拉伸该圆,布尔相交,并根据图示,选择对应角度。 ......
  • echarts修改图例legend样式:正方形、矩形、圆形、圆角
    ECharts提供的标记类型有'circle','rect','roundRect','triangle','diamond','pin','arrow','none'legend:{icon:'circle'}参考文章echarts图例修改legend中icon的形状及大小......
  • WPF --- 重写圆角DataGrid样式
    引言因要符合UI设计,需要一个圆角的DataGrid样式,其需要一个,所以需要重写DataGrid的样式,代码具体样式代码如下:<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • android 圆角方法之一
    playerView.setOutlineProvider(newViewOutlineProvider(){@OverridepublicvoidgetOutline(Viewview,Outlineoutline){outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),15);}});......
  • uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切
    uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式,功能多性能高体验好注释全。1.效果预览:      5.引入插件项目代码:Homilier/qf-image-cropper·GitCode使用HBuilderX导入项目:图片裁剪插件-DCloud......
  • android 12 修改Launcher3 app hotseat 图标形状为圆角图标
    1.概述在对11.0产品开发中,对于Launcher3做各种定制化开发,也是常见的,最近有功能需求要求,对于修改图标的形状为圆角图标,而在Launcher3中,所有的app和hotseat都是由BubbleTextView负责构建的,所以对于图标的修改也是要从BubbleTextView.java修改的在这里插入图片描述2.修改Launcher......
  • echarts修改图例legend样式:正方形、矩形、圆形、圆角
    ECharts提供的标记类型有‘circle’,‘rect’,‘roundRect’,‘triangle’,‘diamond’,‘pin’,‘arrow’,‘none’legend:{icon:'circle'}参考文章echarts图例修改legend中icon的形状及大小......
  • Qt绘制圆角矩形的内发光或外发光效果
    Qt没有内置的发光效果,只有一个QGraphicsDropShadowEffect类可以对整个控件产生阴影(可近似为外发光)效果。此处作者整理了如何用QPainter手工绘制形状的内发光或外发光效果。本文主要涉及到QPainter类中的图像混合模式技巧。下面允许我把Qt帮助中的内容复制过来供参考。调用QPaint......
  • winform圆角窗体实现
    1、窗体的FormBorderStyle设置成None,不要控制边框2、窗体属性中TransparencyKey和BackColor颜色设置成相同的,这样,窗体就透明了3、以此为基础,制作透明不规则窗体,可以在窗体上设圆角背景图片4、将图片调整为像素级的清晰颜色,不然就会有如下图的绿边,以下颜色为00ff00 color.......
  • iOS 父视图设置阴影 并且内部的子视图左右下边设置圆角
    给视图设置阴影的时候无法使用masksToBounds=YES,否则阴影也会被截取掉,将无法看到阴影效果如上图中所示,弹窗中每个item是一个类似card的效果,内部包含选择框和下面的轮播图,给item设置阴影后发现下边的轮播图超出部分还是直角效果,这样很不好看,所有这里通过单独给轮播图设置mark来实......