# fabric.Circle

fabric 是个对象, 它上面挂载了很多方法

-- fabric.StaticCanvas // 创建

-- fabric.util.xx // 工具类

-- fabric.CommonMethods.xx // 公共方法

-- fabric.Circle

# fabric.Circle

# 定义

fabric.Circle, 调用 fabric.util.createClass,继承 fabric.Object,返回 function

fabric.Circle = fabric.util.createClass(fabric.Object, {
    ...
})
1
2
3

# 生成实例

new fabric.Circle(options) 生成实例,执行 initialize

initialize: function(options) {
    if (options) {
        this.setOptions(options);
    }
},

 // this.setOptions 会调用
 _set: function(key, value) {
    this.callSuper('_set', key, value);

    if (key === 'radius') {
      this.setRadius(value);
    }

    return this;
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# canvas.add(实例)


```js title="伪代码"
this._onObjectAdded(Circle实例); // Circle实例添加进objects
this._renderObjects(ctx, objects); // 渲染 objects
objects[i].render(ctx);
this.drawObject(this._cacheContext, options.forClipping); // _cacheContext, 缓存ctx
this._render(ctx); // _cacheContext 上画Circle实例
// 开始画Circle实例
 _render: function(ctx) {
    ctx.beginPath();
    ctx.arc(
    0,
    0,
    this.radius,
    degreesToRadians(this.startAngle),
    degreesToRadians(this.endAngle),
    false
    );
    this._renderPaintInOrder(ctx);
},
// 画完了_cacheContext 添加到canvas
drawCacheOnCanvas: function(ctx) {
    ctx.scale(1 / this.zoomX, 1 / this.zoomY);
    ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
最后更新时间: 12/8/2023, 3:40:46 PM