前段時(shí)間美術(shù)在驗(yàn)收界面時(shí)提了問題：為啥要求1像素寬的一個(gè)矩形框似乎卻變成了2，3個(gè)像素寬。仔細(xì)檢查過代碼后發(fā)現(xiàn)，的確設(shè)置了LineWidth為1，但繪制效果卻并不如人愿。似乎在ios上繪制最低要2個(gè)像素的線寬。

成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，先為柳北等服務(wù)建站，柳北等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為柳北企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

       查看文檔后發(fā)現(xiàn)造成這個(gè)問題的原因是Quartz的抗鋸齒機(jī)制。一種粗暴的解決方案是不采用抗鋸齒，即：CGContextSetShouldAntialias(context, NO)。但是顯而易見的問題是取消抗鋸齒會(huì)導(dǎo)致繪制效果變差。而另外一種方案則比較取巧：將繪制調(diào)整到半像素坐標(biāo)系上：

比如 CGContextMoveToPoint(context, 100.0, 100.0); CGContextAddLineToPoint(context, 100.0, 200.0);改為 CGContextMoveToPoint(context, 100.5, 100.5); CGContextAddLineToPoint(context,100.5, 200.5);

這是因?yàn)椋核^的線寬指的是給定路徑的中心到兩邊的粗細(xì)，換句話是在路徑的兩邊各繪制一半。如圖

在繪制線寬為1的直線(3,1)到(3,5)時(shí)，實(shí)際上是占據(jù)了左右兩個(gè)像素各半個(gè)像素，而真正繪制時(shí)當(dāng)然是以一個(gè)像素為標(biāo)準(zhǔn)單位，所以淺藍(lán)色區(qū)域就會(huì)以相近的方式進(jìn)行渲染。這也是寬為1.0的線繪制并不準(zhǔn)確的原因。而當(dāng)將繪制中心調(diào)整到半個(gè)像素上就不會(huì)有這個(gè)問題，見右圖:(3.5,1)到(3.5,5)。詳細(xì)可以參考mozilla canvas繪制的文檔。

       最后上一個(gè)在ios上繪制帶圓角矩形的代碼：

if (radius <= 0)
{
    CGContextAddRect(context, rect);
    return;
}
       
CGContextSaveGState(context);
CGContextTranslateCTM(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM(context, radius, radius);
NSInteger width     = CGRectGetWidth(rect) / radius;
NSInteger height    = CGRectGetHeight(rect) / radius;
NSInteger halfWidth = width / 2;
NSInteger halfHeight= height / 2;
       
CGContextMoveToPoint  (context, width + 0.5, halfHeight + 0.5);
CGContextAddArcToPoint(context, width + 0.5, height + 0.5, halfWidth + 0.5, height + 0.5, 1); 
CGContextAddArcToPoint(context, 0 + 0.5, height + 0.5, 0 + 0.5, halfHeight + 0.5, 1);
CGContextAddArcToPoint(context, 0 + 0.5, 0 + 0.5, halfWidth + 0.5, 0 + 0.5, 1);
CGContextAddArcToPoint(context, width + 0.5, 0 + 0.5, width + 0.5, halfHeight + 0.5, 1);
       
CGContextClosePath(context);
CGContextRestoreGState(context);

原文轉(zhuǎn)載：http://xiangwangfeng.com/2012/03/24/為啥cgcontextsetlinewidth設(shè)置不了1pixel線框？/

以下是自己測(cè)試得出的結(jié)論，如有異意請(qǐng)各位老師不吝賜教，謝謝！

由于retina屏幕是640像素，而非retina是320，所以，分兩種情況，在retina屏幕下和非retina屏幕下。

畫一條從點(diǎn)(10.0, 10.0)到點(diǎn)(10.0, 100.0)的直線和點(diǎn)(10.5, 10.5)到點(diǎn)(10.5, 100.5)的直線，產(chǎn)生的樣式，上面都解釋了。

我想說的是從點(diǎn)(10.3, 10.3)到點(diǎn)(10.3, 100.3)的黑色一個(gè)像素的直線，CGContextSetShouldAntialias(context, YES)。

一、在retina屏幕下

   ====這個(gè)圖片是我畫出的線放大后的效果，我計(jì)算了，它繪制的是20、21、22這三個(gè)像素值，也就是說10.3 * 2 = 20.6;那么它會(huì)將第21個(gè)像素值繪制黑色，兩邊的繪制暗色。

二、在非retina屏幕下

   ====這個(gè)圖片是我畫出的線放大后的效果，計(jì)算后，它繪制的是10、11這兩個(gè)像素值，那么它會(huì)將第11個(gè)像素值繪制黑色，10的繪制成暗色。

我還要說從點(diǎn)(10.7, 10.7)到點(diǎn)(10.7, 100.7)的黑色一個(gè)像素的直線，CGContextSetShouldAntialias(context, YES)。

一、在retina屏幕下

   圖片樣式還是一樣的，但是位置變了，這次畫的是21、22、23這三個(gè)像素值，也就是說10.7 * 2 = 21.4;那么他是將第22個(gè)像素值繪制黑色，兩邊的繪制暗色。

二、在非retina屏幕下    

   ====這個(gè)圖片是我畫出的線放大后的效果，計(jì)算后，它繪制的是11、12這兩個(gè)像素值，那么它會(huì)將第11個(gè)像素值繪制黑色，12的繪制成暗色。

在說一說CGContextSetShouldAntialias(context, NO)。10.3和10.7的結(jié)果如下

一、在retina屏幕下

   繪制位置都一樣，但是樣式變了，變成沒有暗色全是黑色。

二、在非retina屏幕下

   位置樣式都變了，顏色只是黑色，并且都只畫了第11個(gè)像素

總結(jié)-----

   其實(shí)就一句話，“所謂的線寬指的是給定路徑的中心到兩邊的粗細(xì)，換句話是在路徑的兩邊各繪制一半”。這個(gè)原理明白了，啥都沒問題了。