实现了外描边效果之后,产品问内描边好做吗,我说简单!
简单个蛋!
ios开发文字内描边效果
因为苹果本身的描边效果,是双向描边,不是单侧的,见上一篇,而且发现也无法用外描边的方式实现.
想了很久,最后想的实现方式是,拿到每一个字符的path,然后用字体本身的大小画出来,再用比本身小一点的笔刷,在上面叠加一层细一些的文字,间接实现内描边的效果.
理论是没问题的
然后用coretext,拿到ctframe,再用ctFrame获取到每一行的文字CTline,再用CTLine获取到CTRun(一段相同富文本的合集),再用CTrun获取到每一个字的字形CGGlyph.
代码如下
let letters = CGMutablePath.init()
let framesetterNew = CTFramesetterCreateWithAttributedString(attributeString)
let frameNew = CTFramesetterCreateFrame(framesetterNew, CFRangeMake(0, CFAttributedStringGetLength(attributeString)), path, nil)
let lineArr = CTFrameGetLines(frameNew)
let lineCount = CFArrayGetCount(lineArr)
let _lineOrigins = UnsafeMutablePointer<CGPoint>.allocate(capacity: MemoryLayout<CGPoint>.size * lineCount)
CTFrameGetLineOrigins(frameNew, CFRange(location: 0, length: 0), _lineOrigins)
for lineIndex in 0 ..< lineCount{
let linePointer = CFArrayGetValueAtIndex(lineArr, lineIndex)
let line = unsafeBitCast(linePointer, to: CTLine.self)
let runArray = CTLineGetGlyphRuns(line)
for index in 0 ..< CFArrayGetCount(runArray) {
let runPointer = CFArrayGetValueAtIndex(runArray, index)
let run = unsafeBitCast(runPointer, to: CTRun.self)
let runFont = unsafeBitCast(CFDictionaryGetValue(CTRunGetAttributes(run),unsafeBitCast(kCTFontAttributeName, to: UnsafePointer.self)),to: CTFont.self)
for glyphIndex in 0 ..< CTRunGetGlyphCount(run){
let thisGlyphRange = CFRangeMake(glyphIndex, 1)
let glyphPointer = UnsafeMutablePointer<CGGlyph>.allocate(capacity: MemoryLayout<CGGlyph>.size)
let position = UnsafeMutablePointer<CGPoint>.allocate(capacity: MemoryLayout<CGPoint>.size)
CTRunGetGlyphs(run, thisGlyphRange, glyphPointer)
CTRunGetPositions(run, thisGlyphRange, position)
let letterPath = CTFontCreatePathForGlyph(runFont, glyphPointer.pointee, nil)
let transT = CGAffineTransform.init(translationX: _lineOrigins[lineIndex].x + position.pointee.x, y: position.pointee.y + _lineOrigins[lineIndex].y)
if letterPath != nil{
letters.addPath(letterPath!, transform: transT)
}
free(glyphPointer)
free(position)
}
}
}
ctx.saveGState()
ctx.addPath(letters)
ctx.setStrokeColor(UIColor.blue.cgColor)//无用颜色
let color = attributeString.attribute(.foregroundColor, at: 0, effectiveRange: nil) as? UIColor
ctx.setFillColor(color!.cgColor) //设置字体本身颜色
ctx.closePath()
ctx.fillPath()
ctx.addPath(letters)
print(abs(strokeWidth))
ctx.setLineWidth(abs(strokeWidth))
ctx.setBlendMode(CGBlendMode.clear)
ctx.strokePath()
ctx.setBlendMode(CGBlendMode.destinationAtop)
var newAtt = NSAttributedString.init(attributedString: attributeString)
newAtt = newAtt.appendAddAttributes([NSAttributedString.Key.foregroundColor:self.strokeColor])
let framesettera = CTFramesetterCreateWithAttributedString(newAtt)
let framea = CTFramesetterCreateFrame(framesettera, CFRangeMake(0, CFAttributedStringGetLength(newAtt)), path, nil)
CTFrameDraw(framea, ctx)
ctx.restoreGState()
这样就拿到了所有文字的path！搞定！
ios开发文字内描边效果
运行效果如下，跟想的完全不一样
ios开发文字内描边效果
瞬间我就慌了，我可是看了整整一天的coretext。能不能用拿到的这个东西搞事情呢，毕竟花了一整天时间，这个时候,就显示出智慧的重要性了.曲线救国
首先将获取到的path用fill模式画一遍,这就是原本的文字
ctx.saveGState() //先保存context的状态,用于画完描边之后恢复
ctx.addPath(letters)
ctx.setFillColor(color!.cgColor) //设置字体本身颜色
ctx.closePath()
ctx.fillPath()
然后重点来了,再画一遍刚才镂空的那个path,然后用粗线条画,
ios开发文字内描边效果
这样和原本的画好的文字做叠加，选择clear模式，这样两者重叠的部分颜色就会被清理掉,代码
ctx.addPath(letters)
print(abs(strokeWidth))
ctx.setLineWidth(abs(10))
ctx.setBlendMode(CGBlendMode.clear)
ctx.strokePath()
效果如下
ios开发文字内描边效果
这样就得到了,内描边效果里面显示的内容
我真他娘的是个天才
原本想的是得到的这个瘦弱的图形画在，本身原本的字体上,就完成效果了
然后坑又来了
clearmode,会把之前所有已经画好的颜色,清除掉,这样无论最下层原本的文字什么颜色，都会被裁剪到，第二部瘦弱字体的那个大小。这一点我忘得死死地
ios开发文字内描边效果
后来想了两个方案,一个是新建一个context,在这个context上面画图,然后再把这个context push进栈,然后;两者混合
另外一个是将coretext得到的path做一个translate弄到别处画,画好了再clip掉图形,再放到原本的位置,这样也不受clear影响.
但是两个都只是猜测.不一定成.
后来,想了想有没有,将图层上下颠倒显示的叠加模式呢,就是原本绿色在下面,红色在上面,混合后红色在下面,绿色在上面?
还真他娘的有
CGBlendMode.destinationAtop
这样我先clear模式得到需要的瘦弱图形,然后再画原本文字盖在上面,本来的效果是原本的文字完全的盖住了瘦小的那个文字.然后用这个叠加模式颜色颠倒后,效果就是内描边效果了.
真费劲呐.网上还没有搜到先例.
上代码
ctx.saveGState()
ctx.addPath(letters)
ctx.setStrokeColor(UIColor.blue.cgColor)//无用颜色
let color = attributeString.attribute(.foregroundColor, at: 0, effectiveRange: nil) as? UIColor
ctx.setFillColor(color!.cgColor) //设置字体本身颜色
ctx.closePath()
ctx.fillPath()
ctx.addPath(letters)
print(abs(strokeWidth))
ctx.setLineWidth(abs(strokeWidth))
ctx.setBlendMode(CGBlendMode.clear)
ctx.strokePath()
ctx.setBlendMode(CGBlendMode.destinationAtop)
var newAtt = NSAttributedString.init(attributedString: attributeString)
newAtt = newAtt.appendAddAttributes([NSAttributedString.Key.foregroundColor:self.strokeColor])
let framesettera = CTFramesetterCreateWithAttributedString(newAtt)
let framea = CTFramesetterCreateFrame(framesettera, CFRangeMake(0, CFAttributedStringGetLength(newAtt)), path, nil)
CTFrameDraw(framea, ctx)
ctx.restoreGState()
最终效果
ios开发文字内描边效果
外描边
ios开发文字内描边效果
ios开发文字内描边效果
另一种实现方式，得到字形path后clip，这样超出path区域的地方就会被裁掉，再stroke的时候直接就是内描边效果了
办法总比困难多
网友评论