끌어서 놓기가 제대로 작동하지 않습니다.

Question

내가하려는 것은 마우스 위치로 마우스를 눌렀지만 작동하지 않을 때 캔버스 주위를 흰색 사각형으로 이동하는 것입니다. 나는 뭔가를 놓친다는 것을 알고 당신이 나를 도울 것을 부탁합니다. 여기 내 코드입니다 :

Object o; 

int[][] back =new int[3][3]; 
int pad = 10, bs=100;   //len=pad*(back.length+1)+bs*back.length; za dinamichno resaizvane na ekrana 
boolean drag = false; 


void setup() { 
    size(400, 400); 
    noStroke(); 
    o = new Object(); 
} 

void draw() { 

    rectt(0, 0, width, height, color(100)); 

    for (int row=0; row<back.length; row++) 
    for (int coll=0; coll<back[row].length; coll++) { 
     float x = pad+(pad+bs)*coll; 
     float y = pad+(pad+bs)*row; 

     rectt(x, y, bs, bs, color(150)); 
     if (mouseX >=x && mouseX<=x+width/x*coll+bs 
     && mouseY>=y && mouseY<=y+height/y*row+bs) { 
     rectt(x, y, bs, bs, color(255, 0, 0)); 
     } 
    } 
    o.show(); 
    //o.over(); 
} 



void rectt(float x, float y, float w, float h, color c) { 
    fill(c); 
    rect(x, y, w, h); 
} 


void mousePressed() { 
    o.drag(); 

} 

와 클래스는 여기에 있습니다 :

이

class Object { 
    float size = 50; 
    float x; 
    float y; 
    // boolean d = false; 
    Object() { 
    x = width -60; 
    y = height -60; 
    } 

    void show() { 
    fill(255); 
    rect(x, y, size, size); 
    } 


    void drag() { 
    if (mouseX >= x && mouseX <= x+size && mouseY <= y+size && mouseY >= y && mousePressed) { 
     x = mouseX; 
     y = mouseY; 
    } 
    } 
} 

Answer 1

앞으로는 코드가하는 일과 정확히 작동하지 않는다는 의미가 무엇인지 정확하게 알려주십시오.

하지만 코드를 살펴보고 무슨 일이 일어나는지 알아 봅시다.

먼저 클래스 이름을 Object으로 지정하는 것이 좋습니다. 아마도 실제로 Processing.js를 사용하면 아무 것도 해치지 않지만 미안한 것보다 안전 할 것입니다. 그래서 이름을 Rectangle으로 바꿀 것입니다. 그 후

은, 당신의 주요 문제는 x 및 y 좌표 이 세트를 가지고 있다는 사실에서 비롯됩니다. 첫 번째 코드는 다음과 같습니다.

float x = pad+(pad+bs)*coll; 
float y = pad+(pad+bs)*row; 

이 첫 번째 좌표 집합을 사용하여 직사각형을 그립니다.

x = width -60; 
y = height -60; 

당신은 당신의 드래그 로직이 두 번째 세트를 사용하지만, 당신은 당신의 사각형을 그리기 위해 그들을 사용하지 않을 :하지만 당신은 당신의 Rectangle 클래스 내에서 좌표의 두 번째 세트를 가지고. 더 일반적으로, 당신은 결코 show() 함수를 사용하는 것처럼 보이지 않습니다. 그 사각형이 어디에 나타날 것으로 예상합니까?

또한 Rectangle 인스턴스 만 인스턴스화합니다. for 루프에서 그리는 직사각형은 사용자가 만든 Rectangle과 관련이 없습니다.

문제를 해결하려면 몇 가지 작업을 수행해야합니다.

1 단계 : 화면에 그리려는 각 사각형에 대해 Rectangle의 인스턴스를 하나 만듭니다. 즉, ArrayList을 만들어 9 Rectangle 인스턴스가 아닌 하나를 보유해야합니다.

ArrayList<Rectangle> rectangles = new ArrayList<Rectangle>(); 

당신은 당신의 back 변수를 사용하지 않습니다, 그래서 당신은 그것을 제거 할 수 있습니다

는 스케치의 상단에이를 넣습니다.당신의 setup() 함수 내에서

넣고이 :

for (int row=0; row<back.length; row++) { 
    for (int coll=0; coll<back[row].length; coll++) { 
     float x = pad+(pad+bs)*coll; 
     float y = pad+(pad+bs)*row; 

     Rectangle rectangle = new Rectangle(x, y); 
     rectangles.add(rectangle); 
    } 
    } 

이 코드는 좌표를 순환하고 그 위치에 Rectangle의 인스턴스를 생성 한 다음 ArrayList에 추가합니다. Rectangle 생성자에 매개 변수를 추가해야합니다.

2 단계 : 그런 다음 ArrayList에 Rectangle 인스턴스를 통해 간단하게 루프에 draw() 기능을 단축하고 그릴 수 있습니다 : 당신의 논리를 포함하도록 show() 함수를 수정 :

void draw() { 

    background(100); 

    for (Rectangle r : rectangles) { 
    r.show(); 
    } 
} 

3 단계 마우스 위치에 따라 Rectangle 색칠하기 :

void show() { 
    if (mouseX >=x && mouseX<=x+size && mouseY>=y && mouseY<=y+size) { 
     //mouse is inside this Rectangle 
     rectt(x, y, size, size, color(255, 0, 0)); 
    } else { 
     rectt(x, y, size, size, color(150)); 
    } 
    } 

각 Rectangle이 자신의 위치와 마우스가 그 안에 있는지 여부를 기반으로 그릴 방법을 알고있는 방법을 확인하십시오. 우리의 모든 논리는 두 곳으로 나뉘 지 않고이 클래스 안에 있습니다.

4 단계 : 그런 다음 if 문 안에 드래그 논리를 추가 할 수 있습니다. 커서가 Rectangle 내부와 마우스를 누르고있는 경우에, 당신은 사용자가 Rectangle 것을 끌어 알고 :

//mouse is inside this Rectangle 
if (mousePressed) { 
    x = mouseX - size/2; 
    y = mouseY - size/2; 
} 

나는 일반 처리에 이런 짓을주의하시기 바랍니다하지 Processing.js, 당신은 할 수 있도록 mousePressed 대신 mouseIsPressed을 사용하는 것과 같이 약간 조정할 수 있습니다. 그러나 기본 단계는 동일합니다 : 논리를 Rectangle 클래스 내부로 이동해야합니다. 그런 다음 해당 클래스 내의 변수를 사용하여 각 사각형을 그려야합니다.

특정 단계에서 어려움을 겪는다면 업데이트 된 코드 및 코드에서 기대하는 바를 정확히 설명하고 대신 수행하는 작업과 그 두 가지가 다른 점에 대한 설명을 게시하십시오. 행운을 빕니다.

Answer 2

당신은 여기에서 대답 찾을 수 있습니다 https://processing.org/examples/mousefunctions.html

하지만 마우스를 사용할 수없는 것을 나는 당신을 기억합니다 이벤트를 발생시킵니다. mouse-click-on-object