konva/test/unit/Ellipse-test.ts

import { assert } from 'chai';

import {
  addStage,
  Konva,
  createCanvas,
  compareLayerAndCanvas,
} from './test-utils';

describe('Ellipse', function () {
  // ======================================================
  it('add ellipse', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.width() / 2,
      y: stage.height() / 2,
      radiusX: 70,
      radiusY: 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();'
    );
  });

  // ======================================================
  it('attrs sync', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.width() / 2,
      y: stage.height() / 2,
      radiusX: 70,
      radiusY: 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);
  });

  it('getSelfRect', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.width() / 2,
      y: stage.height() / 2,
      radiusX: 70,
      radiusY: 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,
    });
  });

  it('cache', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var ellipse = new Konva.Ellipse({
      x: stage.width() / 2,
      y: stage.height() / 2,
      radiusX: 70,
      radiusY: 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.width() / 2, stage.height(), 70, 0, Math.PI * 2, false);
    context.closePath();
    context.restore();
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 8;
    context.stroke();
    compareLayerAndCanvas(layer, canvas, 150);
  });
});