如何使用 fabricjs 计算 canvas 范围内所有文本对象的面积？

Question

我正在开发一个函数，计算 canvas 上的文本总面积（使用其边界，而不是文本本身）占总 canvas 大小的百分比。目前，它只检查 canvas 上所有文本对象的大小与 canvas 的总面积的对比，不考虑可能在 [=40= 之外剪裁的文本的任何部分]边界.

我想计算 canvas 边界外的总面积，然后从文本对象的总面积中减去。

我被计算这个所需的一些数学所困扰。这些是执行此计算所需的基本信息：

canvas的宽度和高度（px）
文本对象的宽度和高度（px）
对象的"left"和"bottom"位置(px)

计算首先需要确定对象是否确实在canvas范围之外。然后它需要确定 "left" 或 "bottom" 位置是正数还是负数。

这是我目前的代码，但我觉得我走错了路：

  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;
  }

Answer 1

我认为你是对的，我稍微修改了你的代码，以便它找到每个文本对象的最小和最大 X/Y 坐标 实际上是canvas。然后根据它计算面积就很简单了。哦，计算面积时不需要再乘以比例因子。

  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));
  }

如何使用 fabricjs 计算 canvas 范围内所有文本对象的面积？

How do I calculate area of all text objects inside the canvas bounds using fabricjs?

javascript

fabricjs