复制自定义类型的元素，得到一个空白元素

[marysyy1101]

创建的自定义类型的元素，复制时候空白

1、使用createClass创建了一个自定义类（半圆）

export let Semicircle = fabric.util.createClass(fabric.Object, {
  // 初始化
  initialize(options) {
    this.callSuper('initialize', options);
    this.width = 100;
    this.height = 50;
  },
  // 渲染
  _render(ctx) {
    ctx.strokeStyle = this.stroke || '#333'; // 初始化描边颜色
    ctx.lineWidth = this.strokeWidth || 1; // 初始化描边宽度
    ctx.fillStyle = this.fill || '#333'; // 初始化填充色
    ctx.beginPath(); // 开始绘制路径
    ctx.arc(0, -25, 50, 0, (180 * Math.PI) / 180); // 绘制半圆
    ctx.closePath(); // 结束绘制路径
    ctx.stroke(); // 描边
    ctx.fill(); // 填充
  },
});

2、创建元素

const createBarCodeElement = () => {
  let semicircle = new Semicircle({
    top: 10,
    left: 10,
    stroke: '#7bcfa6', // 描边色
    fill: '#ed5736', // 填充色
    strokeWidth: 10, // 描边宽度
  });

  // 将半圆添加到画布里
  canvasEditor.canvas.add(semicircle);
  canvasEditor.canvas.setActiveObject(semicircle);
};

3、复制这个半圆

[ByeWord]

fabric.Semicircle = fabric.util.createClass(fabric.Object, {
    type: 'Semicircle',
    // 初始化
    initialize(options) {
        this.callSuper('initialize', options);
        this.width = 100;
        this.height = 50;
    },
    // 渲染
    _render(ctx) {
        console.info('_render')
        this.callSuper('_render', ctx)
        ctx.strokeStyle = this.stroke || '#333'; // 初始化描边颜色
        ctx.lineWidth = this.strokeWidth || 1; // 初始化描边宽度
        ctx.fillStyle = this.fill || '#333'; // 初始化填充色
        ctx.beginPath(); // 开始绘制路径
        ctx.arc(0, -25, 50, 0, (180 * Math.PI) / 180); // 绘制半圆
        ctx.closePath(); // 结束绘制路径
        ctx.stroke(); // 描边
        ctx.fill(); // 填充
    },
    toObject(propertiesToInclude) {
        return this.callSuper('toObject', [].concat(propertiesToInclude));
    },
});
// 参考这里，你也可以参考源码里的rect的实现
fabric.Semicircle.fromObject = function(object, callback) {
    return fabric.Object._fromObject('Semicircle', object, callback);
};

[smile-stars]

fabric.Semicircle = fabric.util.createClass(fabric.Object, {
    type: 'Semicircle',
    // 初始化
    initialize(options) {
        this.callSuper('initialize', options);
        this.width = 100;
        this.height = 50;
    },
    // 渲染
    _render(ctx) {
        console.info('_render')
        this.callSuper('_render', ctx)
        ctx.strokeStyle = this.stroke || '#333'; // 初始化描边颜色
        ctx.lineWidth = this.strokeWidth || 1; // 初始化描边宽度
        ctx.fillStyle = this.fill || '#333'; // 初始化填充色
        ctx.beginPath(); // 开始绘制路径
        ctx.arc(0, -25, 50, 0, (180 * Math.PI) / 180); // 绘制半圆
        ctx.closePath(); // 结束绘制路径
        ctx.stroke(); // 描边
        ctx.fill(); // 填充
    },
    toObject(propertiesToInclude) {
        return this.callSuper('toObject', [].concat(propertiesToInclude));
    },
});
// 参考这里，你也可以参考源码里的rect的实现
fabric.Semicircle.fromObject = function(object, callback) {
    return fabric.Object._fromObject('Semicircle', object, callback);
};

感谢，我试一下