Нарисуйте искаженное изображение на холсте и не покажите проволочную сетку. ⇐ Html

[Anonymous]

Я пытаюсь трансформировать и/или перевернуть изображение. Однако в моей текущей реализации видна проволочная сетка, и я не знаю, как ее удалить.
Я пытался использовать http://tulrich.com/geekstuff/canvas/ Perspective.html, но я до сих пор не могу понять, что контрольная точка и отсутствие проволочной сетки вместе. Спасибо!
Я также исследовал следующий вопрос: «Нарисовать искаженное изображение на холсте html5», но мне не нужны ответы, подобные этому, потому что мне нужно, чтобы изображение переворачивалось или контрольные точки меняются местами без проволочной сетки.

Код: Выделить всё

var triangle1 = new Triangle(
new Point(p1x-1, p1y),
new Point(p3x+2, p3y+1),
new Point(p4x-1, p4y+1),
new TextCoord(u1, v1),
new TextCoord(u2, v2),
new TextCoord(u1, v2)
);

var triangle2 = new Triangle(
new Point(p1x-2, p1y),
new Point(p2x+1, p2y),
new Point(p3x+1, p3y+1),
new TextCoord(u1, v1),
new TextCoord(u2, v1),
new TextCoord(u2, v2)
);

Вот URL-адрес кода моей программы:

Код: Выделить всё

var controls = []
var canvas
var context
var image
var triangles = []
var dirtyTriangles = true

var rand = function(s, e) {
return Math.random() * (e - s) + s
}

// dom ready
document.addEventListener("DOMContentLoaded", function() {
image = new Image();
image.onload = function() {
setInterval(draw, 1000 / 60);
};
image.src = "https://cdn.pixabay.com/photo/2023/09/17/22/25/witch-8259351_1280.jpg";

canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

context = canvas.getContext("2d");

controls = [];
for (let i = 0; i < 4; ++i) {
const control = document.createElement("div");
control.classList.add("node");
document.body.appendChild(control);
controls.push(control);
}

controls[0].style.left = "25px";
controls[0].style.top = "25px";

controls[1].style.left = "250px";
controls[1].style.top = "25px";

controls[2].style.left = "250px";
controls[2].style.top = "250px";

controls[3].style.left = "25px";
controls[3].style.top = "250px";

document.body.addEventListener("mousedown", function(e) {
if (e.target.classList.contains("node")) {
const node = e.target;

const mouseMoveHandler = function(e) {
const x = e.pageX + "px";
const y = e.pageY + "px";
node.style.left = x;
node.style.top = y;
dirtyTriangles = true;
};

const mouseUpHandler = function() {
document.body.removeEventListener("mousemove", mouseMoveHandler);
document.body.removeEventListener("mouseup", mouseUpHandler);
};

document.body.addEventListener("mousemove", mouseMoveHandler);
document.body.addEventListener("mouseup", mouseUpHandler);
}
});
});

var draw = function() {
context.clearRect(0, 0, 500, 500)

var render = function(wireframe, image, tri) {
if (image) {
drawTriangle(
context,
image,
tri.p0.x,
tri.p0.y,
tri.p1.x,
tri.p1.y,
tri.p2.x,
tri.p2.y,
tri.t0.u,
tri.t0.v,
tri.t1.u,
tri.t1.v,
tri.t2.u,
tri.t2.v,
)
}
}

if (dirtyTriangles) {
dirtyTriangles = false
calculateGeometry()
}

for (triangle of triangles) {
render(false, image, triangle)
}
}

var calculateGeometry = function() {
// clear triangles out
triangles = []
// generate subdivision
var subs = 7
var divs = 7
const p1 = new Point(
parseInt(controls[0].style.left) + 6,
parseInt(controls[0].style.top) + 6,
)
const p2 = new Point(
parseInt(controls[1].style.left) + 6,
parseInt(controls[1].style.top) + 6,
)
const p3 = new Point(
parseInt(controls[2].style.left) + 6,
parseInt(controls[2].style.top) + 6,
)
const p4 = new Point(
parseInt(controls[3].style.left) + 6,
parseInt(controls[3].style.top) + 6,
)

var dx1 = p4.x - p1.x
var dy1 = p4.y - p1.y
var dx2 = p3.x - p2.x
var dy2 = p3.y - p2.y

var imgW = image.naturalWidth
var imgH = image.naturalHeight

for (var sub = 0; sub < subs;  ++sub) {
var curRow = sub / subs
var nextRow = (sub + 1) / subs

var curRowX1 = p1.x + dx1 * curRow
var curRowY1 = p1.y + dy1 * curRow

var curRowX2 = p2.x + dx2 * curRow
var curRowY2 = p2.y + dy2 * curRow

var nextRowX1 = p1.x + dx1 * nextRow
var nextRowY1 = p1.y + dy1 * nextRow

var nextRowX2 = p2.x + dx2 * nextRow
var nextRowY2 = p2.y + dy2 * nextRow
for (var div = 0; div < divs; ++div) {
var curCol = div / divs
var nextCol = (div + 1) / divs
var dCurX = curRowX2 - curRowX1
var dCurY = curRowY2 - curRowY1
var dNextX = nextRowX2 - nextRowX1
var dNextY = nextRowY2 - nextRowY1
var p1x = curRowX1 + dCurX * curCol
var p1y = curRowY1 + dCurY * curCol

var p2x = curRowX1 + (curRowX2 - curRowX1) * nextCol
var p2y = curRowY1 + (curRowY2 - curRowY1) * nextCol

var p3x = nextRowX1 + dNextX * nextCol
var p3y = nextRowY1 + dNextY * nextCol

var p4x = nextRowX1 + dNextX * curCol
var p4y = nextRowY1 + dNextY * curCol
var u1 = curCol * imgW
var u2 = nextCol * imgW
var v1 = curRow * imgH
var v2 = nextRow * imgH

var triangle1 = new Triangle(
new Point(p1x, p1y),
new Point(p3x, p3y),
new Point(p4x, p4y),
new TextCoord(u1, v1),
new TextCoord(u2, v2),
new TextCoord(u1, v2),
)
var triangle2 = new Triangle(
new Point(p1x, p1y),
new Point(p2x, p2y),
new Point(p3x, p3y),
new TextCoord(u1, v1),
new TextCoord(u2, v1),
new TextCoord(u2, v2),
)

triangles.push(triangle1)
triangles.push(triangle2)
}
}
}
var drawTriangle = function(
ctx,
im,
x0,
y0,
x1,
y1,
x2,
y2,
sx0,
sy0,
sx1,
sy1,
sx2,
sy2,
) {
ctx.save()
ctx.beginPath()
ctx.moveTo(x0, y0)
ctx.lineTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.closePath()
//ctx.stroke();
ctx.clip()
// TODO: eliminate common subexpressions.
var denom = sx0 * (sy2 - sy1) - sx1 * sy2 + sx2 * sy1 + (sx1 - sx2) * sy0
if (denom == 0) {
return
}
var m11 = -(sy0 * (x2 - x1) - sy1 * x2 + sy2 * x1 + (sy1 - sy2) * x0) / denom
var m12 = (sy1 * y2 + sy0 * (y1 - y2) - sy2 * y1 + (sy2 - sy1) * y0) / denom
var m21 = (sx0 * (x2 - x1) - sx1 * x2 + sx2 * x1 + (sx1 - sx2) * x0) / denom
var m22 = -(sx1 * y2 + sx0 * (y1 - y2) - sx2 * y1 + (sx2 - sx1) * y0) / denom

var dx =
(sx0 * (sy2 * x1 - sy1 * x2) +
sy0 * (sx1 * x2 - sx2 * x1) +
(sx2 * sy1 - sx1 * sy2) * x0) /
denom
var dy =
(sx0 * (sy2 * y1 - sy1 * y2) +
sy0 * (sx1 * y2 - sx2 * y1) +
(sx2 * sy1 - sx1 * sy2) * y0) /
denom
ctx.transform(m11, m12, m21, m22, dx, dy)

// Draw the whole image.   Transform and clip will map it onto the
// correct output triangle.
//
// TODO: figure out if drawImage goes faster if we specify the rectangle that
// bounds the source coords.
ctx.drawImage(im, 0, 0)
ctx.restore()
}

// point class

var Point = function(x, y) {
this.x = x ? x : 0
this.y = y ? y : 0
}

var p = Point.prototype

p.length = function(point) {
point = point ? point : new Point()
var xs = 0,
ys = 0
xs = point.x - this.x
xs = xs * xs

ys = point.y - this.y
ys = ys * ys
return Math.sqrt(xs + ys)
}

var TextCoord = function(u, v) {
this.u = u ? u : 0
this.v = v ? v : 0
}

var Triangle = function(p0, p1, p2, t0, t1, t2) {
this.p0 = p0
this.p1 = p1
this.p2 = p2

this.t0 = t0
this.t1 = t1
this.t2 = t2
}

Код: Выделить всё

body {
background-color: #111;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.node {
border-radius: 12px;
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: magenta;
}

canvas {
background-color: white;
width: 500px;
height: 500px;
}

JSFiddle


Я надеюсь, что даже если все изображение перевернуть, там не будет проволочной сетки.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -wire-mesh