console
const imgUrl = "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.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) {
let texture = resource.pic1.texture
let renderer = new PIXI.autoDetectRenderer(600, 600, {
});
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;
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;
x = ix / (cols - 1);
var k = Point.fromBezier([yl, cp0, cp1, yr], x);
mesh.vertices[2 * i] = k.x;
mesh.vertices[2 * i + 1] = k.y
}
}
}
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;
}
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>