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 that you have read and understand our privacy policy and code of conduct.

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