화면 좌표를 모델 좌표로 변환

Question

나는 일종의 초보자 질문을 가지고 있습니다.

내 응용 프로그램 (processingjs)에서는 사용자가 장면을 확대/축소하고 스크롤 할 수 있도록 scale() 및 translate()를 사용합니다. 스케일을 1.0으로 유지하는 한 아무런 문제가 없습니다. 하지만 스케일을 사용할 때마다 (즉, 스케일 (0.5)) 나는 잃어버린다. ...

내가 그리는 대상의 mouseOver 상태를 결정하는 데 사용하는 scene 좌표로 변환 된 mouseX와 mouseY가 필요하다. 장면.

누구든지이 좌표를 어떻게 번역 할 수 있습니까? 미리 감사드립니다. /Richard

Answer 1

불행히도 나를 위해이 코드 수정이 필요합니다. 이것을 Processing.JS 코드 저장소에 제출하는 방법을 살펴 보도록하겠습니다. 그러나 여기에 제가 한 일이 있습니다.

먼저 modelX() 및 modelY()를 사용하여 월드 뷰에서 마우스의 좌표를 가져와야합니다. 즉 다음과 같이 표시됩니다

float model_x = modelX(mouseX, mouseY); 
float model_y = modelY(mouseX, mouseY); 

불행하게도 Processing.JS은 2D 환경에서 올바르게 modelX()와 modelY() 값을 계산하지 않는 것 같습니다. 이를 수정하기 위해 다음과 같이 기능을 변경했습니다. 내가 그이 문제가되어 다른 사람을 도움이되기를 바랍니다

p.modelX = function(x, y, z) { 
    var mv = modelView.array(); 
    if (mv.length == 16) { 
    var ci = cameraInv.array(); 
    var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3]; 
    var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7]; 
    var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11]; 
    var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15]; 
    var ox = 0, ow = 0; 
    var ox = ci[0] * ax + ci[1] * ay + ci[2] * az + ci[3] * aw; 
    var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw; 
    return ow !== 0 ? ox/ow : ox 
    } 
    // We assume that we're in 2D 
    var mvi = modelView.get(); 
    // NOTE that the modelViewInv doesn't seem to be correct in this case, so 
    // having to re-derive the inverse 
    mvi.invert(); 
    return mvi.multX(x, y); 
}; 
p.modelY = function(x, y, z) { 
    var mv = modelView.array(); 
    if (mv.length == 16) { 
    var ci = cameraInv.array(); 
    var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3]; 
    var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7]; 
    var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11]; 
    var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15]; 
    var oy = ci[4] * ax + ci[5] * ay + ci[6] * az + ci[7] * aw; 
    var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw; 
    return ow !== 0 ? oy/ow : oy 
    } 
    // We assume that we're in 2D 
    var mvi = modelView.get(); 
    // NOTE that the modelViewInv doesn't seem to be correct in this case, so 
    // having to re-derive the inverse 
    mvi.invert(); 
    return mvi.multY(x, y); 
}; 

: mv.length의 == (16)에 대한 테스트 및 2D의 끝 부분을 유의하십시오.

Answer 2

다른 방법을 시도해 보셨습니까?

예를 들어, 2D 환경에 있다고 가정하면 모든 프레임을 일종의 매트릭스로 "맵핑"할 수 있습니다. 이 같은 뭔가 :

int fWidth = 30; 
int fHeight = 20; 
float objWidth = 10; 
float objHeight = 10; 

void setup(){ 
    fWidth = 30; 
    fHeight = 20; 
    objWidth = 10; 
    objHeight = 10; 
    size(fWidth * objWidth, fHeight * objHeight); 
} 

이 경우 당신은 300 * 200 프레임을 가지고 있지만, 30 * 20 절에서 구분됩니다. 이렇게하면 개체를 순서대로 움직일 수 있습니다.

개체를 그릴 때 크기를 지정해야하므로 objWidth 및 objHeight을 사용할 수 있습니다.

여기 거래가 있습니다. 개체 크기의 값을 편집하는 "확대/축소 방법"을 만들 수 있습니다. 이렇게하면 프레임 속성을 편집하지 않고 더 작거나 큰 오브젝트를 그렸습니다.

이것은 부정확 한 질문으로 인해 간단한 예입니다. 3D 환경에서도 [더 복잡한 방식으로] 할 수 있습니다.