2

キャンバス上で N 辺のポリゴンを回転させようとしていますが、座標に問題があります。形状は、それ自体の外側にある原点を中心に回転しているようです (原点を形状の中心にしたいのですが)。どんなヒントでも大歓迎です。

var x = 50;
var y = 50;
var tranx;
var trany;

x -= tranx = x + shape.radius;
y -= trany = y + shape.radius;

elem.translate(tranx,trany);
elem.rotate(90 * radian);

var k = 0,
angle = 360/shape.sides;

elem.moveTo(x,y);

for (; k <shape.sides; k++) {
    elem.lineTo(x+=Math.cos( ( angle * k )* radian) * shape.radius, y+=Math.sin( ( angle * k )* radian) * shape.radius);
}
4

2 に答える 2

1

最初の解決策は、ややハックですが、形状オブジェクトにパラメータ rotation_angle を追加することです。次に、ループは次のように変更されます。

k=0;
elem.moveTo(
     x+=Math.cos( ( angle * k +shape.rotation_angle)* radian) * shape.radius,
     y+=Math.sin( ( angle * k +shape.rotation_angle)* radian) * shape.radius);
for(k=1;k<shape.sides;k++){
     elem.lineTo(
          x+=Math.cos( ( angle * k +shape.rotation_angle)* radian) * shape.radius,
          y+=Math.sin( ( angle * k +shape.rotation_angle)* radian) * shape.radius);
}

2 番目の解決策は、elem がキャンバス コンテキストであり、多角形の中心が座標 (x,y) にあるという前提に基づいています。

次に、正しいシーケンスは次のようになると思います。

elem.translate(x,y); //Translate the origin to the center of polygon.
elem.rotate(rotation_angle); // Rotate the context around the origin
var k=0;
elem.moveTo(shape.radius,0);
for(k=1;k<shape.sides;k++){
   elem.lineTo(Math.cos(k*angle*radian)*shape.radius,
               Math.sin(k*angle*radian)*shape.radius);
}
于 2013-02-05T17:53:29.817 に答える