1

次のように、Kinetic JS を使用して正常に線を引くことができました。

var track129 = new Kinetic.Spline({
points: [
{x: 3, y: 400}, 
{x: 196, y: 400}, 
{x: 213, y: 395}, 
{x: 290, y: 345},
{x: 319, y: 324},
{x: 389, y: 253},
{x: 457, y: 184},
{x: 471, y: 173},
{x: 481, y: 173},
{x: 682, y: 173}, // this is where the blue track branches to the red track (129, 009).
{x: 708, y: 171},
{x: 740, y: 186},
{x: 773, y: 218},
{x: 799, y: 240},
{x: 822, y: 251},
{x: 845, y: 254},
{x: 866, y: 251},
{x: 894, y: 238},
{x: 934, y: 204}        
],
stroke: 'blue',
strokeWidth: 2,
lineCap: 'round',
tension: .2
});

layer.add(track129);

次に、次のコマンドを使用して線を回転させます。

track129.setRotationDeg(45);

ビジュアル表示が更新されます。次に、次のように、回転した線から変換されたポイントを取得しようとします。

var mySpleenPoints = track129.getPoints();

入力したときと同じポイントの配列を取得することになります。回転したポイントの絶対座標を導出できるかどうかを確認するために、オフセットと変換を取得しようとしましたが、うまくいきませんでした。実際の翻訳された値を抽出するのを手伝ってくれる人はいますか?

4

2 に答える 2

2

申し訳ありませんが、回転は実際にはポイント値を変換しないため、正しい出力が得られます。変換された値が必要な場合は、座標を計算する関数を作成する必要があります。良いことは、それを行うために必要なすべての値を持っていることです。回転度、座標、点を中心とした回転。

これが方程式だと思います（原点を中心とした回転の場合）

 x' = x * cos(Theta) - y * sin(Theta);
 y' = x * sin(Theta) + y * cos(Theta);

HTML5 Canvas: 回転時の軸、y ポイントの計算

https://math.stackexchange.com/questions/123098/finding-the-position-of-a-point-after-rotation-why-is-my-result-incorrect

于 2013-04-09T13:36:34.583 に答える
2

本当にイライラする行為です。とにかく、投稿をありがとう。将来この問題に遭遇した人のためにコードを提供しています。

function degToRad(angle) {
return (angle / 180) * Math.PI;
}

function rotateVector ( v, center, angle ) {
var theta = degToRad(angle);        
var s = Math.sin(theta);

var c = Math.cos(theta);

var nx = c * (v.x -center.x) + center.x - s * (v.y - center.y);
var ny = s * (v.x - center.x) + c * (v.y - center.y) + center.y;

v.x = nx;
v.y = ny;

return v;
};
于 2013-04-15T01:38:26.857 に答える