Fabricjs-自定义类型

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c')
  fabric.Object.prototype.transparentCorners = false //设置多边形角的可见性
  var Cross = fabric.util.createClass(fabric.Object, {
    objectCaching: false,
    initialize: function(options) { //初始化 设定一些初始值
      this.callSuper('initialize', options);
      this.animDirection = 'up';
      this.width = 100;
      this.height = 100;
      this.w1 = this.h2 = 100
      this.h1 = this.w2 = 30
    },
    // animateWidthHeight: function() {
    //   var interval = 2
    //   if (this.h2 >= 30 && this.h2 <= 100) {
    //     var actualInterval = (this.animDirection === 'up' ? interval : -interval);
    //     this.h2 += actualInterval
    //     this.w1 += actualInterval
    //   }
    //   if (this.h2 >= 100) {
    //     this.animDirection = 'down'
    //     this.h2 -= interval
    //     this.w1 -= interval

    //   }
    //   if (this.h2 <= 30) {
    //     this.animDirection = 'up'
    //     this.h2 += interval
    //     this.w1 += interval
    //   }
    // },
    _render: function(ctx) {
      //这里通过canvas提供的方法绘制图形
      ctx.fillRect(-this.w1 / 2, -this.h1 / 2, this.w1, this.h1)
      ctx.fillRect(-this.w2 / 2, -this.h2 / 2, this.w2, this.h2)
      ctx.fillStyle = "#adadad"
      // ctx.fillRect(-this.w1 / 6, -this.h1 / 6, this.w1 / 3, this.h1 / 3)
      // ctx.fillRect(-this.w2 / 6, -this.h2 / 6, this.w2 / 3, this.h2 / 3)
      if (this.animDirection === 'up') {
        ctx.scale(0.5, 2)
        ctx.shadowBlur = 20
        ctx.shadowColor = 'blue'
        ctx.fillRect(-this.w1 / 6, -this.h1 / 6, this.w1 / 3, this.h1 / 3)
        ctx.fillRect(-this.w2 / 6, -this.h2 / 6, this.w2 / 3, this.h2 / 3)
      } else {
        ctx.scale(2, 0.5)
        ctx.fillRect(-this.w1 / 6, -this.h1 / 6, this.w1 / 3, this.h1 / 3)
        ctx.fillRect(-this.w2 / 6, -this.h2 / 6, this.w2 / 3, this.h2 / 3)
      }
    }
  })
  canvas.add(
    new Cross({ top: 100, left: 100 }),
    new Cross({ top: 140, left: 230 }),
    new Cross({ top: 300, left: 210 }),
    new Cross({ top: 40, left: 400 }),
    new Cross({ top: 450, left: 400 })
  )

  // setTimeout(function animate() {
  //   canvas.forEachObject(function(obj) {
  //     obj.animateWidthHeight();
  //     obj.dirty = true;
  //   })
  //   canvas.renderAll()
  //   setTimeout(animate, 40)
  // }, 10);
})()

//注释掉的内容和动画效果有关，不影响自定义类型