Question

......我显然太愚蠢了，我怎么能拖出另一个电阻点： 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函数并传递另一个圆的坐标以指示旋转和缩放应该是关于此点的。我确信有更好的方法可以做到。

javascript svg拖动

1 个答案: