Получить непереведенную, не повернутую (x, y) координату точки из холста Javascript - PullRequest
Новая
       27

Получить непереведенную, не повернутую (x, y) координату точки из холста Javascript

2 голосов
/ 11 мая 2009

В Javascript мы часто визуализируем графику, поворачивая и переводя координатную плоскость перед отправкой вещей 

ctx.save();
ctx.translate(someX, someY);
ctx.rotate(someAngle * Math.PI / 180);

ctx.beginPath();
ctx.moveTo(x1, y1);    // What's the actual (x1,y1)?
ctx.lineTo(x2, y2);    // What's the actual (x2,y2)?
ctx.stroke();

ctx.restore();

Итак, сделав это, как мне определить фактические значения конечных точек того отрезка, который я нарисовал? Потому что после этого перевода и вращения (x1, y1) и (x2, y2) находятся где-то далеко от того места, где они были бы без перевода и вращения. Есть ли простой способ узнать их фактические значения?

Ответы [ 2 ]

3 голосов
/ 12 мая 2009

Сейчас нет способа получить текущую матрицу преобразования, поэтому вам нужно будет отслеживать любые повороты / переводы / масштабирование самостоятельно.

Чтобы фактически выполнить преобразование, вам нужно умножить матрицу преобразования на точку (как вектор столбца).

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

var contextPrototype = CanvasRenderingContext2D.prototype;

contextPrototype.xform = Matrix.I(3);

contextPrototype.realSave = contextPrototype.save;
contextPrototype.save = function() {
    if (!this.xformStack) {
        this.xformStack = [];
    }
    this.xformStack.push(this.xform.dup());
    this.realSave();
}

contextPrototype.realRestore = contextPrototype.restore;
contextPrototype.restore = function() {
    if (this.xformStack && this.xformStack.length > 0) {
        this.xform = this.xformStack.pop();
    }
    this.realRestore();
}

contextPrototype.realScale = contextPrototype.scale;
contextPrototype.scale = function(x, y) {
    this.xform = this.xform.multiply($M([
        [x, 0, 0],
        [0, y, 0],
        [0, 0, 1]
    ]));
    this.realScale(x, y);
}

contextPrototype.realRotate = contextPrototype.rotate;
contextPrototype.rotate = function(angle) {
    var sin = Math.sin(angle);
    var cos = Math.cos(angle);
    this.xform = this.xform.multiply($M([
        [cos, -sin, 0],
        [sin,  cos, 0],
        [   0,   0, 1]
    ]));
    this.realRotate(angle);
}

contextPrototype.realTranslate = contextPrototype.translate;
contextPrototype.translate = function(x, y) {
    this.xform = this.xform.multiply($M([
        [1, 0, x],
        [0, 1, y],
        [0, 0, 1]
    ]));
    this.realTranslate(x, y);
}

contextPrototype.realTransform = contextPrototype.transform;
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
    this.xform = this.xform.multiply($M([
        [m11, m21, dx],
        [m12, m22, dy],
        [  0,   0,  1]
    ]));
    this.realTransform(m11, m12, m21, m22, dx, dy);
}

contextPrototype.realSetTransform = contextPrototype.setTransform;
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
    this.xform = $M([
        [m11, m21, dx],
        [m12, m22, dy],
        [  0,   0,  1]
    ]);
    this.realSetTransform(m11, m12, m21, m22, dx, dy);
}

Для удобства я использовал матричную библиотеку Сильвестра , но вы можете сделать свое умножение.

Чтобы получить преобразованную точку, просто умножьте матрицу преобразования на точку: 

// Get the transformed point as [x, y]
contextPrototype.getTransformedPoint = function(x, y) {
    var point = this.xform.multiply($V([x, y, 1]));
    return [point.e(1), point.e(2)];
}
1 голос
/ 12 мая 2009

Я думаю, что единственный способ найти это - применить те же преобразования, которые вы делали в контексте рендеринга, к точкам, которые вы хотите узнать из фактических координат. Несколько библиотек предоставляют матричные операции, например: http://sylvester.jcoglan.com/ Вы можете попытаться выполнить операции поворота до декартовых координат

...