paperjs - efekt fali gryzie się z angularem

0

Czy ktoś z was jest w stanie mi pomóc przerobić ten "bajer" pod angular? Wrzuciłem to sobie do index.html i fala się pokazuje, ale nie pokazuje się nic więcej, nie mam menu, nie mam contentu, a consola rzuca błędami. Wrzucenie tego do index.html dało, że w ogóle fale wyświetla, wszędzie indziej (angular.json) niestety rzuca błędami w consoli i nic nie pokazuje.

Uncaught TypeError: this.setItem is not a function
    at initialize (paper-full.min.js:1)
    at push../node_modules/core-js/modules/_wks.js.module.exports (_wks.js:8)
    at Object../node_modules/core-js/modules/_is-array-iter.js (_is-array-iter.js:3)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/core-js/modules/_for-of.js (_for-of.js:3)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/core-js/modules/_collection-strong.js (_collection-strong.js:7)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/core-js/modules/es6.map.js (es6.map.js:2)
    at __webpack_require__ (bootstrap:78)
paper-full.min.js:1 Uncaught TypeError: this.setItem is not a function
    at initialize (paper-full.min.js:1)
    at Object../node_modules/rxjs/_esm5/internal/symbol/rxSubscriber.js (rxSubscriber.js:3)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/rxjs/_esm5/internal/Subscriber.js (Subscriber.js:1)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/rxjs/_esm5/internal/util/canReportError.js (canReportError.js:1)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/rxjs/_esm5/internal/Observable.js (Observable.js:1)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/rxjs/_esm5/index.js (index.js:1)
      .waves {
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        align-content: center;
        width: 100%;
        height: 50%;
        margin: 0 auto;
        background-color: transparent;
      }

      .waves #appCanvas {
        width: 100%;
        height: 100%;
      }
<body>
      <div class="waves"><canvas id="appCanvas" resize="true"></canvas></div>
    <app-root></app-root>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
</body>
const engine = paper;
      engine.install(window);
      engine.setup("appCanvas");

      function Wave() {}

      function createWave() {
        return new Wave();
      }
      Wave.prototype.setup = function(color, peaks, height, peakHeight) {
        this.path = new Path();
        this.path.fillColor = color || "rgba(0,0,0,0.4)";
        this.peaks = peaks || 3;
        this.peakHeight = peakHeight || 30;
        this.heightRatio = height / 100;
      };
      Wave.prototype.draw = function() {
        this.path.removeSegments();
        let waveHeight =
            engine.view.viewSize.height -
            engine.view.viewSize.height * this.heightRatio,
          start = new Point(engine.view.bounds.leftCenter.x, waveHeight);
        for (let i = 0; i <= this.peaks; i++) {
          this.path.add(start);
          start.x += engine.view.bounds.width / this.peaks;
        }
        this.path.add(
          engine.view.bounds.bottomRight,
          engine.view.bounds.bottomLeft
        );
      };

      Wave.prototype.animate = function(speed) {
        this.speed = speed;
        this.path.onFrame = event => {
          this.draw();
          for (let i = 0; i <= this.peaks; i++) {
            let sinus = Math.sin(event.time * this.speed + i);
            this.path.segments[i].point.y =
              this.path.segments[i].point.y + sinus * this.peakHeight;
          }
          this.path.smooth({
            type: "asymmetric",
            from: this.path.segments[0],
            to: this.path.segments[this.peaks]
          });
        };
      };

      const wave3 = createWave();
      wave3.setup("rgba(0,220,175,1)", 5, 40, 50);
      wave3.animate(2);

      const wave2 = createWave();
      wave2.setup("rgba(0,198,207,1)", 3, 25, 30);
      wave2.animate(2);

      const wave1 = createWave();
      wave1.setup("rgba(0,172,225,1)", 2, 15, 20);
      wave1.animate(2);

      const wave0 = createWave();
      wave0.setup("rgba(0,142,221,1)", 1, 10, 10);
      wave0.animate(2);
1

wydaje mi się, że mieszasz kilka rzeczy naraz:

  • przerzuciłbym <canvas> do komponentu <app-root>
  • dociągnął paczkę npm i @types/paper - pogooglaj paperjs typescript i podlinkuj w projekcie
    nie twierdzę, że to rozwiązanie zadziała, ale możesz spróbować
0

Super! Fala jest, dane są ale... W projekcie asp net, który przerabiam na angular miałem tak, że fala była tłem, była z tyłu wszystkich innych danych. Teraz niestety wyświetla się "z przodu". Próbowałem manewrować z-index ale nic to nie daje, albo cały czas jest z przodu, albo znika całkiem. Błędów w konsoli nie ma, więc teraz jest kwestia stylów, ale pomysłów mi brakuje...

#edit
Cofam! :D wrzuciłem w odpowiedni container i śmiga :D dzięki bardzo o wielki mistrzu

1 użytkowników online, w tym zalogowanych: 0, gości: 1