Question

Konva.js是一个非常好的图书馆。如果您是图书馆的贡献者，请完全感谢您。

我有写一个转置函数的情况。 “转置功能”是指2个功能相同但只有不同的方向 - 垂直和水平。

有关详细信息，我需要编写以下自定义函数。

 Konva.Group.prototype.verticalCut(position)   
 Konva.Group.prototype.horizontalCut(position)    

 Konva.Group.prototype.verticalShrink(direction, amount)
 Konva.Group.prototype.horizontalShrink(direction, amount)

 Konva.Group.prototype.verticalExpand(direction, amount)
 Konva.Group.prototype.horizontalExpand(direction, amount)

当然，组实例包含各种类型的子代。实际上，我已经编写了verticalCut和horizontalCut函数。但正如您所料，除了x，y和宽度，高度值之外，代码几乎相同。以下是我的代码。

这是verticalCut函数

Konva.Group.prototype.verticalCut = function(pos) {
  const woodGroup = this;
  const wood = woodGroup.findOne('.wood');

  var relPos = {
    x: pos.x / App.factor - woodGroup.x(),
    y: pos.y / App.factor - woodGroup.y()
  }

  const lGroupPos = woodGroup.position();
  const lGroupSize = {
    width : relPos.x,
    height : wood.height()
  }

  const rGroupPos = {
    x: woodGroup.x() + relPos.x,
    y: woodGroup.position().y
  }
  const rGroupSize = {
    width: wood.width() - relPos.x,
    height: wood.height()
  }

  //woodGroup contains wood rectangle and width, height labels
  const lGroup = makeWoodGroup(lGroupPos.x, lGroupPos.y, lGroupSize.width, lGroupSize.height);
  const rGroup = makeWoodGroup(rGroupPos.x, rGroupPos.y, rGroupSize.width, rGroupSize.height);

  App.woodLayer.add(lGroup).add(rGroup);

  this.destroy();
  App.woodLayer.draw();

}

和horizontalCut函数

Konva.Group.prototype.horizontalCut = function(pos) {
  const woodGroup = this;
  const wood = woodGroup.findOne('.wood');

  var relPos = {
    x: pos.x / App.factor - woodGroup.x(),
    y: pos.y / App.factor - woodGroup.y()
  }

  const uGroupPos = woodGroup.position();
  const uGroupSize = {
    width : wood.width(),
    height : relPos.y
  }

  const bGroupPos = {
    x: woodGroup.position().x,
    y: woodGroup.y() + relPos.y
  }
  const bGroupSize = {
    width: wood.width(),
    height: wood.height() - relPos.y
  }

  //woodGroup contains wood rectangle and width, height labels
  const uGroup = makeWoodGroup(uGroupPos.x, uGroupPos.y, uGroupSize.width, uGroupSize.height);
  const bGroup = makeWoodGroup(bGroupPos.x, bGroupPos.y, bGroupSize.width, bGroupSize.height);

  const hEdge = makeCuttingEdge(hEdgeStartPos, hEdgeEndPos);

  App.woodLayer.add(uGroup).add(bGroup);

  this.destroy();
  App.woodLayer.draw();

}

哦........抱怨因为浪费电量，存储字节和你的时间，制作2个重复的代码......我不知道在编写这些代码时我是如何忍受痛苦的。当然，我有4个以上的功能（如果有2个就很开心）。也许如果我犯了1个错误，我必须纠正配对函数中的相同错误。灾难!!

解决此问题的最佳做法是什么？

我的一个想法是制作转置功能，并在调用工作方法之前始终创建转置实例。这样，我只需要编写一个水平方向函数。当我以垂直方式需要该作业时，转置我的实例属性（x-> y，y-> x，w-> h，h-> w），调用水平函数，然后转置回来。

这样安全吗？我有任何缺件吗？谢谢！

Answer 1

我认为你想要的是变换功能。 Konvajs可能不会这样做但你总是可以css3 transforms来改变你拥有konvajs阶段的div（或其他元素）。

编写转置函数的有效方法是什么

1 个答案: