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有很多接口，这些留做以后去慢慢的分析~

更多相关文章

随机推荐