2. 程式人生 > >react-native-art path程式碼解析

react-native-art path程式碼解析

阿新 • • 發佈：2019-02-11

React-Native-ART程式碼解析

一、探尋原始碼

1.如何使用

安卓自己整合，不需要額外操作，iOS需要pod新增ART庫，如下：

pod 'React', :path => '../rn-source', :subspecs => [  
    'Core',  
    'RCTActionSheet',  
    'RCTText',  
    'RCTImage',  
    'ART',  
    # needed for debugging  
    # Add any other subspecs you want to use in your project  
 

    ]

2.js中的使用

import { ART } from 'react-native'
const { Surface, Shape, Path, Group } = ART;

這樣我們就能夠使用ART的元件，總共有10個。部分元件的具體使用方法可以參考我之前寫的。

3.尋找ART的原始碼

首先我們知道ART是在react-native 中引用的，所以我們到node_modules下找到react-native 資料夾，如圖：
react-native目錄
到這裡，我們首先要看一下package.json 檔案，這是react-native 所用的元件列表，如圖：
package.json
我們可以看到react-native引用了一個庫叫做art，但這裡是小寫的，應該是ART所用的依賴，還不確定是我們要找到ART庫在哪裡，我們繼續找。
接下來，我們來看看Libraries資料夾，這裡通常放著元件，這裡我們看到了大寫的ART，如圖：
ReactNativeArt


在這裡我們可以看到大多都是原生程式碼，在ReactNativeART.js中export出了一個元件ReactART，這個是我們要找的ART嗎？，現在還不能確定。
我們繼續看，在Libraries下我們找到react-native資料夾，可以看到react-native.js就靜靜的躺在這裡，這個應該就是整個react-native元件的入口位置，在這裡我們看到：

get ART() { return require('ReactNativeART'); },

現在，我們可以確定ReactNativeART就是我們要找的ART。

二、ART庫原始碼

讓我們回過頭來看看ReactNativeART的入口檔案（也就是Libraries下的ART資料夾下的 ReactNativeART.js），拉到下面我們可以看到：

var ReactART = {
  LinearGradient: LinearGradient,
  RadialGradient: RadialGradient,
  Pattern: Pattern,
  Transform: Transform,
  Path: Path,
  Surface: Surface,
  Group: Group,
  ClippingRectangle: ClippingRectangle,
  Shape: Shape,
  Text: Text,
};

這個就是ART庫輸出的所有元件了，我們就可以從這裡開始閱讀程式碼，我們可以看到：

var Path = require('ARTSerializablePath');
var Transform = require('art/core/transform');
// Native Components

var NativeSurfaceView = createReactNativeComponentClass({
  validAttributes: SurfaceViewAttributes,
  uiViewClassName: 'ARTSurfaceView',
});

var NativeGroup = createReactNativeComponentClass({
  validAttributes: GroupAttributes,
  uiViewClassName: 'ARTGroup',
});

var NativeShape = createReactNativeComponentClass({
  validAttributes: ShapeAttributes,
  uiViewClassName: 'ARTShape',
});

var NativeText = createReactNativeComponentClass({
  validAttributes: TextAttributes,
  uiViewClassName: 'ARTText',
});
function LinearGradient  ...
function RadialGradient  ...
function Pattern  ...
class ClippingRectangle extends React.Component {
  render() {
    var props = this.props;
    var x = extractNumber(props.x, 0);
    var y = extractNumber(props.y, 0);
    var w = extractNumber(props.width, 0);
    var h = extractNumber(props.height, 0);
    var clipping = [x, y, w, h];
    // The current clipping API requires x and y to be ignored in the transform
    var propsExcludingXAndY = merge(props);
    delete propsExcludingXAndY.x;
    delete propsExcludingXAndY.y;
    return (
      <NativeGroup
        clipping={clipping}
        opacity={extractOpacity(props)}
        transform={extractTransform(propsExcludingXAndY)}>
        {this.props.children}
      </NativeGroup>
    );
  }
}

可以看到，輸出的10個元件這裡都能看到出處，那到這裡，其實我們關心那部分程式碼，就可以具體看哪裡了，原始碼在這裡其實已經暴露無疑了。

這部分的結論：

  1. surface，shape，group，text都是原生元件，
  2. ClippingRectangle是封裝的一層group，
  3. LinearGradient，RadialGradient，Pattern分別是3個func，
  4. 而path和Transform則是引用的art檔案，在上面我們已經看到了react-native的package.json引用了art元件。

三、ART裡的path原始碼

上面我們看到

var Path = require('ARTSerializablePath');

在ARTSerializablePath.js中，我們又能看到

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule ARTSerializablePath
 */
'use strict';

// TODO: Move this into an ART mode called "serialized" or something

var Class = require('art/core/class.js');
var Path = require('art/core/path.js');

var MOVE_TO = 0;
var CLOSE = 1;
var LINE_TO = 2;
var CURVE_TO = 3;
var ARC = 4;

var SerializablePath = Class(Path, {

  initialize: function(path) {
    this.reset();
    if (path instanceof SerializablePath) {
      this.path = path.path.slice(0);
    } else if (path) {
      if (path.applyToPath) {
        path.applyToPath(this);
      } else {
        this.push(path);
      }
    }
  },

  onReset: function() {
    this.path = [];
  },

  onMove: function(sx, sy, x, y) {
    this.path.push(MOVE_TO, x, y);
  },

  onLine: function(sx, sy, x, y) {
    this.path.push(LINE_TO, x, y);
  },

  onBezierCurve: function(sx, sy, p1x, p1y, p2x, p2y, x, y) {
    this.path.push(CURVE_TO, p1x, p1y, p2x, p2y, x, y);
  },

  _arcToBezier: Path.prototype.onArc,

  onArc: function(sx, sy, ex, ey, cx, cy, rx, ry, sa, ea, ccw, rotation) {
    if (rx !== ry || rotation) {
      return this._arcToBezier(
        sx, sy, ex, ey, cx, cy, rx, ry, sa, ea, ccw, rotation
      );
    }
    this.path.push(ARC, cx, cy, rx, sa, ea, ccw ? 0 : 1);
  },

  onClose: function() {
    this.path.push(CLOSE);
  },

  toJSON: function() {
    return this.path;
  }

});

module.exports = SerializablePath;

說明我們的path直接就使用的art/core/path.js 檔案，而看這裡的實現，全部使用的是this.path.push()+引數的方法，我們接下來去看下art/core/path.js 的push方法，如下：

push: function(){
        var p = Array.prototype.join.call(arguments, ' ')
            .match(/[a-df-z]|[\-+]?(?:[\d\.]e[\-+]?|[^\s\-+,a-z])+/ig);
        if (!p) return this;

        var last, cmd = p[0], i = 1;
        while (cmd){
            switch (cmd){
                case 'm': this.move(p[i++], p[i++]); break;
                case 'l': this.line(p[i++], p[i++]); break;
                case 'c': this.curve(p[i++], p[i++], p[i++], p[i++], p[i++], p[i++]); break;
                case 's': this.curve(p[i++], p[i++], null, null, p[i++], p[i++]); break;
                case 'q': this.curve(p[i++], p[i++], p[i++], p[i++]); break;
                case 't': this.curve(p[i++], p[i++]); break;
                case 'a': this.arc(p[i+5], p[i+6], p[i], p[i+1], p[i+3], !+p[i+4], p[i+2]); i += 7; break;
                case 'h': this.line(p[i++], 0); break;
                case 'v': this.line(0, p[i++]); break;

                case 'M': this.moveTo(p[i++], p[i++]); break;
                case 'L': this.lineTo(p[i++], p[i++]); break;
                case 'C': this.curveTo(p[i++], p[i++], p[i++], p[i++], p[i++], p[i++]); break;
                case 'S': this.curveTo(p[i++], p[i++], null, null, p[i++], p[i++]); break;
                case 'Q': this.curveTo(p[i++], p[i++], p[i++], p[i++]); break;
                case 'T': this.curveTo(p[i++], p[i++]); break;
                case 'A': this.arcTo(p[i+5], p[i+6], p[i], p[i+1], p[i+3], !+p[i+4], p[i+2]); i += 7; break;
                case 'H': this.lineTo(p[i++], this.penY); break;
                case 'V': this.lineTo(this.penX, p[i++]); break;

                case 'Z': case 'z': this.close(); break;
                default: cmd = last; i--; continue;
            }

            last = cmd;
            if (last == 'm') last = 'l';
            else if (last == 'M') last = 'L';
            cmd = p[i++];
        }
        return this;
    },

可以看到svg的方法，說明我們其實是可以直接使用push做svg的實現的，

命令 名稱 引數
M moveto 移動到 (x y)+
Z closepath 關閉路徑 (none)
L lineto 畫線到 (x y)+
H horizontal lineto 水平線到 x+
V vertical lineto 垂直線到 y+
C curveto 三次貝塞爾曲線到 (x1 y1 x2 y2 x y)+
S smooth curveto 光滑三次貝塞爾曲線到 (x2 y2 x y)+
Q quadratic Bézier curveto 二次貝塞爾曲線到 (x1 y1 x y)+
T smooth quadratic Bézier curveto 光滑二次貝塞爾曲線到 (x y)+
A elliptical arc 橢圓弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R Catmull-Rom curveto* Catmull-Rom曲線 x1 y1 (x y)+

其實這裡我有個疑慮，並不瞭解ARTSerializablePath.js 中呼叫push的原理，貌似指定了0-4的引數，

var MOVE_TO = 0;
var CLOSE = 1;
var LINE_TO = 2;
var CURVE_TO = 3;
var ARC = 4;

就可以呼叫相應的方法函式，還望看的懂的同學說明一下，
這裡我們發現ART是可以使用SVG函式的，所以SVG的能力，我們在這裡可以直接使用，比如畫內塞爾曲線等等，例如：

_path = new Path("M0 0 Q5 20……");

四、Android與iOS使用ART的不同

  1. 漸變色（安卓不能漸變）
  2. 畫扇形圖（安卓繪製方式不同）

這裡說一下畫扇形，iOS直接使用ART提供的path根據我之前寫的使用方法就可以畫出來想要的圖案，但是安卓卻不能，這裡可以使用更底層的push方法代替，例如畫扇形：

if (Platform.OS === 'ios') {
path.move(or + or * ss, or - or * sc). // move to starting point
arc(or * ds, or * -dc, or, or, large). // outer arc
line(dr * es, dr * -ec); // width of arc or wedge
} else {
path.path.push(ARC, CIRCLE_X, CIRCLE_Y, RX, startAngle / 360 * TwoPI, (startAngle / 360 * TwoPI) - ((endAngle - startAngle) / 360 * TwoPI), 0)
}

通過區分平臺，再具體實現上使用不同的方法，達到相同的效果。

相關推薦

react-native-art path程式碼解析

React-Native-ART程式碼解析 一、探尋原始碼 1.如何使用 安卓自己整合，不需要額外操作，iOS需要pod新增ART庫，如下： pod 'React', :path => '../rn-source', :subspecs =

react-native-ART-繪圖

Android預設就包含ART庫，IOS需要單獨新增依賴庫。(新增依賴的方法百度一下哦) 這裡主要是我自己做的筆記，把別人的程式碼都跑了一遍而已 基礎元件 ART暴露的元件有7個，這篇用到的有五個。先介紹即將用到的四個元件，之後在介紹另外三個。  Surface -

React-Native ART 繪圖簡析

剛建立的React Native 微信公眾號，歡迎微信掃描關注訂閱號，每天定期會分享react native 技術文章，移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入交流

react-native-art畫二次貝塞爾曲線實現

1、關於react-native ART庫的使用，目前網上能搜到的少之又少，簡書上的一篇react-native-art 繪圖入門，從基本上講解了一下react-native-art的使用方法，但是隻是簡單的橫豎曲線的繪製，但專案中有一個需求就是繪製網速的速率曲線， （專案

react-native-Art動畫基礎

一：基礎： ART：暴露了七個元件： ● Surface - 一個矩形可渲染的區域，是其他元素的容器！ ● Group - 可容納多個形狀、文字和其他的分組 ● Shape - 形狀定義，可填充 ● Text - 文字形狀定義 pro

react-native 啟動流程原理解析

前言 專案中用到RN也有一段時間了， 從剛開始的懵懂到現在的熟能生巧，其實還是很長的，每次接觸一個新的東西的時候，剛開始一定是比較痛苦的，不知道要如何下手，這裡從js到Android原生去一步步解析React Native是如何做到如此巧妙的通訊的。希望能

React-Native上拉重新整理下拉載入，點選跳轉詳情程式碼解析

React-Native 上拉重新整理下拉載入，點選跳轉詳情程式碼解析 配置路由器 import { createTabNavigator, createStackNavigator } from "react-navigation"; import New1

React Native 中為IOS和Android設定不同的Style樣式,一套程式碼解決雙端顯示

React Native 開發中，大多數的元件都是IOS和Android通用的，包括大量的功能性程式碼，至少有80%以上的程式碼可以複用，而剩下的一些元件樣式/少量的程式碼會需要區分雙端，但是為了這少量的程式碼把IOS和Android完全區分這明顯不合適，程式碼複用性下降，程式碼維護量上升

react-native-pg-style使用方法(以最簡單的方式編寫樣式程式碼,拋棄react-native標準的樣式建立方式.)

react-native-pg-style 以最簡單的方式編寫樣式程式碼,拋棄react-native標準的樣式建立方式. 看大家寫的原始碼中都是按照react-native標準的樣式建立方式來寫樣式程式碼的,樣式程式碼就佔了大概四分之一,甚至三分之一的程式

React Native 一個小專案其中一些主要功能實現 （頂部導航欄（可滑動）,網路解析，上拉重新整理，下拉載入）

//網路解析 import React, { Component } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import RefreshListView, { Re

react-native-android-unity（二）建立unity專案，並匯出為android程式碼包，嵌入android專案中

1.建立unity專案 給Main Camera新增指令碼Android，使用C#開發，指令碼內容如下： using System.Collections;
using System.Colle

React Native 程式碼規範自動格式化 eslint+prettier

在多人開發的過程中，保持程式碼的規範格式化很重要，有時候每個人開發習慣不同格式各種各樣看著很難受，因此我們這裡使用eslint+prettier來做自動格式化，可能做前端的同學對這兩個工具很熟悉。 下面介紹一下在WebStorm的環境裡怎麼配置這些外掛 es

React Native執行原理解析

Facebook 於2015年9月15日推出react native for Android 版本， 加上2014年底已經開源的IOS版本，至此RN （react-native）真正成為跨平臺的客戶端框架。本篇主要是從分析程式碼入手，探討一下RN在安卓平臺上是如何構建一套JS

React Native 程式碼片段

一. Upload Image – fetch export function postData (url, params, fileURL) { let data = new Fo

React-Native螢幕適配之ImageView的應用解析

前言 對於移動裝置來講，螢幕適配是必不可少的一個工作，但是對於Android和IOS兩個平臺，圖片適配各不相同，那麼在React Native中又是如何應用的呢？ Native適配方案 這裡我們先說一下Android和IOS兩大平臺如何進行圖片適配的。

react-native系列(4)入門篇：在VSCode中配置ESLint(程式碼檢測工具)

ESLint是一套javascript程式碼檢測工具。要記住，程式碼也是寫給人看的，所以一定要注意程式碼的編寫規範。ESLint可以根據自己設定的規則實現對程式碼的檢測，從而規範了程式碼的風格。本篇內容主要介紹如何在VSCode中使用ESLint。 ESLint的官網地址是：https://

react-native系列(3)入門篇：使用VSCode及除錯程式碼(debug)

VSCode是一款程式碼編輯器，是微軟的產品，這款編輯器非常受歡迎的一個原因是它支援很多外掛，當然也包括RN開發的外掛。VSCode的下載頁是：https://code.visualstudio.com/，直接下載安裝即可。 安裝好後，可以通過 ' Open Folder ' 選項

React Native呼叫Android原生程式碼實現車牌識別功能【附效果圖附原始碼】

        這段時間研究了下React Native，Facebook推出的，結合了Web應用和Native應用的優勢，可以使用JavaScript來開發iOS和Android原生應用，決定簡單研究下，於是開始搭建環境，編寫HelloWorld，完成後又覺得HelloWo

React Native自定義外掛,呼叫android原生程式碼

Hi,寶寶們,我又來了,16有你,17前行,18怎麼辦?18讓我們一起學習RN吧,hybrid現在是一個前沿,雖然官網說Learn once, write anywhere~~~ 僅需學習一次，編寫任何平臺。但是你不能指望它幹任何事啊，android原生的很多功能還是無法直接使用的，這個時

［React-native］第一行程式碼Helloworld及整合已有專案的方案

一、參考官方文件點選開啟連結寫了第一個文件hello world 程式碼如下： 初始化一個專案HelloWorld，進入Helloworld資料夾，執行命令： react-native init HelloWorld 得到資料夾中檔案： 修改index.android.