首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在C#中绘制带圆角,边框和渐变填充的图像

在C#中绘制带圆角、边框和渐变填充的图像,可以通过使用System.Drawing命名空间中的Graphics类和相关方法来实现。

首先,我们需要创建一个Bitmap对象,并使用Graphics.FromImage方法创建一个Graphics对象,以便在Bitmap上进行绘图操作。

接下来,我们可以使用Graphics对象的DrawRectangle方法来绘制一个带圆角的矩形。可以通过设置Pen对象的属性来定义边框的颜色、宽度等。

然后,我们可以使用Graphics对象的FillRectangle方法来填充矩形区域。可以使用LinearGradientBrush对象来创建一个渐变填充效果,并设置起始颜色和结束颜色。

最后,我们可以使用Graphics对象的DrawEllipse方法来绘制圆角。可以使用GraphicsPath对象来创建一个带有圆角的路径,并使用Graphics对象的FillPath方法来填充路径。

以下是一个示例代码:

代码语言:csharp
复制
using System;
using System.Drawing;
using System.Drawing.Drawing2D;

public class Program
{
    public static void Main()
    {
        int width = 200;
        int height = 200;
        int cornerRadius = 20;
        int borderWidth = 5;
        Color borderColor = Color.Black;
        Color startColor = Color.Red;
        Color endColor = Color.Yellow;

        Bitmap bitmap = new Bitmap(width, height);
        Graphics graphics = Graphics.FromImage(bitmap);

        // 绘制带圆角的矩形
        Rectangle rectangle = new Rectangle(borderWidth / 2, borderWidth / 2, width - borderWidth, height - borderWidth);
        GraphicsPath path = GetRoundedRectangle(rectangle, cornerRadius);
        Pen borderPen = new Pen(borderColor, borderWidth);
        graphics.DrawPath(borderPen, path);

        // 渐变填充
        LinearGradientBrush brush = new LinearGradientBrush(rectangle, startColor, endColor, LinearGradientMode.Vertical);
        graphics.FillPath(brush, path);

        // 绘制圆角
        Rectangle ellipseRect = new Rectangle(width / 2 - cornerRadius / 2, height / 2 - cornerRadius / 2, cornerRadius, cornerRadius);
        graphics.FillEllipse(Brushes.White, ellipseRect);

        // 保存图像
        bitmap.Save("image.png");
    }

    // 创建带圆角的路径
    public static GraphicsPath GetRoundedRectangle(Rectangle rectangle, int cornerRadius)
    {
        GraphicsPath path = new GraphicsPath();
        int diameter = cornerRadius * 2;
        Rectangle arcRect = new Rectangle(rectangle.X, rectangle.Y, diameter, diameter);

        // 左上角
        path.AddArc(arcRect, 180, 90);
        // 右上角
        arcRect.X = rectangle.Right - diameter;
        path.AddArc(arcRect, 270, 90);
        // 右下角
        arcRect.Y = rectangle.Bottom - diameter;
        path.AddArc(arcRect, 0, 90);
        // 左下角
        arcRect.X = rectangle.Left;
        path.AddArc(arcRect, 90, 90);

        path.CloseFigure();
        return path;
    }
}

这段代码将绘制一个宽高为200的带圆角、边框和渐变填充的图像,并保存为image.png文件。

在这个例子中,我们使用了System.Drawing命名空间中的Bitmap、Graphics、Pen、Brush、Rectangle、GraphicsPath等类和方法来实现绘图操作。你可以根据实际需求调整参数和样式。

腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体产品选择应根据实际需求和情况进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

(shape标签定义) 静态使用动态使用(圆角渐变实现) 首先给出GitHub地址,后续有新内容会持续加入 https://github.com/PopFisher/AndroidDrawClassic...很方便得到一个矩形,圆,椭圆,圆环,很容易维护修改 很方便实现圆角渐变(线性渐变,径向渐变,扫描渐变) 代替图片作为 View 背景,减少 apk 体积(减少 apk 体积最明显最有效步骤就是去掉图片...线宽,布局文件View高度需要比这个值大才可以绘制出来 android:dashWidth 每段破折线长度 android:dashGap="5dp"每段破折线之间间隔-->...-- 圆角半径是高度一般就是一个圆弧了 --> 圆角矩形-左右两边都是半圆弧-边框:rect_rounded_left_right_arc_border.xml...--调整angle不能实现角度变化 centerX,centerY是中心点位置,这里用是百分比值(0-1) rectgradientRadius无效-->

2.5K70

Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

(shape标签定义) 静态使用动态使用(圆角渐变实现) 首先给出GitHub地址,后续有新内容会持续加入 https://github.com/PopFisher/AndroidDrawClassic...很方便得到一个矩形,圆,椭圆,圆环,很容易维护修改 很方便实现圆角渐变(线性渐变,径向渐变,扫描渐变) 代替图片作为 View 背景,减少 apk 体积(减少 apk 体积最明显最有效步骤就是去掉图片...线宽,布局文件View高度需要比这个值大才可以绘制出来 android:dashWidth 每段破折线长度 android:dashGap="5dp"每段破折线之间间隔-->...-- 圆角半径是高度一般就是一个圆弧了 --> 圆角矩形-左右两边都是半圆弧-边框:rect_rounded_left_right_arc_border.xml...--调整angle不能实现角度变化 centerX,centerY是中心点位置,这里用是百分比值(0-1) rectgradientRadius无效-->

1.6K00

Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape用法

学习Shape用法 非著名程序员 Android程序开发,我们经常会去用到Shape这个东西去定义各种各样形状,shape可以绘制矩形环形以及椭圆,所以只需要用椭圆即可,使用时候将控件比如...imageview或textview高宽设置成一样就是正圆,solid表示远填充色,stroke则代表远边框线,所以两者结合可以实现边缘圆,当然也可以直接加上size控制高宽。...stroke属性: color:边框颜色 width:边框宽度 dashWidth:虚线框宽度 dashGap:虚线框间隔 corners属性: radius:四个角半径...默认线性渐变,可以指定渐变为radial(径向渐变)或者sweep(类似雷达扫描形式) gradientRadius:渐变半径,径向渐变需指定半径。...right="12dp" android:top="8dp" /> 5、画实线填充颜色半边椭圆边框

2.1K90

【愚公系列】2023年11月 WPF控件专题 Path控件详解

其中,Data属性是必需,用于指定绘制路径,Fill属性用于填充路径颜色或渐变,Stroke属性用于绘制路径边框颜色、宽度线条样式。...Path控件是WPF中非常重要一个控件,可以通过指定Data属性来绘制各种不规则形状。同时,可以使用FillStroke属性来设置填充边框样式。...Fill:用于填充路径内部颜色、渐变图像。Stroke:用于绘制路径边框颜色、渐变图像。StrokeThickness:表示路径边框宽度。...Path控件WPF扮演着非常重要角色,是一个非常强大图形控件。....Path控件绘制复杂图形示例代码,该代码绘制了一个由多个线条组成复杂形状,同时使用了FillStroke属性来设置填充边框样式。

1.1K11

平面设计师必备AI快捷键

三、绘制圆角矩形圆角大小 1.选择圆角矩形工具 2.按住上下方向键便可增大和缩小圆角 3.按左可以画矩形,换右可以画左右各是半圆(像操场跑道)图形 四、绘制多边形 按住多边形工具,且不释放鼠标。...七、AI里未转曲线时文字做渐变方法 AI 未转成曲线文字是无法使用渐变填充,使用以下方法就可以了。 1.首先打上你要字。...还有一个方法,就是用字符外观也可以填充渐变,方法是:打上字,然后外观面板上点上面的三角下拉菜单,选择添加新填充,然后然后应用渐变。...ai cs2,灰度可以直接对灰度图片进行填充专色,前提是图片要转为灰度,ai cs却不能!...首先,打开你渐变面板,点击你要改变颜色滑块,选择以下几种方法: 1.改变填充色(工具箱); 2.颜色面板里改变填充色; 3.色板面板中直接拖曳色块到颜色面板填充色块; 4.颜色面板中点击底部色谱

2.5K20

利用PPT如何设计制作创意相框

很多人都希望自己PPT能够独具匠心,展示图片或制作电子相册时,总想让图片有个新颖、独特相框,而PPT自带图片边框显得“力不从心”。...如果利用自选图形,再经过边线及内部填充等设置,就能够制作出具有创意效果相框。下面iSlide就讲述微立体相框水晶相框制作技法。...插入一个圆角矩形(可拖动其黄色控制点来改变圆角弧度),设置它线条为“渐变线”,填充类型为“路径”。...线条宽度设为5磅。圆角矩形内部填充为“渐变填充”,类型为“路径”,其中2个光圈:光圈1颜色为白色,位置为0%,透明度为100%;光圈2颜色为白色,位置为100%,透明度为90%。...接下来,再绘制一个大小适合椭圆,使之与复制出那个水晶边框有一定重叠,将这两个都选中后,点击“格式”选项卡下“合并形状”“剪除”。

4.1K20

CSS入门总结(下)

、如何为元素设置宽高、设置背景色、设置填充边距边框、如何设置字字体、字号、颜色、对齐方式等。...下面把CSS做一个梳理并主要介绍一下发生变化模块内容: 选择器: CSS3对选择器做了更详细划分: ? 背景边框 1) 通过传统CSS创建一个圆角边框是很麻烦。...我们需要通过设置一个背景图或在不同角设置不同图像等方式达到效果,CSS3直接使用border-radius即可。border-radius: 5px; 2)box-shadow:用来添加阴影。...box-shadow: 10px 10px 10px #888; 3)border-image:我们可以设置不是纯色边框啦,可以加进去图片边框,因为浏览器内核不同,为保证兼容,要考虑不同浏览器情况...:background-origin:content-box; background-clip背景剪裁属性是从指定位置开始绘制:background-clip: content-box; 5)渐变: 垂直线性渐变

1K20

圆角虚线边框?CSS 不在话下

那么, CSS ,我们还有其它方式能够实现圆角,且虚线单段长度与线段之间间隙可控方式吗? 本文,我们就一起探讨探讨。...此时,这样背景效果可用于创建一种渐变黑色到透明重复纹理效果: 在这个基础上,我们只需要给这个图形上层,再利用伪元素,叠加一层颜色,就得到了我们想要边框效果,并且,边框间隙大小可以简单调整。...: 与上面方法一类似,再通过在这个图形基础上,元素中心,叠加多一层纯色遮罩图形,只漏出最外围一圈图形,圆角虚线边框就实现了: 此方法比上面第一种渐变方法更好之处在于,虚线每一条线段长度是固定...通过一个动图,简单感受一下: 总结一下 本文介绍了 2 种 CSS ,不借助切图 SVG 实现圆角虚线边框方式: 重复角向渐变叠加遮罩层 重复线性渐变叠加遮罩层 当然,两种 CSS 方式都存在一定瑕疵...将 SVG 生成矢量图像数据直接嵌入到 background URL ,能够应付几乎所有场景,相对而言是更好选择。

31910

用SVG实现一个优雅提示框

简单来归纳一下: 边框提示框 纯色(或透明度纯色)提示框 内阴影(或外阴影)提示框 边框+渐变提示框 边框+透明度背景提示框 提示框三角圆角阴影提示框 可能还有我未碰到提示框...面对这么多UI风格,对于前端实现上来说是具有一定挑战性,特别是多种效果组合在一起。比如说,带有边框+内外阴影+渐变(或透明度)+圆角三角等。基本上组合了上图所提到各种UI风格。...其实我们对于原先采用CSS clip-path方案其实也存在很多缺陷,它在面对带有阴影、背景透明或者渐变边框同时出现时就显出了实现成本高效果一般缺点。...NO.5 SVG 方案 讨论我们想到 SVGpath 这个提示框样式天然匹配(建议先了解下path相关文档),查阅了相关文档资料后我们大致得到了使用SVG来实现的如下几个优点: 能轻松满足阴影...背景渐变 SVG不仅支持简单填充,还支持线性渐变径向渐变以及图形纹理等。为了让渐变能被重复使用,渐变内容需要定义标签内部。

2.4K10

Android入门教程 | res资源目录简介与shape绘制使用

shape绘制使用 工程目录中有一个drawable文件夹,里面存放是一些静态图片资源文件。...使用这类资源,可以完成一些比较简单美术设计。 例子 接下来我们新建一个shape试试,要求带有外围边框,有圆角,里面用渐变填充。...corners标签代表圆角。如果不设置,则默认为直角。这里我们设定圆角半径为6dp。 gradient表示渐变色。分别可以设置起始,中间结束颜色值。...[1240] shape介绍 shape又称为“形状可绘制对象”。为了简便,以下都称作shape或者“shape文件”。 shape是一种 XML 文件定义通用形状。...[1240] 如果想要渐变色,再增加gradient设置就好。 代码中使用资源 java代码中使用资源,比如在activity设置背景。

1.4K20

CSS 奇思妙想 | 巧妙实现圆角三角形

之前在这篇文章 -- 《老生常谈之 CSS 实现三角形》,介绍了 6 种使用 CSS 实现三角形方式。 但是其中漏掉了一个非常重要场景,如何使用纯 CSS 实现圆角三角形呢?...我们实际是通过一个边框,且边框连接类型为 stroke-linejoin: round 多边形生成圆角三角形。...如果,我们把底色边框色区分开,实际是这样: .triangle { fill: #0f0; stroke: #000; stroke-width: 10; } ?...绘制圆角菱形 那么,接下来我们目标就变成了绘制一个圆角菱形,方法有很多,本文给出其中一种方式: 首先将一个正方形变成一个菱形,利用 transform 有一个固定公式: ?...上述各个图形完整代码,你可以戳这里:CodePen Demo -- A triangle with rounded and gradient background 最后 本文介绍了几种 CSS 实现圆角三角形方式

4.1K41

前端网页制作秘密武器之盒模型边框

1 引言 盒模型是CSS一种基础设计模式,定义了Web页面元素是如何被看作盒子来解析,而每一个盒子又有不同展示方法接下来我们将详细介绍一下边框高级属性:圆角边框图像边框。...分别定义右上角、右下角左上角左下角圆角。...None表示无图背景,使用绝对或相对地址,或者创建渐变色来确定图像。 :设置检索对象边框背景图分割方式。...该属性指定从上、右、下、左方位来分隔图像,将图像分成4个角、4条边中间区域共9份,中间区域始终透明,除非加上关键字fill。 :设置或检索对象边框厚度。...:设置或检索对象边框图像平铺方式。该属性用于指定边框背景图填充方式,可定义0~2个参数值,即水平和垂直方向。

1.1K10

大屏可视化之番外篇图标图表制作 图标1图标2图标3图标4,5图表总结

首先在页面上面拖出一个梯形,然后调整期属性为填充边框大小为1,边角样式为 “圆角”,梯形形状为“等腰梯形”: ? 调整梯形上下边长度,得到如下图形: ?...然后指定合适圆角半径,即可得到需要图形: ? 加上圆形 圆环等,即可得到下面的图标: ? 图标3 如下图标: ? 前面的图标一样,只需要看看中间线段部分如何绘制即可。...要绘制线段,可以使用连接体连线: ? 通过连接体可以绘制出以下形状: ? 通过把上面的形状圆形组合,即可以得到目标图形。 图标4,5 如下两个图标: ? 相关思路不再赘述。...首先在页面上面拖出来四个圆形,然后分别调整他们填充颜色,大小,边框颜色,起始结束角度等,可以得到如下图形: ? 对于第一个圆形,只需要设置图形尺寸,然后分别设置填充边框颜色即可: ?...对于第二个圆形,设置尺寸,设置不显示边框但现实填充,但是把填充颜色设置为渐变效果: ? 对于第一个圆形,只需要设置图形尺寸,然后分别设置填充边框颜色,并设置其起始角度结束角度: ?

3K30

【愚公系列】2023年11月 WPF控件专题 Rectangle控件详解

自定义控件则允许开发人员使用XAMLC#等编程语言来创建个性化用户界面元素。自定义控件可以根据需求提供更多功能自定义化选项,以及更好用户体验。...一、Rectangle控件详解Rectangle控件是WPF中用于绘制矩形形状控件。它可以UI中用于多种用途,如绘制边框填充区域等。...例如,以下是一个带有圆角填充透明度Rectangle控件:<Rectangle Width="100" Height="100" Fill="Blue" Stroke="Black" StrokeThickness...Name:设置矩形控件名称,用于代码引用该控件。2.常用场景WPFRectangle控件常用于以下场景:绘制矩形图形:Rectangle控件可以用于绘制矩形图形并设置矩形颜色、边框等属性。...实现按钮效果:可以将Rectangle控件放在Button控件,然后设置不同背景边框颜色,从而实现不同状态下按钮效果。

50331

Flutter开发-容器类组件

Padding(填充) Padding可以给其子节点添加填充(留白),边距效果类似。我们在前面很多示例中都已经使用过它了,现在来看看它定义: Padding({ ......DecoratedBox(装饰容器) DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰(Decoration),如背景、边框渐变等。...position :此属性决定在哪里绘制Decoration,它接收DecorationPosition枚举类型,该枚举类有两个值: background:子组件之后绘制,即背景装饰。...foreground:子组件之上绘制,即前景。 BoxDecoration 我们通常会直接使用BoxDecoration类,它是一个Decoration子类,实现了常用装饰元素绘制。...下面我们实现一个阴影背景色渐变按钮: DecoratedBox( decoration: BoxDecoration( gradient: LinearGradient(colors

3.5K20

Android – Drawable 详解

用法 不同情况下有很多可绘制类型,设置按钮状态行为,创建可伸缩按钮背景创建复合可绘制图层。...这用于创建一个复杂形状,然后可以作为布局或视图背景附加在屏幕上。例如,可以使用可绘制形状来更改按钮背景形状,边框渐变。 一个形状只是一个属性集合,被合并来描述一个背景。...形状可以用属性来描述,如圆角,背景渐变,间距填充,背景颜色固定,描边等。 纯色 Shapes 下面是一个绘制带有边框圆角矩形示例: <?...LayerList可以用来绘制多个其它drawable(形状,图像等),并将它们放置相互之间关系。默认情况下,图层被放置另一个顶部,最后一个图层被绘制顶部。...NinePatch是具有.9.png文件扩展名图像,表示这是一个可伸缩PNG图像。该文件与正常PNG文件没有什么不同,除了您将添加细黑线以指示图像垂直水平“可拉伸”填充”区域。

5.3K50
领券