konva/test/unit/Circle-test.js

suite('Circle', function(){
  // ======================================================

  test('add circle to stage', function(){
    var stage = buildStage();
    var layer = new Kinetic.Layer();
    var group = new Kinetic.Group();
    var circle = new Kinetic.Circle({
        x: 100,
        y: 100,
        radius: 70,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        name: 'myCircle',
        draggable: true
    });

    stage.add(layer);
    layer.add(group);
    group.add(circle);
    layer.draw();


    var attrs = circle.getAttrs();

    assert.equal(attrs.x, 100);
    assert.equal(attrs.y, 100);
    assert.equal(attrs.radius, 70);
    assert.equal(attrs.fill, 'green');
    assert.equal(attrs.stroke, 'black');
    assert.equal(attrs.strokeWidth, 4);
    assert.equal(attrs.name, 'myCircle');
    assert.equal(attrs.draggable, true);
    assert.equal(circle.getClassName(), 'Circle');



    var trace = layer.getContext().getTrace();
    //console.log(trace);
    assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
  });

  // ======================================================
  test('add circle with pattern fill', function(done) {
      var imageObj = new Image();
      imageObj.onload = function() {
          var stage = buildStage();
          var layer = new Kinetic.Layer();
          var group = new Kinetic.Group();
          var circle = new Kinetic.Circle({
              x: stage.getWidth() / 2,
              y: stage.getHeight() / 2,
              radius: 70,
              fillPatternImage: imageObj,
              fillPatternOffset: -5,
              fillPatternScale: 0.7,
              stroke: 'black',
              strokeWidth: 4,
              name: 'myCircle',
              draggable: true
          });

          group.add(circle);
          layer.add(group);
          stage.add(layer);

          assert.equal(circle.getFillPatternOffset().x, -5);
          assert.equal(circle.getFillPatternOffset().y, -5);

          circle.setFillPatternOffset(1, 2);
          assert.equal(circle.getFillPatternOffset().x, 1);
          assert.equal(circle.getFillPatternOffset().y, 2);

          circle.setFillPatternOffset({
              x: 3,
              y: 4
          });
          assert.equal(circle.getFillPatternOffset().x, 3);
          assert.equal(circle.getFillPatternOffset().y, 4);

          done();
      };
      imageObj.src = 'assets/darth-vader.jpg';

  });


  // ======================================================
  test('add circle with radial gradient fill', function() {
      var stage = buildStage();
      var layer = new Kinetic.Layer();
      var group = new Kinetic.Group();
      var circle = new Kinetic.Circle({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2,
          radius: 70,
          fillRadialGradientStartPoint: -20,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: -60,
          fillRadialGradientEndRadius: 130,
          fillRadialGradientColorStops: [0, 'red', 0.2, 'yellow', 1, 'blue'],
          name: 'myCircle',
          draggable: true,
          scale: {
              x: 0.5,
              y: 0.5
          }
      });

      group.add(circle);
      layer.add(group);
      stage.add(layer);

      assert.equal(circle.getFillRadialGradientStartPoint().x, -20);
      assert.equal(circle.getFillRadialGradientStartPoint().y, -20);
      assert.equal(circle.getFillRadialGradientStartRadius(), 0);
      assert.equal(circle.getFillRadialGradientEndPoint().x, -60);
      assert.equal(circle.getFillRadialGradientEndPoint().y, -60);
      assert.equal(circle.getFillRadialGradientEndRadius(), 130);
      assert.equal(circle.getFillRadialGradientColorStops().length, 6);

  });

  // ======================================================
  test('add shape with linear gradient fill', function() {
      var stage = buildStage();
      var layer = new Kinetic.Layer();
      var group = new Kinetic.Group();
      var circle = new Kinetic.Circle({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2,
          radius: 70,
          fillLinearGradientStartPoint: -35,
          fillLinearGradientEndPoint: 35,
          fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
          stroke: 'black',
          strokeWidth: 4,
          name: 'myCircle',
          draggable: true
      });

      group.add(circle);
      layer.add(group);
      stage.add(layer);

      assert.equal(circle.getName(), 'myCircle');

  });

  // ======================================================
  test('set opacity after instantiation', function() {
      var stage = buildStage();
      var layer = new Kinetic.Layer();
      var group = new Kinetic.Group();
      var circle = new Kinetic.Circle({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2,
          radius: 70,
          fill: 'red'
      });

      group.add(circle);
      layer.add(group);
      stage.add(layer);

      circle.setOpacity(0.5);
      layer.draw();

      circle.setOpacity(0.5);
      layer.draw();
  });

  // ======================================================
  test('set fill after instantiation', function() {
      var stage = buildStage();
      var layer = new Kinetic.Layer();
      var circle = new Kinetic.Circle({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2,
          radius: 70,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 4
      });
      layer.add(circle);

      circle.setFill('blue');

      stage.add(layer);
  });
});