javascript - 如何使用fabricjs计算 Canvas 边界内所有文本对象的面积？

Question

我正在研究一个函数，该函数计算 Canvas 上文本的总面积(使用其边界，而不是文本本身)占 Canvas 总大小的百分比。目前，它仅检查 Canvas 上所有文本对象的大小与 Canvas 的总面积，并且不考虑可能在 Canvas 边界之外剪切的任何文本部分。

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

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

Canvas 的宽度和高度(px)

文本对象的宽度和高度(px)

对象的“左”和“下”位置(px)

计算首先需要确定对象是否真的在 Canvas 边界之外。然后它需要确定“左”或“下”位置是正还是负。

这是我到目前为止的代码，但我觉得我走错了路:

  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

我认为你在正确的路线上，我已经稍微修改了你的代码，以便它找到实际上在 Canvas 上的每个文本对象的最小和最大 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));
  }