Extending kinetic.js shape with coffescript

Question

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?

Kinetic.Circle have no static .class() method, where did you get it? Looks like it should be Kinetic.Circle.call instead. — Leonid Beschastny
I got it from the linked question, tried your suggestion and it worked! Add it as an answer and I'll accept :) — monoceres

Leonid Beschastny Leonid Beschastny · Accepted Answer · 2014-03-07T10:04:15

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.

Extending kinetic.js shape with coffescript

1 Answers