前端前端
fabric
算法
jsBlock
styleBlock
svgBlock
工具其他
Vue、React相关
webgl
GitHub
fabric
算法
jsBlock
styleBlock
svgBlock
工具其他
Vue、React相关
webgl
GitHub
  • 元素操作

    • 元素分组
    • 元素定位
    • 元素层级
    • 元素禁止事件
    • 元素选中样式
  • 变换

    • 变换
  • 图片

    • 图片
    • 背景图
  • 基础图形

    • 三角形
    • 圆形
    • 多边形
    • 折线
    • 椭圆
    • 直线
    • 矩形
    • 路径
  • 序列化和反序列化

    • 反序列化
    • 输出JSON
    • 输出png
    • 输出svg
  • 文本

    • 可编辑文本
    • 多行文本
    • 文本
    • 文本省略
    • 文本边框
  • 源码

    • fabric.Canvas
    • fabric.Circle
    • fabric类的继承体系
  • 画布操作

    • 画布拖动和缩放
    • 画布框选样式
  • 示例

    • fabric-echarts-demo
    • 拓扑图一
    • 拓扑图二

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, {
    ...
})

生成实例

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

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);
},
Edit this page
最近更新:: 2023/12/8 15:40
Contributors: wu.hui
Prev
fabric.Canvas
Next
fabric类的继承体系