简单介绍Skia原理

简介: Skia是一个跨平台的2D图形库。其底层原理包括:画布(Canvas),绘制引擎(Paint Engine),渲染管线(Render Pipeline),影子图片(Skia Pictures),路径(Path)

Skia是一个跨平台的2D图形库,其底层原理包括:


1. 画布(Canvas):Skia中的所有绘制操作都是在画布上完成的,通过Canvas实现。Canvas提供了许多方法来绘制基本的几何图形、文本、位图等。


2. 绘制引擎(Paint Engine):Skia的绘制引擎是其核心部分,它能够解析绘制指令并将其转化为最终的像素数据。绘制引擎采用了一些优化技术,如GPU加速、矢量图形渲染和颜色空间转换等。


3. 渲染管线(Render Pipeline):Skia使用先进的渲染管线来处理绘制命令。该管线由多个阶段组成,包括几何图形剪裁、着色器、纹理映射、混合和蒙版等。


4. 影子图片(Skia Pictures):Skia使用影子图片来存储绘制命令序列,以便实现快速的重复渲染。影子图片是一种轻量级的结构,它只记录了绘制命令,不包含任何像素数据。


5. 路径(Path):Skia中的路径是由一系列线段和曲线组成,可以用于绘制各种形状。路径也可以被用于剪裁、变换和遮罩等操作。


以下是一个简单的Skia代码示例,用于创建并绘制一个红色矩形:

#include"include/core/SkCanvas.h"#include"include/core/SkSurface.h"#include"include/core/SkPaint.h"#include"include/core/SkRect.h"intmain() {
// 创建画布sk_sp<SkSurface>surface=SkSurface::MakeRasterN32Premul(640, 480);
SkCanvas*canvas=surface->getCanvas();
// 绘制矩形SkPaintpaint;
paint.setColor(SK_ColorRED);
SkRectrect=SkRect::MakeXYWH(100, 100, 200, 200);
canvas->drawRect(rect, paint);
// 保存为图片SkImageInfoinfo=surface->imageInfo();
sk_sp<SkData>data(surface->makeImageSnapshot()->encodeToData());
SkFILEWStream("output.png").write(data->data(), data->size());
return0;
}
相关文章
|
移动开发 Dart 前端开发
从架构到源码:一文了解Flutter渲染机制
Flutter从本质上来讲还是一个UI框架,它解决的是一套代码在多端渲染的问题。在渲染管线的设计上更加精简,加上自建渲染引擎,相比ReactNative、Weex以及WebView等方案,具有更好的性能体验。本文将从架构和源码的角度详细分析Flutter渲染机制的设计与实现。较长,同学们可收藏后再看。
7502 1
从架构到源码:一文了解Flutter渲染机制
|
4月前
|
Dart JavaScript Java
flutter 架构、渲染原理、家族
flutter 架构、渲染原理、家族
90 3
|
Web App开发 算法 Linux
什么是Skia
Skia是一款跨平台的2D图形库,是Google公司开发的,可以用于开发各种应用程序。
什么是Skia
|
开发框架 Android开发 开发者
flutter新引擎impller与skia的区别
flutter新引擎impller与skia的区别
flutter新引擎impller与skia的区别
|
存储 API Android开发
Skia深入分析
原文出处:http://blog.csdn.net/hgl868/article/details/45583667 一、渲染层级从渲染流程上分,Skia可分为如下三个层级:1、指令层:SkPicture、SkDeferredCanvas->SkCanvas这一层决定需要执行哪些绘图操作,绘图操作的预变换矩阵,当前裁剪区域,绘图操作产生在哪些layer上,Layer的生成与合并。
4598 0
Skia深入分析4——skia路径绘制的实现
Skia路径绘制代码分析 路径绘制尽管使用频率相对于图像绘制、文本绘制低,但却是非常重要的一个基本特性。所有不规则图形(椭圆、圆角矩形、三角形、简单的文字),最后都避不开路径绘制。 而且,若自己实现一个2D引擎,这块内容是很具有参考意义的,用OpenGL的话,图像采样等都很少关注了,对对坐标就好。但菱角、圆弧、曲线等如何绘制仍然是一个难题,这时就可以参考Skia中drawPath的实现
4683 0
|
缓存 Android开发
Skia深入分析5——skia文字绘制的实现
文字绘制主要包括编码转换(主要是中文)、字形解析(点线或image)和实际渲染三个步骤。在这个过程中,字形解析和实际渲染均是耗时步骤。Skia对文字解析的结果做了一套缓存机制。在中文字较多,使用多种字体,绘制的样式(粗/斜体)有变化时,这个缓存会变得很大,因此Skia文字缓存做了内存上的限制。 1、SkPaint 文字绘制与SkPaint的属性相关很大,先回头看下SkPaint相关
6795 0
|
API iOS开发 异构计算
三、OpenGL 渲染架构分析
OpenGL 渲染架构分析
368 0
三、OpenGL 渲染架构分析
Flutter 118: 图解特殊利器 ShaderMask 着色器
0 基础学习 Flutter,第一百一十八步:简单了解黑白相册的利器 ShaderMask 着色器!
520 0
Flutter 118: 图解特殊利器 ShaderMask 着色器
|
Dart JavaScript 前端开发
深入分析 Flutter 渲染性能
Flutter 有很多优点,特别是对于开发者来说,跨平台多端支持,丰富的 UI 组件库和交互效果,声明式 UI,React 的更新方式,Hot-reload 提高开发效率等等。虽然它在渲染性能上有不少缺陷,但是某种程度上,某些缺陷也是为了实现更高层次的设计目标而不得不承受的结果。
深入分析 Flutter 渲染性能