자바 스크립트

Question

가 ... 내가 저항의 다른 점 드래그 수있는 방법을 알아낼 분명히 너무 바보 끌어 SVG : 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 함수가 있고 다른 원의 좌표를 전달하여 회전 및 크기 조정이이 지점에 있어야 함을 나타냅니다. 더 좋은 방법이있을 것이라고 확신합니다.