Android webkit webkit中skia的使用方法简析
#############################################
本文为极度寒冰原创，转载请注明出处
#############################################
做webkit已经有两年的时间了，但是做的时间越长越能感觉到自己的瓶颈在什么地方。
可能每一个做webkit的人都避不开一些图形库，因为webkit说到底只是一个渲染排版引擎。而真正去将一个网页show出来的话，免不了一些第三方图形库的支持。所以最近就结合webkit，分析一些skia的使用。
首先看一个简单的网页。
<head>
<body>
Test!
</body>
</head>这是一个简单的不能再简单的网页，最终是要在网页上面显示一个文本，文本的内容是“Test！”
根据前面几篇文章的分析，我们可以清楚地知道这是一个text的标签，更加详细一点的说,
而在android平台上面，这个text需要Font::drawSimpleText去进行绘制。
查看code后发现drawSimpleText是调用drawGlyphBuffer(context,glyphBuffer,startPoint)进行绘制。所以我们今天的介绍就从这个函数的具体实现drawGlyphs开始。
drawGlyphs函数所在文件为： /external/webkit/Source/WebCore/platform/graphics/FontFastPath.cpp
第一步，为了测试skia的使用，我们首先把drawGlyphs的所有内容通通的都注释掉。
第二步，使用skia的paint进行画图，测试skia各种api的使用方法了。
第三步，将刚才写的test.html push到手机的data/local/下面。
第四步，进行libwebcore的替换，并且用浏览器打开 file://data/local/test.html进行测试，查看效果。
A.对矩形的绘制
将Font::drawGlyphs改写如下：
void Font::drawGlyphs(GraphicsContext* gc, const SimpleFontData* font,
const GlyphBuffer& glyphBuffer, int from, int numGlyphs,
const FloatPoint& point) const
{
SkPaint paint;
SkCanvas *canvas = gc->platformContext()->recordingCanvas();
char *char_test = "Hello";
SkTypeface *font_test = SkTypeface::CreateFromFile("DroidSans.ttf");
paint.setTypeface(font_test);
paint.setFilterBitmap(true);
paint.setARGB(255,0,0,255);
canvas->drawText(char_test, 6, SkFloatToScalar(100), SkFloatToScalar(100), paint);
}将函数改写为上述的形式后，我们用浏览器打开我们写的网页的话，就会发现在屏幕上面已经不会显示“Text！”而是会显示“Hello”至于为什么原来的内容不会显示，我想这个不用再解释了吧。。。
B. 矩形的绘制
void Font::drawGlyphs(GraphicsContext* gc, const SimpleFontData* font,
const GlyphBuffer& glyphBuffer, int from, int numGlyphs,
const FloatPoint& point) const
{
SkPaint paint;
SkCanvas *canvas=gc->platformContext()->recordingCanvas();
SkRect r;
r.set(100,100,200,200);
paint.setFilterBitmap(true);
paint.setARGB(255,0,0,255);
canvas->drawRect(r, paint);
}运行网页，我们就可以看到一个蓝色矩形的出现。
C. 线条的绘制
void Font::drawGlyphs(GraphicsContext* gc, const SimpleFontData* font,
const GlyphBuffer& glyphBuffer, int from, int numGlyphs,
const FloatPoint& point) const
{
SkPaint paint;
SkCanvas *canvas=gc->platformContext()->recordingCanvas();
paint.setFilterBitmap(true);
paint.setARGB(255,0,0,255);
canvas->drawLine(100, 100, 800, 800, paint);
}运行网页，我们可以看到一条蓝色的线条。
D. 三角形的绘制
void Font::drawGlyphs(GraphicsContext* gc, const SimpleFontData* font,
const GlyphBuffer& glyphBuffer, int from, int numGlyphs,
const FloatPoint& point) const
{
SkPaint paint;
SkCanvas *canvas=gc->platformContext()->recordingCanvas();
SkPath *path = new SkPath();
path->moveTo(90,240);
path->lineTo(150,240);
path->lineTo(120,290);
paint.setFilterBitmap(true);
paint.setARGB(255,0,0,255);
canvas->drawPath(*path, paint);
}运行网页，我们就可以看到一个蓝色三角形的出现
E. drawPosText的使用
void Font::drawGlyphs(GraphicsContext* gc, const SimpleFontData* font,
const GlyphBuffer& glyphBuffer, int from, int numGlyphs,
const FloatPoint& point) const
{
SkPaint paint;
SkCanvas *canvas = gc->platformContext()->recordingCanvas();
SkTypeface *font_test = SkTypeface :: CreateFromFile("DroidSans.ttf");
paint.setTypeface(font_test);
paint.setFilterBitmap(true);
paint.setARGB(255,0,0,255);
SkPoint pos[] = {100, 100, 200, 200, 300, 300, 400, 400, 500, 500, 600, 600, 700, 700, 800, 800};
canvas->drawPosText("Hello", 6, pos, paint);
}运行之后的结果大概如下图所示：
H
e
l
l
o
看完这个例子之后，相信对drawPosText的作用是比较清楚地了。当然，Skia有很多接口，这些留做以后去慢慢的分析~