在处理

Question

我正在尝试为大学实验设计一些东西。我需要人们能够拖动图像并将它们放在地图上。 我能够创建我的程序的布局，并可以在窗口中的特定位置加载png文件，并将地图放在我想要的窗口中。 我发现了一些拖动图像的方法，它没问题，但它破了而且效率不高。 我遇到了＃34;在处理过程中拖动对象＆＃34;本网站上的问题（见dragging objects in processing）。 Mike＆＃39; Pomax＆＃39; Kamermans＆＃39;代码非常有效，我能够将我当前的代码与他合并，以便我几乎拥有我想要的东西。问题在于我拖着叮当声。我试图调整代码，以便我可以加载和拖动图像，但它超出了我的知识水平。我认为他的重绘方法是要走的路。我还试图找到一种用图像替换每个字符串但失败的方法。

// adapted from Mike 'Pomax' Kamermans' code https://stackoverflow.com/questions/15305722/dragging-objects-in-processing
PImage wheel;
LineCollection lines;
float textSize;


void setup(){
  size(displayWidth, displayHeight);

  wheel = loadImage("wheel.png");

  // fix the text size, reference a real font
  textSize = 32; 
  textFont(createFont("Times New Roman", textSize));
  // parse strings, construct Lines container
  String[] textValues = new String[]{"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", 
  "11", "12", "13", "14", "15", "16", "17", "18", "19"};
  lines = new LineCollection(textValues);
  // Do not loop! only update when events warrant,
  // based on redraw() calls  


  noLoop();
}
// fall through drawing
void draw() {
  background(255);
  image(wheel, ((displayWidth/2) - ((displayWidth * 0.4167)/2)), 0, (displayWidth * 0.4167), (displayWidth * 0.4167));

  stroke(0, 0, 0, 0); 
  fill(210, 210, 210);
  rect(0, (displayHeight*0.75), displayWidth, displayHeight);

  lines.draw(); 

}

// fall through event handling
void mouseMoved() { lines.mouseMoved(mouseX,mouseY); redraw(); }
void mousePressed() { lines.mousePressed(mouseX,mouseY); redraw(); }
void mouseDragged() { lines.mouseDragged(mouseX,mouseY); redraw(); }
void mouseReleased() { lines.mouseReleased(mouseX,mouseY); redraw(); }


/**
 * A collection of lines. This is *only* a collecton,
 * it is simply responsible for passing along events.
 */
class LineCollection {
  Line[] lines;
  int boundaryOverlap = 20;

  // construct
  LineCollection(String[] strings){
    lines = new Line[strings.length];
    int x, y;
    for(int i=0, last=strings.length; i<last; i++) {
      x = (int) (((displayWidth/20) * i) + 10);
      y = (int) ((displayHeight*0.85)-10);
      lines[i] = new Line(strings[i], x, y);   
    }
  }

  // fall through drawing   
  void draw() {

    // since we don't care about counting elements
    // in our "lines" container, we use the "foreach"
    // version of the for loop. This is identical to
    // "for(int i=0; i<lines.size(); i++) {
    //    Line l = lines[i];
    //    [... use l here ...]
    //  }"
    // except we don't have to unpack our list manually.

    for(Line l: lines) { l.draw(); }
  }

  // fall through event handling
  void mouseMoved(int mx, int my) { for(Line l: lines) { l.mouseMoved(mx,my); }} 
  void mousePressed(int mx, int my) { for(Line l: lines) { l.mousePressed(mx,my); }} 
  void mouseDragged(int mx, int my) { for(Line l: lines) { l.mouseDragged(mx,my); }}
  void mouseReleased(int mx, int my) { for(Line l: lines) { l.mouseReleased(mx,my); }}
}

/**
 * Individual lines
 */
class Line {
  String s;
  float x, y, w, h;
  boolean active;
  color fillColor = 0;
  int cx, cy, ox=0, oy=0;

  public Line(String _s, int _x, int _y) {
    s = _s;
    x = _x;
    y = _y;
    w = textWidth(s);
    h = textSize;
  }

  void draw() {
    fill(fillColor);
    text(s,ox+x,oy+y+h);
  }

  boolean over(int mx, int my) {
    return (x <= mx && mx <= x+w && y <= my && my <= y+h);
  }

  // Mouse moved: is the cursor over this line?
  // if so, change the fill color
  void mouseMoved(int mx, int my) {
    active = over(mx,my);
    fillColor = (active ? color(155,155,0) : 0);
  }

  // Mouse pressed: are we active? then
  // mark where we started clicking, so 
  // we can do offset computation on
  // mouse dragging.
  void mousePressed(int mx, int my) {
    if(active) {
      cx = mx;
      cy = my;
      ox = 0;
      oy = 0; 
    }
  }

  // Mouse click-dragged: if we're active,
  // change the draw offset, based on the
  // distance between where we initially
  // clicked, and where the mouse is now.
  void mouseDragged(int mx, int my) {
    if(active) {
      ox = mx-cx;
      oy = my-cy;
    }
  }

  // Mouse released: if we're active,
  // commit the offset to this line's
  // position. Also, regardless of
  // whether we're active, now we're not.  
  void mouseReleased(int mx, int my) {
    if(active) {
      x += mx-cx;
      y += my-cy;
      ox = 0;
      oy = 0;
    }
    active = false;
  }
}

非常感谢任何帮助。

Answer 1

我能给你的最好的建议就是停止尝试在互联网上找到的哈弗斯特代码来做你想做的事情。即使代码很棒，您也需要在使用它之前了解它正在做什么。

退后一步，问问自己如何自己完成这项任务。

如果你要做的只是拖动一个矩形区域（如图像），那么你只需要确定鼠标何时在该区域内，然后使用pmouseX和pmouseY变量来弄清楚该区域的移动量。像这样：

float squareX = 200;
float squareY = 200;
float squareWidth = 50;
float squareHeight = 50;

//keep track of when the mouse is inside the square
boolean mouseInSquare = false;

void setup() {
  size(500, 500);
}

//check if the mouse is in the square
void mousePressed() {
  if (mouseX > squareX && mouseX < squareX + squareWidth && mouseY > squareY && mouseY < squareY + squareHeight) {
    mouseInSquare = true;
  }
}

//if the mouse is in the square, then move it when the mouse is dragged
void mouseDragged() {
  if (mouseInSquare) {
    float deltaX = mouseX - pmouseX;
    float deltaY = mouseY - pmouseY;

    squareX += deltaX;
    squareY += deltaY;
  }
}

//when we let go of the mouse, stop dragging the square
void mouseReleased() {
  mouseInSquare = false;
}

//draw the square
void draw() {
  background(0);
  rect(squareX, squareY, squareWidth, squareHeight);
}