在处理中拖动 png 文件

Question

我正在尝试为大学实验设计一些正在处理的东西。我需要人们能够拖动图像并将它们放置在地图上。 我能够创建程序的布局，并且可以在窗口内的特定位置加载 png 文件，并且我已将地图放置在窗口中我想要的位置。 我找到了一些拖动图像的方法，它没问题，但它坏了并且效率不高。 我在这个网站上遇到了“正在处理的拖动对象”问题（在这里找到：dragging objects in processing）。 Mike 'Pomax' Kamermans 的代码非常高效，我能够将我当前的代码与他的代码结合起来，这样我几乎得到了我想要的。问题是我拖着刺。我试图调整代码，以便我可以加载和拖动图像，但这超出了我的知识水平。我确实认为他的重绘方法是要走的路。我还试图找到一种用图像替换每个字符串的方法，但失败了。

// 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);
}