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