Как рассчитать площадь всех текстовых объектов внутри границ холста, используя fabricjs? - PullRequest
Новая
       25

Как рассчитать площадь всех текстовых объектов внутри границ холста, используя fabricjs?

1 голос
/ 06 ноября 2019

Я работаю над функцией, которая вычисляет общую площадь текста (используя его границы, а не сам текст) на холсте в процентах от общего размера холста. В настоящее время он только проверяет размер всех текстовых объектов на холсте и общую площадь холста и не учитывает какую-либо часть текста, которая может обрезаться за пределами холста.

Я хочувычислите общую площадь, которая находится за границей холста, и вычтите ее из общей площади текстовых объектов.

Я застрял с некоторыми математическими данными, необходимыми для вычисления этого. Вот основные данные, необходимые для выполнения этого расчета:

  • Ширина и высота холста (px)
  • Ширина и высота текстового объекта (px)
  • Положение объекта "влево" и "снизу" (px)

При вычислении необходимо, прежде всего, определить, находится ли объект на самом деле за пределами холста. Затем необходимо определить, являются ли «левая» или «нижняя» позиция положительными или отрицательными.

Вот код, который у меня есть, но я чувствую, что поступаю неправильно: 

  getTextCoverage() : number {
    var objects = this.canvas.getObjects();
    var canvasArea = this.canvasSize.width * this.canvasSize.height;
    var totalTextArea = 0;

// loop through all canvas objects
    for (var object of objects){
      if (object.text){
        // Check if the textbox is outside the canvas to the left or right
        var xOutsideCanvas = object.left + (object.width * object.scaleX) > object.width * object.scaleX ? 
          // If true the textbox is outside the canvas to the right
          this.canvas.width - (object.left + (object.width * object.scaleX)) : 
          // If false the textbox is outside the canvas to the left
          - this.canvas.width - (object.left + (object.width * object.scaleX));

        totalTextArea += (object.width * object.scaleX) * (object.height * object.scaleY);
        if(object.left + (object.width * object.scaleX) > this.canvas.width){
        }
      }
    }

    return ((totalTextArea / canvasArea) * 100) * 5;
  }

1 Ответ

1 голос
/ 13 ноября 2019

Я думаю, что вы были на правильных строках, я немного изменил ваш код, чтобы он находил минимальные и максимальные координаты X / Y каждого текстового объекта , которые на самом деле находятся на холсте . Тогда легко рассчитать площадь на основании этого. Да, и нет необходимости снова умножать на коэффициент масштабирования при расчете площади. 

  if (object.text) {
    var minX = Math.max(0, object.left);
    var minY = Math.max(0, object.top);
    var right = (object.left + (object.width * object.scaleX));
    var maxX = Math.min(right, canvas.width);
    var bottom = (object.top + (object.height * object.scaleY));
    var maxY = Math.min(bottom, canvas.height);

    totalTextArea += ((maxX - minX) * (maxY - minY));
  }
...