react-native-art-绘图入门

前端之家收集整理的这篇文章主要介绍了react-native-art-绘图入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample

.a文件 定义
所谓静态链接是指把要调用函数或者过程链接到可执行文件中,成为可执行文件的一部分。当多个程序都调用相同函数时,内存中就会存在这个函数的多个拷贝,这样就浪费了宝贵的内存资源。.so文件是共享库文件(动态链接)。动态链接调用函数代码并没有被拷贝到应用程序的可执行文件中去,而是仅仅在其中加入了所调用函数的描述信息(往往是一些重定位信息),仅当应用程序被装入内存开始运行时,在操作系统的管理下,才在应用程序与相应的.so之间建立链接关系。
.a文件是多个.o文件的组合。.o文件就是对象文件,里面包含的内容就是01这样的机器可执行的指令,当程序要执行时还需要进行链接(link).链接就是把多个.o文件链成一个可执行文件

添加依赖

Android默认就包含ART库,IOS需要单独添加依赖库。

  1. 右键点击项目 -> ‘Add Files to ProjectName -> 选择 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
  2. 将 libART.a 添加到 Linked Frameworks and Libraries
  3. @H_502_24@

    基础组件

    ART暴露的组件有7个,这篇用到的有五个。先介绍即将用到的四个组件,之后在介绍另外三个。

    • Surface - 一个矩形可渲染的区域,是其他元素的容器!
    • Group - 可容纳多个形状、文本和其他的分组
    • Shape - 形状定义,可填充
    • Text - 文本形状定义

    props

    • Surface
      • width : 渲染区域的宽
      • height : 定义渲染区域的高
    • Shape
      • d : 定义绘制路径
      • stroke : 描边颜色
      • strokeWidth : 描边宽度
      • strokeDash : 定义虚线
      • fill : 填充颜色
    • Text
      • funt : 字体样式,定义字体、大小、是否加粗 如: bold 35px Heiti SC
    • Path
      • moveTo(x,y) : 移动到坐标(x,y)
      • lineTo(x,y) : 连线到(x,y)
      • arc() : 绘制弧线
      • close() : 封闭空间

    绘制直线

    了解Path的moveTo和LineTo的使用,注意Surface的高度和宽度,多数没有绘制出想要的都是因为渲染区域定义问题

    运行结果图示


    参考:

猜你在找的React相关文章