跨端自渲染绘制的实践与探索

• 跨端自渲染的初衷
• 自渲染方案初步探索
• 自渲染方案进化之旅
• 自渲染新方案
• 优化：层叠上下文与绘制规范的融合
• 结语

/ ShadowTree.cpp // RN 的提交阶段CommitStatus ShadowTree::tryCommit( // 提交挂载方法    const ShadowTreeCommitTransaction &transaction,    const CommitOptions &commitOptions) const {  // ...  auto newRootShadowNode = transaction(*oldRevision.rootShadowNode); // RN根据状态生成新树  // ...  newRootShadowNode->layoutIfNeeded(&affectedLayoutableNodes); // RN布局计算  // ...  newRevision = ShadowTreeRevision{        std::move(newRootShadowNode), newRevisionNumber, telemetry}; // 新的版本  // ...  auto rootView = newRevision.rootShadowNode; // 拿到根节点  rootView->crossPaintRoot(); // 走我们自绘路径  // ...  // mount(std::move(newRevision), commitOptions.mountSynchronously); // RN原来的挂载逻辑  return CommitStatus::Succeeded;}
// SkiaSurfaceView.cpp// 自己的显示类，Java 侧创建 Surface 之后传递其引用 id 到 自己封装的 SkiaSurfaceView c++ 类中class SkiaSurfaceView {  void render(ANativeWindow *nativeWindow, int width, int height, float density);  // 初步静态赋值  static ANativeWindow *nativeWindow;  static int width, height;  static float density;};
// LayoutableShadowNode.cpp// 创建绘制区域 SkBitmap，拿到 SkCanvas 对象来递归绘制void LayoutableShadowNode::crossPaintStart() const {  auto layoutMetrics = getLayoutMetrics();  Point offset = layoutMetrics.frame.origin;  Size size = layoutMetrics.frame.size;
  ANativeWindow_acquire(SkiaSurfaceView::nativeWindow);  // 通用的 NativeWindow 上屏显示逻辑  ANativeWindow_setBuffersGeometry(SkiaSurfaceView::nativeWindow,SkiaSurfaceView::width,SkiaSurfaceView::height,WINDOW_FORMAT_RGBA_8888); // 设置窗口缓冲区的几何属性  auto *buffer = new ANativeWindow_Buffer();  SkBitmap bitmap;  SkImageInfo image_info = SkImageInfo::MakeS32(buffer->width, buffer->height, SkAlphaType::kPremul_SkAlphaType);  bitmap.setInfo(image_info, buffer->stride * 4);  bitmap.setPixels(buffer->bits);  SkCanvas skCanvas{bitmap};  SkPaint skPaint;  skCanvas.clear(SK_ColorWHITE);
  for (auto &child : getChildren()) {    visitViewTree(1, *child, skCanvas, skPaint); // 调用节点绘制  }
  // 解锁并提交绘图结果上屏 ANativeWindow_unlockAndPost(SkiaSurfaceView::nativeWindow);  ANativeWindow_release(SkiaSurfaceView::nativeWindow);};
// 遍历树节点去调用 crossPaint 方法void visitViewTree(int index, ShadowNode const &shadowNode, SkCanvas &canvas, SkPaint &paint) {  shadowNode.crossPaint(canvas, paint); // 一次性遍历绘制树结构  index++;  for (auto &child : shadowNode.getChildren()) {    visitViewTree(index, *child, canvas, paint);  }}
// ViewShadowNode.cpp// 具体节点操作，这里绘制背景、边框等void ViewShadowNode::crossPaint(SkCanvas &canvas, SkPaint &paint) const {  // color  const SharedColor &backgroundColor = getConcreteProps().backgroundColor;  // border  const CascadedBorderColors &borderColors = getConcreteProps().borderColors;  const CascadedBorderRadii &borderRadii = getConcreteProps().borderRadii;  const CascadedBorderStyles &borderStyles = getConcreteProps().borderStyles;
  float density = SkiaSurfaceView::density; // 考虑屏幕密度  auto layoutMetrics = getLayoutMetrics();
// 计算目标的位置和宽高  Point offset = layoutMetrics.frame.origin;  offset = {offset.x * density, offset.y * density};  Size size = layoutMetrics.frame.size;  size = {size.width * density, size.height * density};  paint.setAntiAlias(true);  // ...  const SkRect &rect = SkRect::MakeXYWH(offset.x, offset.y, size.width, size.height);  canvas.translate(offset.x, offset.y);
  // 先处理 border  if (borderColors.all.has_value() && borderStyles.all.has_value()) {    float cornerRadius = borderRadii.all ? *borderRadii.all : 0;    auto borderWidth = layoutMetrics.borderWidth.top * density;    paint.setStrokeWidth(borderWidth); // default    auto bStyle = *borderStyles.all;    switch (bStyle) {      case BorderStyle::Dotted:        paint.setStyle(SkPaint::kStroke_Style);        break;      // ...    }    const SkRRect &rRect =        SkRRect::MakeRectXY(rect, cornerRadius, cornerRadius);    canvas.drawRRect(rRect, paint);    // ...  }  // 再处理 background  if (backgroundColor) {    paint.setColor(*backgroundColor);    paint.setStyle(SkPaint::kFill_Style);    canvas.drawRect(rect, paint);    // ...  }}

// 绘制结果存储最小单元class PictureLayer : public Layer { public:  PictureLayer(sk_sp picture) : picture_(picture) {}
  void addToScene(Scene& scene) const override { // 上屏显示    scene.surfaceCanvas_.drawPicture(picture_);  } private:  sk_sp picture_;};
// 图层含义的表示struct OrderLayer {  Layer::Shared layer;  int order;  OrderLayer(Layer::Shared layer, int order) : layer(layer), order(order) {}};
// 保存图层class ContainerLayer : public Layer { public:  using OrderListOfShared = facebook::butter::small_vector;  using QueueOfLayer = std::queue;  ContainerLayer() = default;
  void insert(const Layer::Shared &child, int order){    int i = 0;    while (i < children_.size() && children_[i].order < order) {      i++;    }    children_.insert(children_.begin() + i, OrderLayer(child, order));  }
  // ... 控制图层若干方法
  OrderListOfShared getChildren() const { return children_; }
  void getLayerQueue(QueueOfLayer& concurrentQueue) const {   for (auto &orderLayer : children_) {     if (auto containerLayer = orderLayer.layer->asContainerLayer()) {      containerLayer->getLayerQueue(concurrentQueue);     } else {      concurrentQueue.push(orderLayer.layer);     }    }   } private:  OrderListOfShared children_;};
// 新的绘制方法void ViewShadowNode::performPaint(PaintingContext &paintingContext,const Point layerOffset) const {  auto size = getLayoutMetrics().frame.size;  auto offset = getLayoutMetrics().frame.origin;
  auto marginValue = optionalFloatFromYogaValue(      getConcreteProps().yogaStyle.margin()[YGEdgeAll]);  auto offsetAll = layerOffset;  if (marginValue) {    offsetAll = layerOffset + Point{marginValue.value(), marginValue.value()};  }  // ...  auto paint = Paint();  paint.setBorderColor(SK_ColorCYAN); // 需要细化  // 获取到该 view 的背景数据  paintingContext.getCanvas().drawRect(offset.x,offset.y,size.width,size.height,paint,getConcreteProps().shadowColor,getConcreteProps().backgroundColor,0,0,0,0);  for (int i = 0; i < getChildren().size(); i++) {    auto child = getChildren()[i];    child->performPaint(paintingContext, offsetAll); // 遍历绘制  }}

void StackingContextContainerLayer::composeToSceneCanvas(SkCanvas &canvas) const {  // ...  for (auto &child : children_) {    // ...    if (effectParams_ && effectParams_->needOpacity()) { // 绘制透明度      canvas.saveLayerAlpha(nullptr, static_cast(effectParams_->opacity * 255));    }    child.second->composeToSceneCanvas(canvas); // 绘制操作    if (effectParams_ && effectParams_->needOpacity()) {      canvas.restore();    }    // ...}

// ConcreteVieShadowNode.hvoid performSelfPaint(const ParentContext &parentContext,StackingContext &stackingContext,Point layerOffset) const final { // 绘制自身  // ...  auto offset = this->getLayoutMetrics().frame.origin + layerOffset; // 坐标偏移累加  paintBackground(stackingContext, offset, this->currentLevel()); // 画背景  this->performPaint(parentContext, stackingContext, offset); // 遍历  // ... }

// 层叠上下文关联类class Layer { public:  // ...  virtual void composeToSceneCanvas(SkCanvas &canvas) const {};  virtual void translateTo(const Point &originPoint,const std::optional<Rect> &clipRect = std::nullopt) {}};
// 记录层class PictureLayer : public Layer { public:  // ...  PictureLayer(sk_sp<SkPicture> picture) : picture_(picture) {}  void composeToSceneCanvas(SkCanvas &canvas) const override; // 合成上屏 private:  sk_sp<SkPicture> picture_;};
// 容器层抽象class ContainerLayer : public Layer { public:  ContainerLayer(Rect &rect) : rect_(rect) {}  // ...  QueueOfLayer getChildren() const {    return children_;  }  Canvas &getCanvas(); // 获取当前图层的绘制需要的 canvas  void finishRecorderIfNeeded();  void pushLayer(const Layer::Shared &layer);  void composeToSceneCanvas(SkCanvas &canvas) const override;  void translateTo(const Point &originPoint,const std::optional<Rect> &clipRect = std::nullopt) override {    rect_.origin = originPoint;  } private:  Rect rect_;  std::unique_ptr<SkPictureRecorder> recorder_; // 指令记录器  std::unique_ptr<Canvas> canvas_; // 本图层的绘制 canvas 对象  QueueOfLayer children_; // 图层集合，包含 containerLayer、stackingContextLayer};
// 层叠上下文抽象class StackingContextContainerLayer : public Layer { public:  StackingContextContainerLayer(Rect &&rect,std::unique_ptr<LayerEffectParams> &&effectParams = nullptr): rect_(rect), effectParams_(std::move(effectParams)) {}  // ...
 private:  Rect rect_;  std::map<StackingContextLevel, ContainerLayerUnShared> children_; // 根据层叠顺序来保存图层容器  std::unique_ptr<LayerEffectParams> effectParams_; // 特效参数，如透明度等  std::optional<Rect> clipRect_{}; // 裁切区域};
// 层叠上下文class StackingContext { public:  StackingContext(StackingContextContainerLayer::UnShared &container): container_(container){};  StackingContext createChildStackingContext(StackingContextContainerLayer::UnShared &container,StackingContextLevel level);  // 创建子节点的层叠上下文
  void reuseLayer(Layer::Shared &layer, StackingContextLevel level); // 复用图层  Canvas &getCanvas(StackingContextLevel level);  void closeStackingContext(); // 关闭当琴层叠上下文区域  StackingContextContainerLayer::Shared getStackingContextContainerLayer() const {    return container_;  }  void setClipRect(const Rect &clipRect) { // 设置裁切区域    container_->setClipRect(clipRect);  }  void restoreClipRect() { // 恢复裁切区域    container_->restoreClipRect();  }
 private:  StackingContextContainerLayer::UnShared container_; // 当前环境所代表的层叠图层};
// 构建单帧场景抽象class Scene { public:  Scene(SkCanvas &surfaceCanvas); // 真正的skcanvas来驱动上屏绘制  void composeLayerAndDraw(const Layer::Shared &layer); // 上屏绘制启动   private:  SkCanvas &surfaceCanvas_;};
```

// 设置当前元素是否是层叠上下文元素和元素对应的层叠顺序, RN和 web标准的是不同的 void checkCurrentLevelAndStackingContext(      ParentContext &parentContext) const override {    //  filter、mask、maskImage、maskBorder、clipPath、mixBlendMode、perspective、backdropFilter    const ViewProps &props = this->getConcreteProps();    bool isPositionElement =        props.yogaStyle.positionType() != YGPositionTypeStatic;    bool hasTransformProp = props.transform != Transform::Identity();    bool hasTransitionProp = props.hasTransition();    bool hasAnimationProp = props.hasAnimation();     bool parentIsFlex = parentContext.isFlex;    bool hasZIndex = props.zIndex.has_value();    bool hasOpacity = props.opacity != 1.0;    if (hasZIndex && (isPositionElement || parentIsFlex)) { // 位置元素且有显式的 z-index      this->isStackingContext_ = true;      this->currentLevel_ = props.zIndex.value();      return;    }    if (isPositionElement) {      if (hasOpacity) {        this->isStackingContext_ = true;      }      this->currentLevel_ = StackingContextLevel::AUTO_INDEX; // 设置正确的层叠顺序      return;    }    // ...    if (hasOpacity || hasTransformProp || hasTransitionProp ||        hasAnimationProp) {  // 特殊效果时设置正确的层叠顺序      this->isStackingContext_ = true;      this->currentLevel_ = StackingContextLevel::AUTO_INDEX;      return;    }    // ...    // float 忽略处理 、inline-block 、inline 具体判断    this->isStackingContext_ = false;    this->currentLevel_ = StackingContextLevel::BFC;    return;  }

// 如果当前元素是容器元素，那么递归遍历其中的元素void performChildrenPaint(      StackingContext &stackingContext,       Point layerOffset, // 父元素偏移      const std::optional<Rect> &clipRect_ = std::nullopt) const { // 裁切矩形
    if (clipRect_) { // 如果需要裁切在当前的元素所属的层叠上下文中设置裁切矩形      stackingContext.setClipRect(*clipRect_);     }    for (auto const &childNode : this->getChildren()) {      ParentContext parentContext = buildParentContext();      childNode->checkCurrentLevelAndStackingContext(parentContext); // 设置 child 元素的类型和层叠水平      if (auto layer = childNode->getLayer()) { // 如果child 是层叠元素且已经缓存，那么就复用        auto mutableLayer = std::const_pointer_cast<Layer>(layer);        mutableLayer->translateTo( // 做好偏移处理            layerOffset,            stackingContext.getStackingContextContainerLayer()->getClipRect());        stackingContext.reuseLayer(layer, childNode->currentLevel()); // 重用设置      } else { // 不复用的情况下去做 child 自身的处理        childNode->performSelfPaint(            parentContext, stackingContext, layerOffset);      }    }    // ...    if (clipRect_) { // 如果是当前的容器 view 遍历结束且有裁切当前容器的情况下记得要恢复过来呢      stackingContext.restoreClipRect();    }  } 
// 对于每个元素的处理逻辑void performSelfPaint(      const ParentContext &parentContext,      StackingContext &stackingContext,      Point layerOffset) const final { // 元素的偏移值    auto size = this->getLayoutMetrics().frame.size; // yogo计算过的当前元素的宽高值    if (this->isStackingContext()) { // 如果是层叠元素      auto stackingContextContainerLayer =          std::make_shared<StackingContextContainerLayer>( // 为其创建层叠上下文容器层，然会创建所属层叠上下文，然后把自己放到合适的层叠顺序上面去              Rect{layerOffset, size}, std::move(getEffectParams(size))); // 获取可能的特效属性值，例如透明度等值      auto childStackingContext = stackingContext.createChildStackingContext(          stackingContextContainerLayer, this->currentLevel_); // 创建层叠上下文
      paintBackground(childStackingContext, this->getLayoutMetrics().frame.origin,          StackingContextLevel::BACKGROUND); // 绘制背景和边框      this->performPaint( // 执行递归或者具体绘制          parentContext,          childStackingContext,          this->getLayoutMetrics().frame.origin);      stackingContextContainerLayer->closeStackingContext(); // 关闭上下文      this->saveLayer(stackingContextContainerLayer); // 缓存当前的层叠上下文所创建的层用来复用    } else {      auto offset = this->getLayoutMetrics().frame.origin + layerOffset;      auto screenRect = stackingContext.getScreenRect();      // [优化] 屏幕视图区域之外的 Node 暂时先不绘制      if (offset.x + size.width < screenRect.origin.x ||          offset.y + size.height < screenRect.origin.y ||          offset.x >= screenRect.size.width ||          offset.y >= screenRect.size.height) {        return;      }      paintBackground(stackingContext, offset, this->currentLevel()); // 绘制背景      this->performPaint(parentContext, stackingContext, offset); // 递归或者具体绘制    }  }
// 普通元素递归void ViewShadowNode::performPaint(    const ParentContext &parentContext,    StackingContext &stackingContext,    Point offset) const {  performChildrenPaint(stackingContext, offset); // 遍历}
// 绘制文本段落void ParagraphShadowNode::performPaint(    const ParentContext &paintContext,    StackingContext &stackingContext,    Point offset) const {  auto &canvas = stackingContext.getCanvas(currentLevel());  Size size = getLayoutMetrics().frame.size;  // ...  auto paragraph = builder->Build();  paragraph->layout(size.width);  paragraph->paint(canvas.getSkCanvas(), offset.x, offset.y); // 绘制文本}
```