ドラッグ＆ドロップが正しく機能していませんprocessing.js

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に改名します。

その後、あなたの主な問題は、の2つのがxとyの座標になっていることに起因します。あなたのループから最初に来る：

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

あなたの四角形を描画する座標のこの最初のセットを使用します。

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

あなたはあなたのドラッグロジックで、この第2のセットを使用しますが、あなたはあなたの四角形を描画するためにそれらを使用することはありません。しかし、あなたはあなたのRectangleクラス内の座標の第2のセットを持っています。より一般的には、show()関数をまったく使用していないようです。その四角形がどこに現れると思いますか？

また、Rectangleインスタンスをインスタンス化するだけです。 forループで描画している長方形は、作成したRectangleとは関係ありません。

問題を解決するには、いくつかのことを行う必要があります。

ステップ1：画面に描画する各矩形に対して、Rectangleという1つのインスタンスを作成します。つまり、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()機能を短縮し、それらを描くことができます。

void draw() { 

    background(100); 

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

ステップ3：あなたのロジックを含めるようにshow()関数を変更

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を色付けするためのものです。各 Rectangleが、その位置とマウスがその内部にあるかどうかに基づいて描画する方法を知る方法を参照してください。私たちのロジックはすべて、2つの場所に分割されるのではなく、このクラスの内部にあります。

手順4：その後、そのif文内にドラッグロジックを追加できます。カーソルがRectangle内にあり、マウスボタンが押されている場合は、ユーザーがRectangleことをドラッグしている知っている：

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

は、私は定期的な処理でこれをやったことに注意してください、ないProcessing.js、あなたが持っているかもしれないので、 mousePressedの代わりにmouseIsPressedを使用するような小さな調整を行います。しかし基本的な手順は同じです：あなたのロジックをRectangleクラス内に移動する必要があります。そして、そのクラス内の変数を使用して各矩形を描画する必要があります。

特定の手順に就いていない場合は、更新されたコードと、コードが何を期待しているか、その代わりに何が行われているのか、そしてその2つの違いについて説明してください。がんばろう。

Answer 2

あなたがここで答えを見つけることができます：https://processing.org/examples/mousefunctions.html

しかし、私はあなたがマウスを使用できないことを覚えているだろうイベントをオブジェクトに挿入します。 mouse-click-on-object