Javascript SVG拖动

Question

原问题在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 事件、父母、孩子和其他家庭需要时间让我了解。

如果有人想帮忙...

Answer 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>

需要注意的重要一点是，主组有一个 size 属性，它告诉函数电阻应该多长。这些圆圈具有 selectElement 函数并传递另一个圆圈的坐标以指示旋转和缩放应该围绕该点进行。我确信有更好的方法来做到这一点。