Search code examples
javascriptcoffeescriptkineticjs

Extending kinetic.js shape with coffescript


I've been messing around with coffeescript and I would like to use Kinetic.js to perform some graphical operations.

I really like coffeescripts classes so I wanted to use them to create custom sprites.

Below is my attempt of extending Kinetic.Circle:

class Particle extends Kinetic.Circle
    constructor: (x,y,size,color) ->
        Kinetic.Circle.class @, {
            x: x
            y: y
            width: size
            height: size
            fill: color
        }

Note that I did not use "super" in the constructor as advised in this question.

When calling the constructor the following error is thrown:

Uncaught TypeError: Object function (a){this.___init(a)} has no method 'class' 

... in the generated javascript:

  Particle = (function(_super) {
    __extends(Particle, _super);

    function Particle(x, y, size, color) {
      Kinetic.Circle["class"](this, {
        x: x,
        y: y,
        width: size,
        height: size,
        fill: color
      });
    }

    return Particle;

  })(Kinetic.Circle);

Is it possible to extend Kinetic shapes in coffeescript style without using too much violence?


Solution

  • Kinetic.Circle have no static .class() method and I have no idea where did you get it.

    Looks like it should be Kinetic.Circle.call instead:

    class Particle extends Kinetic.Circle
      constructor: (x, y, size, color) ->
        Kinetic.Circle.call @,
          x: x
          y: y
          width: size
          height: size
          fill: color
    

    Which is exactly what was suggested in a linked question.