最近要Rn的项目要使用到绘图，但是网上关于Rn绘图的文章还是比较少而且讲的不全，所以只好自己研究一下了。

react native中的绘图api在art包中，先看看art包中都有哪些东西：

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

ReactNativeART.js导出的对象，也是我们绘图中可以使用的组件

art包的基本使用

Surface：
相当于画板组件，其他的组件要包括在Surface中: 例如

下面的代码截取可能会没有Surface,要注意区分

Path:

表示一个绘制路径基本上和java中的path是一样的

用画圆弧举个栗子：

arc: function(x, y, rx, ry, outer, counterClockwise, rotation){
   return this.arcTo(this.penX + (+x), this.penY + (+y), rx, ry, outer, counterClockwise, rotation);
},

arc和arcTo的区别是arc使用的是相对坐标 arcTo使用的是绝对坐标

x y 终点的位置起点就是path的当前点
rx ry x轴 y轴的半径
outer：不知道是什么鬼外接矩形？
counterClockwise: 逆时针 true/fase
rotation:旋转角度

let pathCircle= new Path()
    .moveTo(50,50)
    .arc(0,99,25,25,true,false)
    .close();

表示终点的坐标相对于起点是x=0 y=99 半径是25 顺时针绘制

Shape:

shape主要负责path的绘制

shape中可以使用的属性如下:

class Shape extends React.Component {
  render() {
    var props = this.props;
    var path = props.d || childrenAsString(props.children);
    var d = new Path(path).toJSON();
    return (
      
    );
  }
}

fill:填充的颜色
stroke:线条颜色
strokeCap 线条端点的形状：

function extractStrokeCap(strokeCap) {
  switch (strokeCap) {
    case 'butt': return 0;
    case 'square': return 2;
    default: return 1; // round
  }
}

有三个值可以用 butt square round 默认是round

strokeDash:虚线绘制；[10,5] 表示画10长度的实线 5长度的空白
strokeJoin:线条连接处的形状

function extractStrokeJoin(strokeJoin) {
  switch (strokeJoin) {
    case 'miter': return 0;
    case 'bevel': return 2;
    default: return 1; // round
  }
}

有三个值可以选

d：要绘制的path

Transform:
变换
具体的属性如下

function extractTransform(props) {

//x y的缩放
  var scaleX = props.scaleX != null ? props.scaleX :
               props.scale != null ? props.scale : 1;
  var scaleY = props.scaleY != null ? props.scaleY :
               props.scale != null ? props.scale : 1;
／／移动  旋转 缩放等
  pooledTransform
    .transformTo(1, 0, 0, 1, 0, 0)
    .move(props.x || 0, props.y || 0)
    .rotate(props.rotation || 0, props.originX, props.originY)
    .scale(scaleX, scaleY, props.originX, props.originY);

／／也可以通过设置transform来指定变换操作
  if (props.transform != null) {
    pooledTransform.transform(props.transform);
  }

  return [
    pooledTransform.xx, pooledTransform.yx,
    pooledTransform.xy, pooledTransform.yy,
    pooledTransform.x,  pooledTransform.y,
  ];
}

so 我们可以这样用

let trans=new Transform();

trans.rotate(90);

位移(120,60) 旋转90度

Text组件也差不多的这里就不多说了

Group：
可以用Group来包括多个画图组件

java层的实现

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',
});

Surface Group Text Shape都对应一个ViewManager、先看看ARTSurfaceView

public class ARTSurfaceView extends TextureView

ARTSurfaceView继承了TextureView

TextureView是个和SurfaceView差不多的东西 , 和TextView无关

TextureView的回调接口是

private SurfaceTextureListener mListener;

SurfaceTexture准备好了改变大小都会回调接口方法

当SurfaceTexture准备好的时候我们就可以开始绘制了

public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height);

public class ARTSurfaceViewManager extends
    BaseViewManager {

  @Override
  public void updateExtraData(ARTSurfaceView root, Object extraData) {
    root.setSurfaceTextureListener((ARTSurfaceViewShadowNode) extraData);
  }
}

设置的回调是ARTSurfaceViewShadowNode

看看ARTSurfaceViewShadowNode是怎么绘制的

@Override
public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
  mSurface = new Surface(surface);
  drawOutput();
}

drawOutput:

private void drawOutput() {
  if (mSurface == null || !mSurface.isValid()) {
    markChildrenUpdatesSeen(this);
    return;
  }

  try {
//获取canvas对象
    Canvas canvas = mSurface.lockCanvas(null);
    canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

    Paint paint = new Paint();
／／绘制子node
    for (int i = 0; i < getChildCount(); i++) {
      ARTVirtualNode child = (ARTVirtualNode) getChildAt(i);
      child.draw(canvas, paint, 1f);
      child.markUpdateSeen();
    }

    if (mSurface == null) {
      return;
    }

    mSurface.unlockCanvasAndPost(canvas);
  } catch (IllegalArgumentException | IllegalStateException e) {
    FLog.e(ReactConstants.TAG, e.getClass().getSimpleName() + " in Surface.unlockCanvasAndPost");
  }
}

可以看到具体的绘制操作由子node ARTVirtualNode去完成

Group Text Shape对应的viewmanager都是ARTRenderableViewManager

只是传入的classname参数不一样

public class ARTTextViewManager extends ARTRenderableViewManager {

  /* package */ ARTTextViewManager() {
    super(CLASS_TEXT);
  }
}

@Override
protected View createViewInstance(ThemedReactContext reactContext) {
  throw new IllegalStateException("ARTShape does not map into a native view");
}

在createViewInstance方法中并没有具体实现表示ARTRenderableViewManager包含的并不是一个真正的view而是一个可绘制对象RenderableView

而这个可绘制的对象就是ReactShadowNode 返回的是ARTVirtualNode实现

@Override
public ReactShadowNode createShadowNodeInstance() {
  if (CLASS_GROUP.equals(mClassName)) {
    return new ARTGroupShadowNode();
  } else if (CLASS_SHAPE.equals(mClassName)) {
    return new ARTShapeShadowNode();
  } else if (CLASS_TEXT.equals(mClassName)) {
    return new ARTTextShadowNode();
  } else {
    throw new IllegalStateException("Unexpected type " + mClassName);
  }
}

根据classname去返回不同的ARTVirtualNode

classname有三个：

static final String CLASS_GROUP = "ARTGroup";
/* package */ static final String CLASS_SHAPE = "ARTShape";
/* package */ static final String CLASS_TEXT = "ARTText";

ARTVirtualNode中有一个draw方法来实现具体绘制

也就是说在js层的shape text group 都分别对应了java层一个ARTVirtualNode

以ARTShapeShadowNode为例:

@Override
public void draw(Canvas canvas, Paint paint, float opacity) {
  opacity *= mOpacity;
  if (opacity > MIN_OPACITY_FOR_DRAW) {
    saveAndSetupCanvas(canvas);
    if (mPath == null) {
      throw new JSApplicationIllegalArgumentException(
          "Shapes should have a valid path (d) prop");
    }
    if (setupFillPaint(paint, opacity)) {
      canvas.drawPath(mPath, paint);
    }
    if (setupStrokePaint(paint, opacity)) {
      canvas.drawPath(mPath, paint);
    }
    restoreCanvas(canvas);
  }
  markUpdateSeen();
}

主要是drawPath path就是通过中的d参数传入的path转换得出

@ReactProp(name = "d")
public void setShapePath(@Nullable ReadableArray shapePath) {
//把ReadableArray转成float[]
  float[] pathData = PropHelper.toFloatArray(shapePath);
  mPath = createPath(pathData);
  markUpdated();
}

shapePath在js层中就是SerializablePath中的path数组对象
onMove: function(sx, sy, x, y) {
  this.path.push(MOVE_TO, x, y);
},

path数组对象保存了要对path的操作类型参数

java中解析SerializablePath.path中保存的操作，基本上就是读取type 接着读取后面的参数支持的操作类型有 moveto close lineto curveto arcto

private Path createPath(float[] data) {
    Path path = new Path();
    path.moveTo(0, 0);
    int i = 0;
    while (i < data.length) {
      int type = (int) data[i++];
      switch (type) {
        case PATH_TYPE_MOVETO:
          path.moveTo(data[i++] * mScale, data[i++] * mScale);
          break;
        case PATH_TYPE_CLOSE:
          path.close();
          break;
        case PATH_TYPE_LINETO:
          path.lineTo(data[i++] * mScale, data[i++] * mScale);
          break;
        case PATH_TYPE_CURVETO:
          path.cubicTo(
              data[i++] * mScale,
              data[i++] * mScale,
              data[i++] * mScale,
              data[i++] * mScale,
              data[i++] * mScale,
              data[i++] * mScale);
          break;
        case PATH_TYPE_ARC:
        {
          float x = data[i++] * mScale;
          float y = data[i++] * mScale;
          float r = data[i++] * mScale;
          float start = (float) Math.toDegrees(data[i++]);
          float end = (float) Math.toDegrees(data[i++]);

          boolean clockwise = data[i++] == 1f;
          float sweep = end - start;
          if (Math.abs(sweep) > 360) {
            sweep = 360;
          } else {
            sweep = modulus(sweep, 360);
          }
          if (!clockwise && sweep < 360) {
            start = end;
            sweep = 360 - sweep;
          }

          RectF oval = new RectF(x - r, y - r, x + r, y + r);
          path.arcTo(oval, start, sweep);
          break;
        }
        default:
          throw new JSApplicationIllegalArgumentException(
              "Unrecognized drawing instruction " + type);
      }
    }
    return path;
  }
}

但是我们看js中提供的Path的arc方法

arc: function(x, y, rx, ry, outer, counterClockwise, rotation)

它没有直接使用java中Path. addArc的方法参数，而是改成使用终点坐标和起点坐标经过计算画圆弧的方式这样我们如果要画扇形就比较蛋疼了～～

public void addArc(float left, float top, float right, float bottom, float startAngle,
        float sweepAngle) {

为了方便画扇形我们可以修改js层的SerializablePath

arcTo( x,  y,  r,  start,  end,
       ccw){
    this.base.path.push(Method.ARC, x, y, r, start, end, ccw ? 0 : 1);

    return this;
}

直接往path数组对象中push参数就可以了

到这里已经完全清楚js层是如何实现画图操作的了

image.png

art包的扩展

通过上面的了解我们可以知道art中只提供了path text的绘制，而在android中我们可以通过canvas去绘制一些图形这样比较方便

现在我们要吧canvas的绘制方法也开放给js层使用

上面我们知道绘制操作是通过shadow node 调用子node的draw方法完成所以要扩展绘图api 只要自定义一个ARTVirtualNode就可以了

public class CanvasViewManager extends ViewManager 

public class CanvasNode extends ARTVirtualNode

具体实现篇幅有点长所以就不贴在这里了，感兴趣的朋友可以直接看demo

最后用Canvas的api去绘制一个简单的进度条意思一下～

 let circle=new Canvas();

 circle.setPaintStyle(Paint.Style.FILL);

 circle.setPaintColor("#088000");

 let angle=this.state.progress/100 * 360;

 circle.drawArc(0,0,400,400,0,angle,true);

 circle.setPaintColor("#E5E5E5");

 circle.drawCircle(200,200,100);

 circle.setPaintColor("#088000");

 circle.setPaintTextSize(49);

 let text=this.state.progress+"%";

 circle.drawText(text,0,text.length,200,200);

test.gif

平时比较少写文章，描述的不太清楚的，见谅，见谅～～
demo:https://github.com/shen-will/RnCanvas

关于ReactNative绘图,你应该知道的东西

art包的基本使用

java层的实现

art包的扩展

你可能感兴趣的:(关于ReactNative绘图,你应该知道的东西)