简单介绍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;
}
相关文章
|
18天前
|
数据可视化 图形学 开发者
【Qt 底层机制之图形渲染引擎】深入理解 Qt 的 渲染机制:从基础渲染到高级图形
【Qt 底层机制之图形渲染引擎】深入理解 Qt 的 渲染机制:从基础渲染到高级图形
215 4
|
移动开发 Dart 前端开发
从架构到源码:一文了解Flutter渲染机制
Flutter从本质上来讲还是一个UI框架,它解决的是一套代码在多端渲染的问题。在渲染管线的设计上更加精简,加上自建渲染引擎,相比ReactNative、Weex以及WebView等方案,具有更好的性能体验。本文将从架构和源码的角度详细分析Flutter渲染机制的设计与实现。较长,同学们可收藏后再看。
7167 1
从架构到源码:一文了解Flutter渲染机制
|
前端开发 JavaScript UED
封装库/工具库中重要概念之动画
前端开发中,动画是一个非常重要的技术特性。它可以提升用户体验,增加页面交互性,并且让网站看起来更加生动活泼。然而,在实现复杂动画时,手写代码往往会变得繁琐且容易出错。因此,前端工具库和封装库的出现为我们提供了便利。在本文中,我们将探讨前端中的封装库和工具库以及它们在实现动画效果方面的作用。
79 0
|
Web App开发 算法 Linux
什么是Skia
Skia是一款跨平台的2D图形库,是Google公司开发的,可以用于开发各种应用程序。
什么是Skia
|
开发框架 Android开发 开发者
flutter新引擎impller与skia的区别
flutter新引擎impller与skia的区别
flutter新引擎impller与skia的区别
|
API iOS开发 异构计算
三、OpenGL 渲染架构分析
OpenGL 渲染架构分析
326 0
三、OpenGL 渲染架构分析
|
存储 API Android开发
Skia深入分析
原文出处:http://blog.csdn.net/hgl868/article/details/45583667 一、渲染层级从渲染流程上分,Skia可分为如下三个层级:1、指令层:SkPicture、SkDeferredCanvas->SkCanvas这一层决定需要执行哪些绘图操作,绘图操作的预变换矩阵,当前裁剪区域,绘图操作产生在哪些layer上,Layer的生成与合并。
4392 0
Skia深入分析4——skia路径绘制的实现
Skia路径绘制代码分析 路径绘制尽管使用频率相对于图像绘制、文本绘制低,但却是非常重要的一个基本特性。所有不规则图形(椭圆、圆角矩形、三角形、简单的文字),最后都避不开路径绘制。 而且,若自己实现一个2D引擎,这块内容是很具有参考意义的,用OpenGL的话,图像采样等都很少关注了,对对坐标就好。但菱角、圆弧、曲线等如何绘制仍然是一个难题,这时就可以参考Skia中drawPath的实现
4466 0
|
缓存 Android开发
Skia深入分析5——skia文字绘制的实现
文字绘制主要包括编码转换(主要是中文)、字形解析(点线或image)和实际渲染三个步骤。在这个过程中,字形解析和实际渲染均是耗时步骤。Skia对文字解析的结果做了一套缓存机制。在中文字较多,使用多种字体,绘制的样式(粗/斜体)有变化时,这个缓存会变得很大,因此Skia文字缓存做了内存上的限制。 1、SkPaint 文字绘制与SkPaint的属性相关很大,先回头看下SkPaint相关
6436 0
Flutter 118: 图解特殊利器 ShaderMask 着色器
0 基础学习 Flutter,第一百一十八步:简单了解黑白相册的利器 ShaderMask 着色器!
469 0
Flutter 118: 图解特殊利器 ShaderMask 着色器