Android webkit webkit中skia的使用方法简析

最新推荐文章于 2024-05-08 16:45:57 发布

猿氏悟语

最新推荐文章于 2024-05-08 16:45:57 发布

阅读量2.6k

点赞数

分类专栏：浏览器开发详解文章标签： android webkit android skia webkit中skia的使用 skia api android render text

本文链接：https://blog.csdn.net/ChaoY1116/article/details/17362839

版权

浏览器开发详解专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

猿氏悟语

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
7
评论
Android webkit webkit中skia的使用方法简析

做webkit已经有两年的时间了，但是做的时间越长越能感觉到自己的瓶颈在什么地方。可能每一个做webkit的人都避不开一些图形库，因为webkit说到底只是一个渲染排版引擎。而真正去将一个网页show出来的话，免不了一些第三方图形库的支持。所以最近就结合webkit，分析一些skia的使用。
复制链接

扫一扫