# 框架内置组件设计与实现
## 内置组件的意义
### 在前面一节我们具体介绍了Vanjs中的组件化的设计以及具体的实现方式，从中我们可以看到：当我们需要创建一个组件时，我们需要设置组件的data属性，同时在render函数中使用该属性，调用Canvas原生的api进行图形绘制。事实上，在大多数用户平时的绘图工作中，会经常使用到非常多的基础图形如直线（Line）、矩形（Rectangle）、圆形（Circle）、圆弧...等等，同时也会使用到非常多的诸如图片（Image）、文字（Text）等等基础控件。这些图形、控件拥有着非常高的使用率，如果让用户每次使用时都重新为这些图形设计组件的话，会使得框架的使用变得非常繁琐。所以，在Vanjs我们提供了非常多且功能非常强大的内置组件。
## 内置组件的设计和实现方式
### Vanjs通过使用Van.Name的方式将内置组件挂载到Van类上，示例代码如下：
``` javascript
Van.Line = Van.component({
    data: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 0,
        color: 'black',
        lineWidth: 1
    },
    render: function() {
        this.$ctx.beginPath();
        this.$ctx.strokeStyle = this.color;
        this.$ctx.moveTo(this.x1, this.y1);
        this.$ctx.lineTo(this.x2, this.y2);
        this.$ctx.stroke();
    }
});
```
### 我们可以使用以下的方式使用内置组件并获得组件实例
``` javascript
// 获得组件实例
var aline = Van.Line.newInstance();
// 父组件加载组件
parent.$mount(aline);
```
### 在以上的代码中，我们通过Van.Component声明了一个Line组件，并将其挂载到Van上。内置组件的创建与普通组件的创建采用同样的方式。通过使用Van.component创建Component实例并挂载到Van上。
## 常用的内置组件设计与实现
### Van.Circle
#### Van.Circle组件可以在Canvas绘制一个圆形，并且可以通过传入的参数调整圆形的位置、颜色、是否填充等等信息
### Van.Circle组件定义于/src/components/base/Circle.js中，以下为部分实现代码：
``` javascript
Van.Circle = Van.component({
    data: {
        x: 50,
        y: 80,
        radius: 50,
        color: 'black',
        fill: false,
        name: 'circle',
        flag: true，
        // ...省略部分参数
    },
    render: function() {
        this.$ctx.beginPath();
        this.$ctx.strokeStyle = this.color;
        this.$ctx.fillStyle = this.color;
        this.$ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        if (this.data.fill) {
            this.$ctx.fill();
        } else {
            this.$ctx.stroke();
        }
        // ...省略部分实现
    },
    // ...省略其他代码
});
```
### Van.Circle主要包含以下参数
* x:圆心点的横坐标
* y:圆心点的纵坐标
* radius:圆的半径
* color:圆的颜色
* fill:是否填充
* ...

#### 注：字数不够的话可以在这里凑