Question

我已经在我的app.component文件中构建了一个p5草图，但它似乎始终位于所有其他组件的底部。现在，我对如何解决此问题不知所措，因此我的草图始终位于顶部。对于如何控制草图位置的任何帮助，将不胜感激！

<!--  this is the main app.component.html -->
<div class="nav">
  <button [routerLink]="['/']"> Landing </button>
  <button [routerLink]="['/resume']"> Resume </button>
  <button [routerLink]="['/projects']"> Projects </button>
  <button [routerLink]="['/pagenotfound']"> pagenotfound </button>
</div>

<div style="text-align:center">
  <h1> {{ title }} </h1>
</div>

<router-outlet></router-outlet>

这是app.component.ts

import {
  Component
} from '@angular/core';
import 'p5';
declare
var p5: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = '';
  test: any
  private p5sketch;
  constructor() {}

  ngOnInit() {
    this.createCanvas();
    if (window.innerWidth < 600) {
      this.title = 'Welcome to my Portfolio'
    }
  }

  private createCanvas() {
    this.p5sketch = new p5(this.sketch);
  }


  private sketch(p: any) {
    // not showing for mobile because it looks horrible and takes up processing
    if (window.innerWidth < 600) {
      return;
    }
    var canvasVector = {
      'width': 1200,
      'height': 200
    }
    var font;
    var vehicles = [];

    // preload
    p.preload = () => {
      font = p.loadFont('../assets/AvenirNextLTPro-Demi.otf');
    }

    // setup
    p.setup = () => {
      p.createCanvas(window.innerWidth, canvasVector.height);
      p.background(51);

      let verticies = font.textToPoints("Welcome to my Portfolio", p.width * .1, p.height / 1.5, 100);
      verticies.map((dot) => vehicles.push(new Vehicle(dot.x, dot.y)));
    };

    function Vehicle(x, y) {
      this.pos = p.createVector(p.random(p.width), p.random(p.height));
      this.target = p.createVector(x, y);
      this.vel =
        p5.Vector.random2D();
      // p.createVector(); 
      this.acc = p.createVector();
      this.maxspeed = 10;
      this.maximumforce = 1;
    }

    Vehicle.prototype.update = function() {
      this.pos.add(this.vel);
      this.vel.add(this.acc);
      this.acc.mult(0);
    }
    Vehicle.prototype.show = function() {
      p.stroke(255);
      p.strokeWeight(5);
      p.point(this.pos.x, this.pos.y);
    }
    Vehicle.prototype.behaviors = function() {
      var arrive = this.arrive(this.target);
      var mouse = p.createVector(p.mouseX, p.mouseY);
      var flee = this.flee(mouse).mult(5);

      this.applyForce(arrive);
      this.applyForce(flee);
    }
    Vehicle.prototype.applyForce = function(f) {
      this.acc.add(f);
    }
    Vehicle.prototype.flee = function(target) {
      var desired = p5.Vector.sub(target, this.pos);
      var d = desired.mag();
      if (d < 50) {
        desired.setMag(this.maxspeed);
        desired.mult(-1);
        var steer = p5.Vector.sub(desired, this.vel);
        steer.limit(this.maximumforce)
        return steer;
      } else {
        return p.createVector(0, 0);
      }
    }
    Vehicle.prototype.arrive = function(target) {
      var desired = p5.Vector.sub(target, this.pos);
      var d = desired.mag();
      var speed = (d < 100) ?
        speed = p.map(d, 0, 100, 0, this.maxspeed) :
        this.maxspeed;
      desired.setMag(speed);
      var steer = p5.Vector.sub(desired, this.vel);
      steer.limit(this.maximumforce)
      return steer;
    }



    // draw 
    p.draw = () => {
      p.background(51);
      for (let i = 0; i < vehicles.length; i++) {
        var v = vehicles[i];
        v.behaviors();
        v.update();
        v.show();
      }

    }
    // end draw


  }


}

Answer 1

如果您使用默认的createCanvas()函数，则它将创建一个新画布并将其添加到页面底部。

您可以使用P5.dom库（特别是parent()函数）移动画布。来自the reference：

// in the html file:
  // <div id="myContainer"></div>
// in the js file:
var cnv = createCanvas(100, 100);
cnv.parent('myContainer');

这会将画布移动到myContainer div元素中。

p5草图始终在其他角度分量下方

1 个答案: