美文网首页
设置1px线的两种方法

设置1px线的两种方法

作者: 落寞King | 来源:发表于2020-06-09 17:32 被阅读0次

当我们绘制1px的线时,由于iOS抗锯齿的原因,有时线会变浅,并且变宽。
原因是如果线刚好落在了一列或者一行显示显示单元之内,那么就会渲染出标准的一个像素的黑线。
但如果线落在了两个行或列的中间时,那么会得到一条“失真”的线,其实是两个像素宽的灰线。


image.png

例如常常绘制的1px的线。

    //第一条线
    UIView *lineOne = [[UIView alloc] initWithFrame:CGRectMake(60 , 300 , 10, SINGLE_LINE_WIDTH)];
    [self addSubview: lineOne];
    lineOne.backgroundColor = [UIColor blackColor];

- (void)drawRect:(CGRect)rect{
    //第三条线
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, 70 , 300);
    CGContextAddLineToPoint(context, 80 , 300);
    CGContextSetLineWidth(context, SINGLE_LINE_WIDTH);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextStrokePath(context);
    
    //第四条线
    //  第一种方法:   关闭图形上下文的抗锯齿
    //  CGContextSetShouldAntialias(context, NO);
    //第二种方法:   添加偏移量
    CGContextMoveToPoint(context, 80 , 300 + SINGLE_LINE_ADJUST_OFFSET);
    CGContextAddLineToPoint(context, 90 , 300 + SINGLE_LINE_ADJUST_OFFSET);
    CGContextSetLineWidth(context, SINGLE_LINE_WIDTH);
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    CGContextStrokePath(context);
}

显示如下:


image.png

只有绘制奇数像素宽度的线时需要处理,偶数加偏移也会出现问题。
解决方法如下
1.关掉抗锯齿
2.设置偏移量

相关文章

  • 设置1px线的两种方法

    当我们绘制1px的线时,由于iOS抗锯齿的原因,有时线会变浅,并且变宽。原因是如果线刚好落在了一列或者一行显示显示...

  • CSS margin-top失效解决办法

    方法1、设置父元素或者自身的display:inline-block; 方法2、设置父元素的border:1px ...

  • 移动端边框线的1px

    在手机移动端设置边框线1px是会根据设备物理像素来适配,实际效果很差(手机端看略粗)。这个方法是参照滴滴做的,效果还可以

  • iOS设置UILabel设置删除线的两种方法

    自定义Label 使用 drawRect 正常label使用,在给label赋值文字之后调用sizeToFit 2...

  • CSS 0.5像素线

    在移动端1像素的线是很丑的,而border-width设置为0.5px会被自动转成1px;border-width...

  • 写移动端遇到过的坑

    1.border设置的时候不要设置rem,如1px就写成1px,不要出现rem,否则会在有的手机中border消失...

  • 移动端1像素边框问题

    移动端1像素边框问题: 设置一个div的底部边框为 1px solid #000; 实际表现却是边框线是模糊的,或...

  • 【css】如何实现移动端敏感的0.5px

    如下几种方法能实现0.5px边框: 1.伪元素2倍尺寸1px边框scale缩小一半 推荐 给容器内设置伪元素,设置...

  • iOS兼容性bug

    1.导航栏下面的1px黑线bug 在base类中设置如下方法即可 2.iOS11以下tableview的heade...

  • 1px边框问题

    问题:ui设计稿中边框为1px,在实际的前端开发,移动端设备中会出现设置border:1px solid #000...

网友评论

      本文标题:设置1px线的两种方法

      本文链接:https://www.haomeiwen.com/subject/nscetktx.html