konva/test/unit/shapes/Ellipse-test.js

suite('Ellipse', function() {
  // ======================================================
  test('add ellipse', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: { x: 70, y: 35 },
      fill: 'green',
      stroke: 'black',
      strokeWidth: 8
    });
    layer.add(ellipse);
    stage.add(layer);
    assert.equal(ellipse.getClassName(), 'Ellipse');

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

  // ======================================================
  test('attrs sync', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: { x: 70, y: 35 },
      fill: 'green',
      stroke: 'black',
      strokeWidth: 8
    });
    layer.add(ellipse);
    stage.add(layer);

    assert.equal(ellipse.getWidth(), 140);
    assert.equal(ellipse.getHeight(), 70);

    ellipse.setWidth(100);
    assert.equal(ellipse.radiusX(), 50);
    assert.equal(ellipse.radiusY(), 35);

    ellipse.setHeight(120);
    assert.equal(ellipse.radiusX(), 50);
    assert.equal(ellipse.radiusY(), 60);
  });

  test('getSelfRect', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: { x: 70, y: 35 },
      fill: 'green',
      stroke: 'black',
      strokeWidth: 8
    });
    layer.add(ellipse);
    stage.add(layer);

    assert.deepEqual(ellipse.getSelfRect(), {
      x: -70,
      y: -35,
      width: 140,
      height: 70
    });
  });

  test('cache', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: { x: 70, y: 35 },
      fill: 'green',
      stroke: 'black',
      strokeWidth: 8
    });
    ellipse.cache();
    layer.add(ellipse);
    stage.add(layer);

    var canvas = createCanvas();
    var context = canvas.getContext('2d');
    context.save();
    context.beginPath();
    context.scale(1, 0.5);
    context.arc(
      stage.getWidth() / 2,
      stage.getHeight(),
      70,
      0,
      Math.PI * 2,
      false
    );
    context.closePath();
    context.restore();
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 8;
    context.stroke();
    compareLayerAndCanvas(layer, canvas, 150);
  });
});