正文 

当前位置： 首页 > IT > java教程

macosx下实现矩形部分圆角(代码片段)

ben-gao ben-gao     2023-01-07     342

关键词：

问题

在进行今天的内容之前，首先我想问一个问题：下图中，蓝色选择框与红色选择框除颜色、大小外有何不同？（我会在后文揭晓答案）

技术分享图片

目标

本文今天要讨论的是：在Mac OS X下，如何实现矩形的部分圆角。

比如这样：

技术分享图片

或者这样：

技术分享图片

解决方案

要想实现上图样式，有两种解决方案。

方案1:蠢萌描点法

蠢萌描点法实现图2的原理图如下：

技术分享图片

如上图所示，首先确定整个矩形的的几个特殊点，然后通过CGContextAddLineToPoint来实现绘制。

核心代码

- (void)drawRect:(NSRect)dirtyRect 
    [super drawRect:dirtyRect];
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGContextRef cr = [[NSGraphicsContext currentContext] graphicsPort];
    
    CGContextAddPath(cr, path);
    //为了照顾视力不好的童鞋，我将图2的坐标扩大了10倍。
    //顺时针将坐标填充入参数即可
    CGContextMoveToPoint(cr, 0, 0);
    CGContextAddLineToPoint(cr, 0, 150);
    CGContextAddArcToPoint(cr,
                           0, 180,
                           30, 180,
                           30);
    CGContextAddLineToPoint(cr, 270, 180);
    CGContextAddArcToPoint(cr,
                           300, 180,
                           300, 150,
                           30);
    CGContextAddLineToPoint(cr, 300, 0);
    CGContextAddLineToPoint(cr, 0, 0);
    
    CGContextSetRGBFillColor(cr, 255.0/255.0, 0.0/255.0, 0.0/255.0, 1);
    CGContextDrawPath(cr, kCGPathFill);
    
    CGPathRelease(path);

效果

技术分享图片

根据写代码来看，蠢萌描点法手法过于粗糙，我不会告诉你在实际项目中坐标花了我大半天时间去计算。（真的是半天！）
So…方案二腾空出世！

##方案二：猥琐遮掩法
猥琐遮盖法实现图3的原理如下：

技术分享图片

看上去极易操作，代码极易简洁，符合我一贯的代码美学风格，完美，所以接下来…我们继续算坐标！(狗头)

技术分享图片

核心代码

- (void)drawRect:(NSRect)dirtyRect 
    [super drawRect:dirtyRect];
    NSRect originalRect = NSMakeRect(0, 0, 300, 180);
    NSRect coverRect = NSMakeRect(0, 150, 300, 30);
    
    NSColor *red = [NSColor redColor];
    [red setFill];
    
    //圆角矩形
    NSBezierPath *originalPath = [NSBezierPath bezierPathWithRoundedRect:originalRect xRadius:30 yRadius:30];
    [originalPath fill];
    
    //遮掩矩形
    NSBezierPath *coverPath = [NSBezierPath bezierPathWithRect:coverRect];
    [coverPath fill];

效果图

技术分享图片

结语

那么图1中，两个选择框究竟有什么区别呢，如图所示：

技术分享图片

搞了这么多花里胡哨，终于满足了美工姐姐的奇葩需求，完美！
（需要项目代码的同学，请在简书私聊我。）

 




canva绘制圆角矩形(代码片段)

在做组态的时候，需要支持矩形圆角格式，但是因为canvas本身不带有圆角矩形，需要自行算出坐标进行绘制方案一、统一圆角<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>canvas制作圆角矩形（包括填充矩形的功... 查看详情

opencv-绘制圆角矩形(代码片段)

功能函数//绘制圆角矩形voidDrawRotatedRectChamfer(cv::Matmask,constcv::RotatedRectrotatedrect,floatradius,constcv::Scalar&color,intthickness,intlineType) //创建画布 cv::Matcanvas=cv::Mat::zeros(mask.size(), 查看详情

actionscript3画圆角矩形(代码片段)

查看详情

圆角矩形精度条(代码片段)

publicclassDownProgressBarextendsView/***注意：*1，整个精度条的宽度MaxProgress;*2,当前精度条的宽度currentProgress;*4,背景颜色*5，进度颜色*6，文字，文字颜色，大小**@paramcontext*/privateintmMaxProgress;privateintmProgress;privateintmBackgro 查看详情

canvas绘制圆形图片绘制圆角矩形图片？(代码片段)

...vas中我们常常遇到的一个需求绘制一个圆形或者一个圆角矩形图像，常用于展示用户头像，我们知道CSS有border-radius属性，但是Canvas是没有的~?? 很尴尬，我们就来瞅瞅怎么整出一个圆形头像~Part.1 效果圆形头像 圆角矩... 查看详情

以编程方式绘制圆角矩形[重复](代码片段)

...phics/Quartz2D?我想以编程方式为我覆盖的UIView绘制一个圆角矩形，我该怎么做？答案NSBezierPath有一个特殊的+bezierPathWithRoundedRect:xRadius:yRadius:，请查看文档。NSBezierPath*path=[NSBezierPathbezierPathWithRoundedRect:NSMakeRect(...)xRadius:3.0fyRadius:3.0f];... 查看详情

android圆角图片(代码片段)

Android圆角图片相比较于iOS实现圆角图片，Android的方式还是复杂些???参考HowtomakeanImageViewwithroundedcorners?1.绘制圆角矩形，在绘制bitmap，通过设置setXfermode为SRC_IN来实现setXfermode相关解释可参考HenCoderAndroid开发进阶:自定义... 查看详情

actionscript3绘制圆角矩形，您可以在其中定义每个角(代码片段)

查看详情

如何快速绘制简单的圆角矩形（圆角）

】如何快速绘制简单的圆角矩形（圆角）【英文标题】：Howtodrawasimpleroundedrectinswift(roundedcorners)【发布时间】：2015-05-2108:47:03【问题描述】：我设法画了一个矩形:-)但我不知道如何画一个圆角矩形。有人可以帮我用下面的代码如... 查看详情

canvas——绘制圆角矩形之详解

...,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。　　　　我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点... 查看详情

compose自定义条形进度条(代码片段)

...更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没有现成的条形进度条，所以我... 查看详情

用纯css样式实现的网页中圆角矩形（css代码）

怎么用纯CSS样式实现的网页中圆角矩形（css代码）第一种<htmlxmlns:v><head><style>v\\:*behavior:url(#default#VML);</style></head><body><v:roundRectstyle="position:absolute;left:20px;top:50px;width:200px;height:140px;"FillColor="#e8e8e8"Filled... 查看详情

canvas——绘制圆角矩形之详解

...,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。　　　　我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点... 查看详情

android圆角图片(代码片段)

Android圆角图片相比较于iOS实现圆角图片，Android的方式还是复杂些???参考HowtomakeanImageViewwithroundedcorners?1.绘制圆角矩形，在绘制bitmap，通过设置setXfermode为SRC_IN来实现setXfermode相关解释可参考HenCoderAndroid开发进阶:自定义... 查看详情

css圆角矩形的实现有多种方法,本例的方法是根据四个角的位置,将矩形横向上分为上

圆角矩形的实现有多种方法，本例的方法是根据四个角的位置，将矩形横向上分为上、中、下三块（用ul表示，只有中间块放内容），各块纵向再分为左、中、右三部分（用li表示）。其中只有第二块的li放页面内容，如页面内容... 查看详情

canvas踩坑记录(代码片段)

一、绘制一个带有多张图片和文字的canvas。要求将一张矩形的图片，放置进去显示为圆角矩形的图片　　解决方案，先把图片处理成圆角矩形的样子，再放进去就可以了　　绘制圆角矩形图片的解决方案<imgsrc="http://pics.sc.chinaz... 查看详情

android自定义圆角矩形imageview，支持glide加载图片及颜色填充

...是自定义一个shape背景drawable及用到v7包下的CardView包裹View实现圆角矩形效果，还有就是在用户圆形头像的时候需要使用到圆角矩形（圆形可以看做是特殊的圆角矩形），诸如Button，Editext，TextView的圆角矩形... 查看详情

canvas文字自动换行圆角矩形画法生成图片手机长按保存(代码片段)

canvas的文字自动换行函数封装//str:要绘制的字符串//canvas:canvas对象//initX:绘制字符串起始x坐标//initY:绘制字符串起始y坐标//lineHeight:字行高，自己定义个值即可functioncanvasTextAutoLine(str,canvas,initX,initY,lineHeight)varctx=canvas.getContext("2d") 查看详情