SOURCE

console 命令行工具 X clear

                    
>
console
const imgUrl = "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg";
// const imgUrl ="./_20200303160502.jpg";
let tl = {
  x: -0.9,
  y: 60.6
};
let tr = {
  x: 301.1,
  y: -4.3
};
let bl = {
  x: 109.8,
  y: 465.5
};
let br = {
  x: 372.6,
  y: 351.4
};

let cpT0 = {
  x: 116.2,
  y: 37.5
};
let cpT1 = {
  x: 196.5,
  y: 25.0
};
let cpL0 = {
  x: 54.0,
  y: 175.7
};
let cpL1 = {
  x: 80.0,
  y: 314.5
};
let cpR0 = {
  x: 342.5,
  y: 106.5
};
let cpR1 = {
  x: 363.5,
  y: 227.5
};
let cpB0 = {
  x: 226.2,
  y: 428.8
};
let cpB1 = {
  x: 307.2,
  y: 395.0
};

let bezierT = [tl, cpT0, cpT1, tr];
let bezierB = [bl, cpB0, cpB1, br];
let bezierL = [tl, cpL0, cpL1, bl];
let bezierR = [tr, cpR0, cpR1, br];

var loader = new PIXI.loaders.Loader();
loader.add('pic1', imgUrl)
  .load(function(target, resource) {
  // var texture = PIXI.Texture.fromImage(imgUrl)
  let texture = resource.pic1.texture
  // let renderer = new PIXI.autoDetectRenderer(texture.width, texture.height, {
  let renderer = new PIXI.autoDetectRenderer(600, 600, {
    // antialias: true,
    // transparent: true,
    // backgroundColor: 0xFFFFFE,
  });
  const pointsX = 20;
  const pointsY = 20;
  document.body.appendChild(renderer.view);
  mesh = new PIXI.mesh.Plane(texture, pointsX, pointsY);
  mesh.width = texture.width;
  mesh.height = texture.height;
  // 容器坐顶点位置
  let mContainer = new PIXI.Container();
  mContainer.x = 0;
  mContainer.y = 0;
  mContainer.addChild(mesh);

  update(mesh, pointsX, pointsY, mContainer);
  renderer.render(mContainer);
});

function update(mesh, rows, cols, mContainer) {
  var q, i, ix, iy, x, y;
  // var rows = rows - 1;
  // var cols = cols - 1;
  for (iy = 0; iy < rows; iy++) {
    y = iy / (rows - 1);
    var yl = Point.fromBezier(bezierL, y);
    var yr = Point.fromBezier(bezierR, y);
    var cp0 = Point.lerp(cpT0, cpB0, y);
    var cp1 = Point.lerp(cpT1, cpB1, y);
    for (ix = 0; ix < cols; ix++) {
      i = ix + iy * cols;
      // q = this.grid.points[i];
      x = ix / (cols - 1);
      var k = Point.fromBezier([yl, cp0, cp1, yr], x);
      // debugger
      mesh.vertices[2 * i] = k.x;
      mesh.vertices[2 * i + 1] = k.y

      // let p = new PIXI.Graphics();
      // p.beginFill(0xfacacd);
      // if (i >= 200) {
      //   p.beginFill(0xffffff);
      // }
      // // p.drawCircle(k.x, k.y, 5);
      // p.drawCircle(mesh.vertices[i], mesh.vertices[i + 1], 5);
      // p.endFill();
      // p.interactive = true;
      // // p.vi = [i, i + 1];
      // addInteraction(p);
      // mContainer.addChild(p);
      // let p2 = new PIXI.Graphics();
      // p2.beginFill(0x678345);
      // p2.drawCircle(k.x, k.y, 5);
      // p2.endFill();
      // p2.interactive = true;
      // p2.vi = [i, i + 1];
      // mContainer.addChild(p2);
    }
  }
}
class Point {

  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }

  static fromBezier(bezier, t) {

    var a = bezier[0];
    var b = bezier[1];
    var c = bezier[2];
    var d = bezier[3];

    var ab = Point.lerp(a, b, t);
    var bc = Point.lerp(b, c, t);
    var cd = Point.lerp(c, d, t);

    ab.lerp(bc, t);
    bc.lerp(cd, t);

    return ab.lerp(bc, t);
  }

  static centroid(points) {

    var point = new Point();
    var total = points.length;

    if (total === 1) {
      return point.copy(points[0]);
    }

    for (var i = 0; i < total; i++) {
      Point.add(point, points[i]);
    }

    return point;
  }

  static lerp(point1, point2, t) {

    var x = point1.x + (point2.x - point1.x) * t;
    var y = point1.y + (point2.y - point1.y) * t;
    return new Point(x, y);
  }

  static copy(point) {
    return new Point(point.x, point.y);
  }

  static equals(point1, point2) {
    return point1.x === point2.x && point1.y === point2.y;
  }

  static fuzzyEquals(point1, point2, epsilon = 1e-6) {

    var a0 = point1.x;
    var a1 = point1.y;
    var b0 = point2.x;
    var b1 = point2.y;

    return (Math.abs(a0 - b0) <= epsilon * Math.max(1.0, Math.abs(a0), Math.abs(b0)) && Math.abs(a1 - b1) <= epsilon * Math.max(1.0, Math.abs(a1), Math.abs(b1)));
  }

  static add(point1, point2) {
    return new Point(point1.x + point2.x, point1.y + point2.y);
  }

  static subtract(point1, point2) {
    return new Point(point2.x - point1.x, point2.y - point1.y);
  }

  static multiply(point, scalar) {
    return new Point(point.x * scalar, point.y * scalar);
  }

  static divide(point, scalar) {
    return new Point(point.x / scalar, point.y / scalar);
  }

  static fromPoints(point1, point2) {
    return new Point(point2.x - point1.x, point2.y - point1.y);
  }

  static negate(point) {
    return new Point( - point.x, -point.y);
  }

  static normalize(point) {

    var x = point.x;
    var y = point.y;

    var len = x * x + y * y;

    if (len > 0) {

      len = 1 / Math.sqrt(len);
      point.x = point.x * len;
      point.y = point.y * len;
    }

    return point;
  }

  static parse(obj, xProp = "x", yProp = "y") {
    var point = new Point();
    if (obj[xProp]) point.x = parseInt(obj[xProp], 10);
    if (obj[yProp]) point.y = parseInt(obj[yProp], 10);
    return point;
  }

  static mid(point1, point2) {
    var x = (point1.x + point2.x) / 2;
    var y = (point1.y + point2.y) / 2;
    return new Point(x, y);
  }

  add(point) {
    this.x += point.x;
    this.y += point.y;
    return this;
  }

  // Horizontal angle
  angle() {
    var angle = Math.atan2(this.y, this.x);
    if (angle < 0) angle += 2 * Math.PI;
    return angle;
  }

  ceil() {
    this.x = Math.ceil(this.x);
    this.y = Math.ceil(this.y);
    return this;
  }

  clone() {
    return new Point(this.x, this.y);
  }

  copy(point) {
    return this.set(point.x, point.y);
  }

  copyTo(point) {
    point.x = this.x;
    point.y = this.y;
    return point;
  }

  floor() {
    this.x = Math.floor(this.x);
    this.y = Math.floor(this.y);
    return this;
  }

  subtract(point) {
    this.x -= point.x;
    this.y -= point.y;
    return this;
  }

  multiply(scalar) {
    this.x *= scalar;
    this.y *= scalar;
    return this;
  }

  divide(scalar) {
    this.x /= scalar;
    this.y /= scalar;
    return this;
  }

  cross(point) {
    return this.x * point.y - this.y * point.x;
  }

  dot(point) {
    return this.x * point.x + this.y * point.y;
  }

  distance(point) {
    var dx = this.x - point.x;
    var dy = this.y - point.y;
    return Math.sqrt(dx * dx + dy * dy);
  }

  distanceSq(point) {
    var dx = this.x - point.x;
    var dy = this.y - point.y;
    return dx * dx + dy * dy;
  }

  inverse() {
    this.x = 1 / this.x;
    this.y = 1 / this.y;
    return this;
  }

  invert() {
    return this.set(this.y, this.x);
  }

  isZero() {
    return this.x === 0 && this.y === 0;
  }

  length() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }

  lengthSq() {
    return this.x * this.x + this.y * this.y;
  }

  lerp(point, t) {

    this.x += (point.x - this.x) * t;
    this.y += (point.y - this.y) * t;
    return this;
  }

  min(point) {
    this.x = Math.min(this.x, point.x);
    this.y = Math.min(this.y, point.y);
    return this;
  }

  max(point) {
    this.x = Math.max(this.x, point.x);
    this.y = Math.max(this.y, point.y);
    return this;
  }

  negate() {
    this.x = -this.x;
    this.y = -this.y;
    return this;
  }

  normalize() {

    var x = this.x;
    var y = this.y;

    var len = x * x + y * y;

    if (len > 0) {

      len = 1 / Math.sqrt(len);
      this.x = this.x * len;
      this.y = this.y * len;
    }

    return this;
  }

  normalRightHand() {
    return this.set(this.y * -1, this.x);
  }

  perp() {
    return this.set( - this.y, this.x);
  }

  rperp() {
    return this.set(this.y, -this.x);
  }

  random(scale = 1) {

    var r = Math.random() * 2 * Math.PI;

    this.x = Math.cos(r) * scale;
    this.y = Math.sin(r) * scale;
    return this;
  }

  resize(length) {
    return this.normalize().scale(length);
  }

  round() {
    this.x = Math.round(this.x);
    this.y = Math.round(this.y);
    return this;
  }

  rotate(center, angle, distance) {

    var x = this.x - center.x;
    var y = this.y - center.y;

    if (distance == null) {

      var s = Math.sin(angle);
      var c = Math.cos(angle);

      this.x = x * c - y * s + center.x;
      this.y = x * s + y * c + center.y;

    } else {

      var t = angle + Math.atan2(y, x);
      this.x = center.x + distance * Math.cos(t);
      this.y = center.y + distance * Math.sin(t);
    }

    return this;
  }

  scale(scalar) {
    this.x *= scalar;
    this.y *= scalar;
    return this;
  }

  scaleAndAdd(point, scalar) {
    this.x += (point.x * scalar);
    this.y += (point.y * scalar);
    return this;
  }

  set(x, y) {
    this.x = x || 0;
    this.y = y || ((y !== 0) ? x: 0);
    return this;
  }

  transformMatrix(m) {

    var x = this.x;
    var y = this.y;

    this.x = (m.a * x) + (m.c * y) + m.tx;
    this.y = (m.b * x) + (m.d * y) + m.ty;
    return this;
  }

  verticalAngle() {
    return Math.atan2(this.x, this.y);
  }

  zero() {
    this.x = this.y = 0;
    return this;
  }
}
window.onload = init3;
<div>
</div>

本项目引用的自定义外部资源