Question

我构建了一个矩形网格，并通过调用group.children.cache（）;

来缓存它们

在鼠标移动之后，我已经设置了

rect.fillPatternOffsetX(Math.max(newScaleWidth, 0));
rect.fillPatternOffsetY(Math.max(newScaleHeight, 0));

我打电话给

layer.draw()。

不调用group.clearCache()我看不到更新。

这是更新Rect的正确方法吗？

clearCache()适用于Chrome和Safari，但在Mac上的Firefox上我遇到了很多性能问题。

有人可以帮助我吗？

Answer 1

当我创建rects

时

  const rect = new Konva.Rect({
      x: coor.x * this.widthObject,
      y: coor.y * this.heightObject,
      width: this.widthObject,
      height: this.heightObject,
      fillPatternImage: imageObj,
      fillPatternOffsetX: this.scaleWidth,
      fillPatternOffsetY: this.scaleHeight,
      fillPatternScale: {
        x: this.patternScaleX,
        y: this.patternScaleY,
      },
      trick,
  });

    rect.on('click tap', this.handleClickRect);

    this.group.add(rect);

    this.layer.add(this.group);
    this.stage.add(this.layer);
    this.group.children.cache();

鼠标移动

   rects.map((rect) => {
      rect.fillPatternScaleX(Math.min(
        this.patternScaleX,
        this.ratioImageWidthOnRect + incrementScaleRectsX,
      ));
      rect.fillPatternScaleY(Math.min(
        this.patternScaleY,
        this.ratioImageHeightOnRect + incrementScaleRectsY,
      ));
      rect.fillPatternOffsetX(Math.max(newScaleWidth, 0));
      rect.fillPatternOffsetY(Math.max(newScaleHeight, 0));
      return rect;
  });

  // this.group.children.clearCache()
  this.layer.draw();

无法更新Konva rect

1 个答案: