Question

这可能看起来像一个难题，我很好奇，如果我们能够在应用settransform之后找到b点处的x，y像素位置，那么公式是什么？

var ctx = ctx1.getContext("2d");
ctx.setTransform(1,tan(-0.2),0,1,0,0);
ctx.beginPath();
ctx.moveTo(10,0); //point a
ctx.lineTo(200,0); //point b
ctx.stroke();

Answer 1

通过setTransform值转换点。

假设setTransform(a,b,c,d,e,f)和点x,y，则转换为

var transformPoint = function(x,y,a,b,c,d,e,f){
    var p = {};
    p.x = x * a + y * c + e;
    p.y = x * b + y * d + f;
    return p;  // returns the transformed point.
}
var pointA = transformPoint(20,0,1,Math.tan(-0.2),0,1,0,0);
var pointB = transformPoint(200,0,1,Math.tan(-0.2),0,1,0,0);

Answer 2

不幸的是，没有简单的方法可以解决这个问题。您必须完全知道当前的转换矩阵以计算映射的位置，但遗憾的是，只有Google实施了CanvasRenderingContext2D.currentMatrix。

您唯一能做的就是自己跟踪当前的转型。您可以在this StackOverflow question找到一些帮助。

如果您使用this library，我建议您使用前一个示例：

var t = new Transform();
t.rotate(5);
var m = t.m;
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);

更重要的是，我会事件包装，所以你可以使用它：

Transform.prototype.apply = function(ctx) {
    var m = this.m;
    ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);
};

var t = new Transform();
t.rotate(5);
t.apply(ctx);

如果你跟踪转换，你可以得到你的坐标：

var t = new Transform();
t.m = [1,tan(-0.2),0,1,0,0];
t.apply(ctx);
ctx.beginPath();
ctx.moveTo(10,0); //point a
ctx.lineTo(200,0); //point b
ctx.stroke();
var mapped = t.transformPoint(200, 0);
console.log(mapped[0], mapped[1]);

在点a到b中找到tan（x）的位置

2 个答案: