使用 Fabric JS 定义标记线

Question

我正在尝试创建一个名为标记线的新形状。像下图这样的东西。我决定使用 Fabric JS 并扩展 fabric.line class.

新建class 扩展线

var LabelledLine = fabric.util.createClass(fabric.Line, {

  type: 'lline',
  // initialize can be of type function(options) or function(property, options), like for text.
  // no other signatures allowed.
  initialize: function(options) {
    options || (options = { });

    this.callSuper('initialize', options);
    this.set('label', options.label || '');
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {
      label: this.get('label')
    });
  },

  _render: function(ctx) {
    this.callSuper('_render', ctx);

    //ctx.font = '20px Helvetica';
    //ctx.fillStyle = '#333';
    // ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
  }
});

调用

var l = LabelledLine({
    coords: [250, 125, 250, 175], label:'Label'
  })
  canvas.add(l);

问题

如何实现标签正好在行之间或行的左边或右边？或在线旁边看起来，我没有正确扩展它，我在这里遗漏了什么？我也看不到没有标签的线。

错误

caught TypeError: Cannot read property 'apply' of undefined
    at klass (fabric.js:2238)
    at Image.background.onload

Answer 1

var Edge = fabric.util.createClass(fabric.Line, {

    type: 'edge',
    // initialize can be of type function(options) or function(property, options), like for text.
    // no other signatures allowed.
    initialize: function(points, options){
      options = options || {};
      this.points = points || [];

      this.callSuper('initialize',points, options);
      this.set('label', options.label || '');
    },

    toObject: function() {
      return fabric.util.object.extend(this.callSuper('toObject'), {
        label: this.get('label')
      });
    },

    _render: function(ctx) {
      this.callSuper('_render', ctx);

      ctx.font = '9px Helvetica';
      ctx.fillStyle = '#333';
      ctx.fillText(this.label,  -this.width/2, -this.height/2 + 20);
      // ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
    }
  });


  var lr = new Edge([ 250, 125, 500, 175 ], {
    fill: 'green',
    stroke: 'green',
    strokeWidth: 1,
    selectable: true,
    evented: true,
    hasBorders:false,
    cornerStyle:'circle',
    lockScalingX: true,
    lockScalingY:true,
    label: '1'
  });
  canvas.add(lr);

};

https://codepen.io/ajayramesh/pen/NWNpaRW

使用 Fabric JS 定义标记线

Define labelled line using Fabric JS

javascript

css

fabricjs

新建class 扩展线

调用

问题