0

Есть у меня некая фигура нарисованная в Canvas. Необходимо зеркально отразить фигуру по заданной прямой. Подскажите, как реализовать на JavaScript?

Фото-пример

5
  • Прошу идей, так как сам не могу придумать ничего:)
    – pishak
    11 дек 2016 в 18:19
  • @pishak Координаты первого треугольника и линии известны перед тем, как нужно начинать делать зеркальное отражение? 11 дек 2016 в 20:21
  • Вообще это вопрос не JS и не canvas'a, а вопрос скорее алгоритма и математики, а точнее геометрии. Вам необходимо изучить вопрос построения симметрий 11 дек 2016 в 20:32
  • @Mr.Brightside данные о фигуре и прямой должны быть известны иначе задачу не решить
    – ampawd
    11 дек 2016 в 21:08
  • ctx.save //save ctx.draw //draw shape ctx.scale(-1, 1); //rotate shape ctx.restore // restore
    – TitaN
    4 янв 2017 в 12:03

1 ответ 1

4

что-то я увлёкся этой задачей ))

в общем, один из способ построить отражение - это опустить перпендикуляр из каждой точки полигона на прямую, найти координаты этих точек, и сместить их на вектор этого перпендикуляра, так как эта величина должна быть одинаковой как для отражённого так и исходного полигона.

По существу, всё сводится к тому, чтобы найти эти точки на прямой.

пусть P0 это некая точка полигона, обозначим через P1, P2 точки, через которые проходит прямая.

и пусть A это точка на прямой полученная выше-описанным способом.

тогда, в силу того, что угол между векторами (P0, A)(P1, P2) прямой - их скалярное произведение (P0, A)(P1, P2) = 0

но с другой стороны, A принадлежит прямой (P1, P2)

следовательно, получаем простенькую систему из двух уравнений с двумя неизвестными (A.x, A.y)

(A.x - P0.x)*(P2.x - P1.x) + (A.y - P0.y)*(P2.y - P1.y) = 0
(A.x - P1.x)*(P2.y - P1.y) - (A.y - P1.y)*(P2.x - P1.x) = 0

обозначим через B = P2.x - P1.x и C = P2.y - P1.y

после простейших тождественных преобразований этой системы, получаем эквивалентную ей систему

B*A.x + C*A.y = B*P0.x + C*P0.y
C*A.x - B*A.y = C*P1.x - B*P1.y

тривиально решаемую, например, методом крамера.

      |B*P0.x + C*P0.y,  C|
      |C*P1.x - B*P1.y, -B|
 A.x = ---------------------
          -B*B - C*C

      |B,  B*P0.x + C*P0.y|
      |C,  C*P1.y - B*P1.y|
 A.y = ---------------------
          -B*B - C*C

и окончательная формула некой точки отражённого полигона будет

x = A.x + (A.x - P0.x)
y = A.y + (A.y - P0.y)

интерактивный результат

(function() {
const cnv = document.getElementById("cnv");
const ctx = cnv.getContext("2d");
const reflectbtn = document.getElementById("reflect");
const againbtn = document.getElementById("again");

function initApp() {
    cnv.width = window.innerWidth;
    cnv.height = window.innerHeight;
}

let Vec2 = function(x = 0, y = 0) {
    this.x = x;
    this.y = y;
}

let polygonVertices = [
    new Vec2(150, 110),
    new Vec2(230, 10),
    new Vec2(300, 110)
];
let reflectionLinePoints = [
    new Vec2(200, 310),
    new Vec2(300, 10)
];

function drawPolygon(vertices) {
    if (vertices.length == 0)
        return;
    vertices.forEach(function(v) {
        drawPoint(v);
    });
    ctx.beginPath();
    vertices.forEach(function(v) {
        ctx.lineTo(v.x, v.y);
    });
    ctx.lineTo(vertices[0].x, vertices[0].y);
    ctx.stroke();
    ctx.closePath();
}

function drawLine(linePoints) {
    drawPoint(linePoints[0]);
    drawPoint(linePoints[1]);
    ctx.save();
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(linePoints[0].x, linePoints[0].y);
    ctx.lineTo(linePoints[1].x, linePoints[1].y);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

function computeA(p0, p1, p2) {
    let b = p2.x - p1.x;
    let c = p2.y - p1.y;
    let denom = b * (-b) - c * c;
    let ax = -b * (b * p0.x + c * p0.y) - c * (c * p1.x - b * p1.y);
    let ay = b * (c * p1.x - b * p1.y) - c * (b * p0.x + c * p0.y);
    return new Vec2(
        ax / denom,
        ay / denom
    );
}

function drawPoint(p) {
    ctx.beginPath();
    ctx.arc(p.x, p.y, 3, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
}

function reflect(linePoints, polygonPoints) {
    let points = [];
    polygonPoints.forEach(function(p, i) {
        let a = computeA(p, linePoints[0], linePoints[1]);
        a.x += a.x - p.x;
        a.y += a.y - p.y;
        points.push(a);
    });
    return points;
}

initApp();
drawPolygon(polygonVertices);
drawLine(reflectionLinePoints);

reflectbtn.onclick = function() {
    ctx.clearRect(0, 0, cnv.width, cnv.height);
    drawPolygon(polygonVertices);
    drawLine(reflectionLinePoints);
    let reflectedPoints = reflect(reflectionLinePoints, polygonVertices);
    drawPolygon(reflectedPoints);
}

againbtn.onclick = function() {
    ctx.clearRect(0, 0, cnv.width, cnv.height);
    drawPolygon(polygonVertices);
    drawLine(reflectionLinePoints);
}

}());
<button id="reflect">reflect</button>
<button id="again">again</button>
<canvas id="cnv"></canvas>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.