Не могу обновить Konva rect - PullRequest
Новая
       9

Не могу обновить Konva rect

0 голосов
/ 25 мая 2018

Я построил сетку прямоугольников и кешировал их, вызвав group.children.cache ();

После этого при перемещении мыши я установил 

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

и вызвал

layer.draw().

без звонка group.clearCache() Я не вижу обновлений.

это правильный способ обновления Rect?

с помощью clearCache()он работает в Chrome и Safari, но в Firefox на Mac у меня много проблем с производительностью.

Может кто-нибудь мне помочь?

1 Ответ

0 голосов
/ 28 мая 2018

это когда я создаю ректы 

  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();
...