【问题标题】:Finding vertices from dimensions and position of angled rectangle从角矩形的尺寸和位置查找顶点
【发布时间】:2014-04-13 22:24:22
【问题描述】:

我正在尝试实现变换矩阵公式:

cos() -sin()

sin() cos()

在下面的Javascript代码中this.rot.cos =角度的cos,this.rot.sin是角度的sin。

var h1 = this.rot.cos * this.dimension.x,
h2 = this.rot.sin * this.dimension.x,
h3 = this.rot.cos * this.dimension.y,
h4 = this.rot.sin * this.dimension.y;

v = [

{
  x: h1 - h4,
  y: h2 + h3
},

{
  x: -(h1 - h4),
  y: h2 + h3
},

{
  x: -(h1 - h4),
  y: -(h2 + h3)
},

{
  x: h1 - h4,
  y: -(h2 + h3)
}

  ];

 tankBattle.ctx.beginPath();
  tankBattle.ctx.moveTo(v[0].x, v[0].y);
  tankBattle.ctx.lineTo(v[1].x, v[1].y);
  tankBattle.ctx.lineTo(v[2].x, v[2].y);
  tankBattle.ctx.lineTo(v[3].x, v[3].y);
  tankBattle.ctx.lineTo(v[0].x, v[0].y);

我得到的形状以与 sin 和 cos 波相同的模式移动,并在一定程度上变为 0(我相信 90 和 270)。我在这里计算顶点有什么问题吗?

【问题讨论】:

  • 我不确定您要在哪个轴上旋转,但formulas on codeNtronix 可能会有所帮助。他们为我工作,不幸的是我不再拥有我写的脚本。
  • 在 x 和 y 轴上?

标签: javascript html canvas vector


【解决方案1】:

看来你的公式有误,以下是有效的:

http://jsbin.com/wudeqewa/1/edit

function drawTank(x, y, rot)  {

    var cosrot = Math.cos(rot);
    var sinrot = Math.sin(rot);

    var h1 = cosrot * dimension.x,
        h2 = sinrot * dimension.x,
        h3 = cosrot * dimension.y,
        h4 = sinrot * dimension.y;

    v = [{
        x: h1 - h4,
        y: h2 + h3
    },

    {
        x: h1 + h4,
        y: h2 - h3
    },

    {
        x: -h1 + h4,
        y: -h2 - h3
    },

    {
        x: -h1 - h4,
        y: -h2 + h3
    }];

    ctx.save();
    ctx.translate(x, y);
    ctx.beginPath();
    ctx.moveTo(v[0].x, v[0].y);
    ctx.lineTo(v[1].x, v[1].y);
    ctx.lineTo(v[2].x, v[2].y);
    ctx.lineTo(v[3].x, v[3].y);
    ctx.lineTo(v[0].x, v[0].y);
    ctx.stroke();
    ctx.restore();
}

【讨论】:

  • 这是正确的,非常感谢。我要疯了,试图找出我错在哪里。
猜你喜欢
  • 2011-01-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-23
相关资源
最近更新 更多