JavaScript的SVG拖

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> 

要注意的要點是，主組的大小屬性，它告訴函數的電阻應該有多長。圓圈具有selectElement函數，並傳遞另一個圓的座標以指示旋轉和縮放應該是關於此點的。我相信有更好的方法來做到這一點。