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

基础组件

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的高度和宽度,多数没有绘制出想要的都是因为渲染区域定义问题

运行结果图示


参考:
原文链接:https://www.f2er.com/react/305601.html

猜你在找的React相关文章