0

元の質問はhttp://stackoverflow.com/questions/7055607/trying-to-rotate-and-transform-svg-path-do-i-need-trigonometry-calculationsにあります

...抵抗器の別のポイントをドラッグする方法を見つけようとしています: http://www.3lectronics.com/electronics-layout/resistor.svg

SVG イベント、親、子、その他の家族については、理解するのに時間がかかります。

誰かが助けたいなら...

4

1 に答える 1

1

私はあなたが求めているようなものを持っていると思います: http://dl.dropbox.com/u/169269/resistor2.svg とにかく始められるはずです。

今はもっと複雑ですが、より多くの要素を簡単に追加できるはずです。もっと簡単な方法があるに違いないと思いますが、それは興味深い挑戦です。以前の変換を追跡する必要があるため、マトリックス変換が必要だと思います (まだ知らない場合は、それらを学ぶ必要があります)。http://www.w3.org/TR/SVG/coords.html#NestedTransformationsを見ることをお勧めします

新しいドラッグ関数は次のようになります。

function drag(evt)
{
    if(selected_element != 0)
    {
        dx = rotate_x - evt.pageX;
        dy = rotate_y - evt.pageY;

        new_size  = Math.sqrt(dx*dx + dy*dy) / element_size;
        new_angle = Math.PI/2 + Math.atan2(dy, dx);
        delta_size  = new_size / current_size;
        delta_angle = new_angle - current_angle;
        current_size  = new_size;
        current_angle = new_angle;

        new_matrix = new Array(6);

        // Scale
        for (i=0; i<6; i++){
            current_matrix[i] = current_matrix[i] * delta_size;
        }
        current_matrix[4] = current_matrix[4] + (-delta_size) * rotate_x;
        current_matrix[5] = current_matrix[5] + (-delta_size) * rotate_y;


        for (i=0; i<6; i++){new_matrix[i] = current_matrix[i]; }

        // Rotate around (0,0)
        cos_theta = Math.cos(delta_angle);
        sin_theta = Math.sin(delta_angle);
        new_matrix[0] = cos_theta*current_matrix[0] - sin_theta*current_matrix[1];
        new_matrix[1] = sin_theta*current_matrix[0] + cos_theta*current_matrix[1];
        new_matrix[2] = cos_theta*current_matrix[2] - sin_theta*current_matrix[3];
        new_matrix[3] = sin_theta*current_matrix[2] + cos_theta*current_matrix[3];
        new_matrix[4] = cos_theta*current_matrix[4] - sin_theta*current_matrix[5];
        new_matrix[5] = sin_theta*current_matrix[4] + cos_theta*current_matrix[5];

        // Transform back to original point
        new_matrix[4] += rotate_x;
        new_matrix[5] += rotate_y;

        transform = "matrix(" + new_matrix.join(' ') + ")" ;
        selected_element.setAttributeNS(null, "transform", transform);
        current_matrix = new_matrix;
    }
}

以前と似ていますが、最後のドラッグ イベント以降の角度と距離の差を測定するようになりました。

抵抗グループは次のようになります。

  <g class="resistor" transform="matrix(1 0 0 1 0 0)" onmouseup="deselectElement()" size="200">
    <line x1="200" y1="200" x2="200" y2="400" stroke="blue" stroke-width="5" pointer-events="none"/>
    <rect x="180" y="250" width="40" height="100" stroke="blue" fill="white" stroke-width="5" pointer-events="none"/>
    <circle cx="200" cy="200" r="10" fill="blue" onmousedown="selectElement(evt, 200, 400)"/> 
    <circle cx="200" cy="400" r="10" fill="blue" onmousedown="selectElement(evt, 200, 200)"/> 
  </g>

注意すべき重要な点は、メイン グループには、関数に抵抗の長さを指示するサイズ属性があることです。円には selectElement 関数があり、他の円の座標を渡して、回転とスケーリングがこの点を中心に行われるべきであることを示します。もっと良い方法があると確信しています。

于 2011-08-17T22:05:39.530 に答える