Overview

vchart-svg-plugin is a plugin that converts vchart rendering content into an SVG string, mainly used for printing, server-side rendering, and other scenarios;

Basic Principles

Before reading the specific code, we first need to know some implementation principles of vchart. Vchart is rendered based on canvas and relies on the canvas rendering engine library @visactor/vrender at the bottom layer. Vrender generates a graphic scene tree stage based on the chart configuration of vchart:

The relationship of graphics-related classes in vrender is as follows:

In other words, through the vchart instance, we can obtain the root node stage of the scene tree. By recursively traversing the child nodes of stage, we can get all the rendered graphics. In the implementation of vrender, all graphics have an attribute property to maintain the display configuration of the graphics. Therefore, the task is broken down into two parts:

• Construct the child nodes of the svg based on the child nodes of stage

• Convert the attribute of vrender graphic elements into the corresponding attributes of svg nodes

Core File Structure

src/svg/
├── convert.ts     - 转换入口，处理图表到SVG的转换
├── graphic.ts     - 图形元素转换的核心实现
├── util.ts        - 通用工具函数集合
├── pattern.ts     - 纹理属性转换
├── shadow.ts      - shadow属性转换
├── arc.ts         - 圆弧图形相关转换
├── area.ts        - 区域图形相关转换
├── line.ts        - 线图形相关转换
├── polygon.ts     - 多边形图形相关转换
├── rect.ts        - 矩形图形相关转换
└── symbol.ts      - symbol图形相关转换
    

In the following chapters, we will describe in detail some core code implementations

This document was revised and organized by the following personnel

玄魂