使用选定的页面元素创建网格 (n,n)

Question

使用 Google 应用程序脚本，我正在生成一个包含选定元素的网格。在下面的这个例子中——我给了输入行 2 和列 3 来生成网格的顺序。我的逻辑好像是产生了错误的行和列。

问题：行数和列数错误。

function grid() {
  var selection = SlidesApp.getActivePresentation().getSelection();
  var pageElements = selection.getPageElementRange().getPageElements();

  //init
  var numRows = 2;
  var horizontalSpace = 5;
  var numColumns = 3;
  var verticalSpace = 10;

  /*get Left, Top, width, height of ist shape.*/
  var shape0Left = pageElements[0].asShape().getLeft(),
    shape0Top = pageElements[0].asShape().getTop(),
    shape0Width = pageElements[0].asShape().getWidth(),
    shape0Height = pageElements[0].asShape().getHeight();

  /*Set the element properties*/
  var elemLeft = shape0Left,
    elemTop = shape0Top,
    elemWidth = 0,
    elemHeight = 0;

  /*Iterate the page selected elements*/
  pageElements.forEach(function(item, index) {
    pageElements[index]
      .asShape()
      .setLeft(elemLeft)
      .setTop(elemTop);

    /*Something wrong with the logic*/
    if ((index + 1) % numRows == 0) {
      /*update the properties of each shape to place in row column order */
      elemTop = shape0Top + pageElements[index].asShape().getHeight() + 10;
      elemLeft = shape0Left;
    } else {
      elemLeft = shape0Left + pageElements[index].asShape().getWidth() + 10;
    }
  });
}

即将到来的结果预期输出：

Answer 1

根据您正在采取的策略，您应该使用 += 运算符更新 elemTop 和 elemLeft 变量，以确保在适当的地方包含旧值。

此外，您已经设置了这些不错的 verticalSpace 和 horizontalSpace 常量；使用它们！

如果因为只想操作前 6 个元素而需要尽早跳出元素循环，则不能在整个数组上使用 forEach（至少不能没有 if (index >= 6) return;警卫）。您可以使用常规 for 循环遍历并测试 i < rumRows * numColumns，或者您可以使用 pageElements.slice(0, n) 获取第一个 n 元素并使用forEach 在那个数组上。

最后，根据您的设置方式，我们需要检查我们是否在最后一列。要检查当前列号（零索引），您可以使用 var col = i % numColumns.

使用 for 循环：

  /*Iterate the page selected elements*/
  for (var i = 0; i < numRows * numColumns; ++i) {       
    pageElements[i].asShape().setLeft(elemLeft).setTop(elemTop);
    var col = i % numColumns;
    if ((col+1) % numColumns == 0) {         
      elemTop += pageElements[i].asShape().getHeight() + verticalSpace;
      elemLeft = shape0Left;   
    } else {
      elemLeft += pageElements[i].asShape().getWidth() + horizontalSpace;
    }
  }

使用 slice 和 forEach:

  pageElements.slice(0, numRows * numColumns).forEach(function(item, index){
    item.asShape().setLeft(elemLeft).setTop(elemTop);
    var col = index % numColumns;
    if ((col+1) % numColumns == 0) {         
      elemTop += item.asShape().getHeight() + verticalSpace;
      elemLeft = shape0Left;   
    } else {
      elemLeft += item.asShape().getWidth() + horizontalSpace;
    }
  });

使用选定的页面元素创建网格 (n,n)

Create grid (n,n) with selected page elements

sidebar

add-on

google-apps-script

google-slides